Почему не работает browserSync?

Question

[Dymok]

В общем, попытался разбить gulpfile на разные файлы, чтобы было более структурировано. Но теперь перестало работать обновление страницы при изменении файлов с помощью
.pipe(browserSync.stream())
На данный момент gulpfile и его части выглядят так: https://github.com/UnluckySerivelha/test
Не могу понять, в чем проблема? Хелп, плс.

Answer 1

[Антон Спирин]

Основы работы с модулями CommonJS:

tasks.js

const task1 = () => {};
const task2 = () => {};

module.exports = {
  task1,
  task2,
}

const tasks = require('./tasks');

const { task1, task2 } = tasks;

Comments

[Dymok]

Спасибо за ответ, но с импортом вроде все в порядке, не работает только browser sync. Или я неправильно понимаю?

[Антон Спирин]

Dymok, так как вы делать можно, но код получается нечитаемым и не масштабируемым.
Дело в том, что вы создаете несколько инстансов browserSync в разных тасках.

По идее вам надо это делать как-то так:

const gulp = require("gulp");
const createJSTask = require('./tasks/js');
const createNunjucksTask = require('./tasks/nunjucks');
const browserSync = require("browser-sync");

const browserSyncInstance = browserSync.create();

gulp.task('js', createJSTask(browserSyncInstance));
gulp.task('nunjucks', createNunjucksTask(browserSyncInstance));

В таком виде код будет и читаемым и поддерживаемым.

[Dymok]

Антон Спирин, вроде бы сделал как вы описали:

//gulpfile.js

const gulp = require("gulp"),
    browserSync = require("browser-sync").create(),
    createScssTask = require('./gulp/tasks/scss'),
    requireDir = require('require-dir');

requireDir('./gulp', {recurse: true});

gulp.task("default", ["serve", "dev:js", "dev:scss", "dev:nunjucks", "dev:font"]);

gulp.task('dev:scss', createScssTask.devScss(browserSync));

//scss.js

const gulp = require("gulp"),
    sourcemaps = require("gulp-sourcemaps"),
    cleanCSS = require("gulp-clean-css"),
    gcmq = require("gulp-group-css-media-queries"),
    autoprefixer = require("gulp-autoprefixer"),
    sass = require("gulp-sass"),
    plumber = require("gulp-plumber"),
    config = require("../config");

const devScss = (browserSync) => {
    return gulp.src(config.srcPath + config.scss + '/main.scss')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(sass().on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.devPath + config.css))
        .pipe(browserSync.stream());
}

const prodScss = () => {
    return gulp.src(config.srcPath + config.scss + '/main.scss')
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ["last 15 versions"],
            cascade: true
        }))
        .pipe(gcmq())
        .pipe(cleanCSS({compatibility: "ie8"}))
        .pipe(gulp.dest(config.prodPath + config.css));
}

module.exports = {
    devScss,
    prodScss,
}

Но теперь gulp ругается на ошибку в последней строке gulpfile:

Error: Task dev:scss can't support dependencies that is not an array of strings

[Антон Спирин]

Dymok, вы должны возвращать функцию:

const devScss = (browserSync) => () => {
    return gulp.src(config.srcPath + config.scss + '/main.scss')
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(sass().on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.devPath + config.css))
        .pipe(browserSync.stream());
}

[Dymok]

Антон Спирин, огромное спасибо c:

[Dymok]

Антон Спирин, блин, можно еще вопрос, пожалуйста? Пытаюсь продолжить делать gulpfile по аналогии, но опять ловлю ту же ошибку.

//gulpfile
const gulp = require("gulp"),
    browserSync = require("browser-sync").create(),
    ScssTask = require('./gulp/tasks/scss'),
...
gulp.task('production-build:scss', ScssTask.prodScss()); //Таск для продакшен-сборки, browserSync передавать уже не нужно

//scss.js
const gulp = require("gulp"),
...

const prodScss = () => { // Ничего не передаётся
    return gulp.src(config.srcPath + config.scss + '/main.scss')
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ["last 15 versions"],
            cascade: true
        }))
        .pipe(gcmq())
        .pipe(cleanCSS({compatibility: "ie8"}))
        .pipe(gulp.dest(config.prodPath + config.css));
};

module.exports = {
    prodScss,
    devScss
}

И та же ошибка:

Task production-build:scss can't support dependencies that is not an array of strings

Не могу понять, что я делаю не так :(

[Антон Спирин]

Dymok, ну так смотрите, вы когда вызываете ScssTask.prodScss() возвращаете результат вызова цепочки gulp.src().pipe().pipe()..., а надо возвращать функцию, которая возвращает этот вызов:

const prodScss = () => () => { 
    return gulp.src(config.srcPath + config.scss + '/main.scss')
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ["last 15 versions"],
            cascade: true
        }))
        .pipe(gcmq())
        .pipe(cleanCSS({compatibility: "ie8"}))
        .pipe(gulp.dest(config.prodPath + config.css));
};

[Dymok]

Антон Спирин, спасибо ещё раз