В Gulp (4): Почему вам не нужен обработчик события onChange для вызова потока, а только для перезагрузки? - PullRequest
Новая
       23

В Gulp (4): Почему вам не нужен обработчик события onChange для вызова потока, а только для перезагрузки?

0 голосов
/ 05 мая 2019

Мой gulpfile 4 работает нормально.Но мне просто немного любопытно, почему мне не нужно on ('change' ....) при вызове метода, вызывающего browserSync.stream ()

Ниже приведен мой gulp4-файл Gulp4, и он прекрасно работает

Но мне любопытно, почему в приведенном ниже методе наблюдения мои sass-часы не требуют обработчика onchange.

Если я удалю обработчик изменений из списка моих скриптов и html-файлов и попытаюсь вызвать reload напрямую, то эти два больше не будут работать.

Тем не менее, нахальные часы не требуют ничего.Хм.Почему.

Вот код 

const gulp = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const browserSync = require("browser-sync").create();

const paths = {
  styles: {
    src: "src/scss/*.scss",
    dest: "src/css"
  },

  scripts: {
    src: "src/js/*.js"
  },

  watched: {
    src: "src/*.html"
  }
};

function style() {
  return gulp
    .src(paths.styles.src)
    //Sourcemaps first so we get mapping once the compilation is done
    .pipe(sourcemaps.init())
    .pipe(sass())
    .on("error", sass.logError)
    //Sass one now run auto prefix
    .pipe(postcss([autoprefixer]))
    //Write the sourcemap
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream());
}

//Parallell to this, we need a watch task for the Scss
function watch() {
  browserSync.init({
    server: {
      baseDir: "./src"
    }
  });

  //Watch JavaScript files; just calling reload directly at the moment as we're not babeling
  gulp.watch(paths.scripts.src).on('change', reload);
  //Watch Sass files
  gulp.watch(paths.styles.src, style)
  //Lets make the html our trigger for reload as set in paths object above
  gulp.watch(paths.watched.src).on('change', reload);
}

function reload() {
  browserSync.reload();
}

//Expose to npm
exports.watch = watch;
exports.style = style;

// Default task invoked by typing 'gulp' in npm
gulp.task('default', gulp.parallel(style, watch))

Заранее спасибо, я должен вам стакан Мадейры.Томас

1 Ответ

0 голосов
/ 05 мая 2019

Вы можете позвонить reload напрямую, но gulp нужен способ узнать, когда задача завершена. Добавление обратного вызова должно помочь: 

function reload(cb) {
  browserSync.reload();
  cb();
}
...