Глоток не смотрит

Question

Я работаю над старым проектом, который использует Gulp. Мне пришлось обновить gulp v3 до v4, и вот так это выглядит:

var gulp = require('gulp')
var sass = require('gulp-sass')
var sourcemaps = require('gulp-sourcemaps')
var browserSync = require('browser-sync').create()
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')
var notify = require('gulp-notify')
var series = require('stream-series') // Helps to concat js files in desired order

// BrowserSync task
gulp.task('browserSync', function () {
  browserSync.init({
    server: {
      baseDir: './'
    }
  })
})

// Style task
gulp.task('sass', function () {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true,
      outputStyle: 'compressed'
    }))
    .pipe(concat('style.min.css'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Styles task complete' }))
})

// Script task
gulp.task('script', function () {
  return series(
    gulp.src('./src/js/vendor/**/*.js'),
    gulp.src('./src/js/modules/**/*.js')
  )
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./js'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Script task complete' }))
})

// watch task
gulp.task('watch', gulp.series('sass', 'script', 'browserSync'), function () {
  gulp.watch('./src/sass/**/*.scss', ['sass'])
  gulp.watch('./src/js/**/*.js', ['script'])
  gulp.watch('./index.html', browserSync.reload)
})

Если я запускаю gulp watch , он компилирует все файлы sass и JS и показывает страницу в браузер правильно. Но после этого он больше не смотрит, и если я изменяю файлы sass или JS, эти изменения не применяются.

Что не так с моим скриптом gulp?

Answer 1

Мне удалось это исправить самостоятельно.

const gulp = require('gulp')    
const sass = require('gulp-sass')
const sourcemaps = require('gulp-sourcemaps')
const browserSync = require('browser-sync').create()
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const notify = require('gulp-notify')
const series = require('stream-series') // Helps to concat js files in desired order

// HTML task
function html () {
  return gulp.src('./*.html')
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'HTML task complete' }))
}

// Style task
function style () {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true,
      outputStyle: 'compressed'
    }))
    .pipe(concat('style.min.css'))
    // .pipe(cssmin())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build/css'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Styles task complete' }))
}

// Script task
function script () {
  // return gulp.src('./src/js/**/*.js')
  return series( // concats js files in desired order
    gulp.src('./src/js/vendor/**/*.js'),
    gulp.src('./src/js/modules/**/*.js')
  )
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/js'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Script task complete' }))
}

function watch () {
  html()
  style()
  script()
  browserSync.init({
    server: {
      baseDir: './build'
    }
  })
  gulp.watch('./*.html', html).on('change', browserSync.reload)
  gulp.watch('./src/sass/**/*.scss', style).on('change', browserSync.reload)
  gulp.watch('./src/js/**/*.js', script).on('change', browserSync.reload)
}

exports.html = html
exports.style = style
exports.script = script
exports.watch = watch

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