Как конвертировать команду browser-sync в gulp?

Question

[Павел]

Сейчас использую такую команду
browser-sync start --proxy="localhost:80" --files="*.html, *.css , *.php"
она цыпляет мой php сервер и следит за файлами html css и php , но мне надо еще и sass файлы обрабатывать , а это лучше делать галпом.
Как эту команду преобразовать в таск на gulp?

Comments

[copal]

У меня вот так в gulpfile.js

const browserSync = require('browser-sync');
const reload = browserSync.reload;
const browserSyncConfig = require('./browser-sync-config');

gulp.task('browser-sync', function(){
	browserSync(browserSyncConfig.server.browser);
});

таск browser-sync нужно вызвать только один раз при старте. И есть ещё вот такой фалй-конфиг browser-sync-config.js

var fs = require('fs');
var path = require('path');
var url = require('url');

const routes = {
    "/systemfile.js": "/systemfile.js"
};

const CONTENT_TYPES = {
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.css': 'text/css'
};

function readFile(path){
    return new Promise(function(resolve, reject){
        fs.readFile(path, 'utf8', function(error, data){
            if(error){
                reject(error);
            }else{
                resolve(data);
            }
        });
    });
}

const SERVER = {
    browser: {
        online: false,
        port: 8080,
        open: false,
        injectChanges: false,
        proxy: {
            target: "http://localhost:3000",
            middleware: function(req, res, next){
                var route = routes[req.url] || req.url;
                var type = CONTENT_TYPES[path.parse(route).ext];

                if(route && type){
                    readFile(global.process.cwd() + route)
                        .then(function(data){
                            console.log(route, type, req.url);

                            res.writeHead(200, { "Content-Type": type });
                            res.write(data.toString('utf8'));
                            res.end();
                        })
                        .catch(function(error){
                            console.log('404 || redirect', error, req.url, route, type);

                            res.writeHead(404);
                            res.end();
                        });
                }else{
                    next();
                }
            }
        },
        serveStatic: ["/public/css/"]
    },
    reload: {
        stream: true
    }
};

module.exports = {
    server: SERVER
};

И в самый конец таска sass дописываете -
.pipe(reload(browserSyncConfig.server.reload))

! есть возможность несоответствие названий и путей, так как у меня немного по другому и мне пришлось просто перекопировать и переизменять на глаз. По этому знайте, что это в качестве примера.

Answer 1

[Алексей Струков]

поставь в зависимость таск по обработке sass, чтобы перед запуском браузера он конвертировал твой sass в css