Gulp 为什么是';狼吞虎咽的手表';不更新?

Gulp 为什么是';狼吞虎咽的手表';不更新?,gulp,gulp-watch,gulp-sass,gulp-sourcemaps,Gulp,Gulp Watch,Gulp Sass,Gulp Sourcemaps,这里可能有一些小的风格问题,但大多数情况下,这是可行的。然而,它似乎没有注意到对style/*.scss文件或该文件夹中的新scss的更改。Javascript也是一样:scripts/*.js并没有在监视中更新 也可以在不破坏sourcemap的情况下组合SCS和CSS,但这并不重要。现在,只要让实时更新工作就好了 const gulp = require('gulp') const plumber = require('gulp-plumber') const rename = requir

这里可能有一些小的风格问题,但大多数情况下,这是可行的。然而,它似乎没有注意到对
style/*.scss
文件或该文件夹中的新scss的更改。Javascript也是一样:
scripts/*.js
并没有在监视中更新

也可以在不破坏sourcemap的情况下组合SCS和CSS,但这并不重要。现在,只要让实时更新工作就好了

const gulp = require('gulp')
const plumber = require('gulp-plumber')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const concat = require('gulp-concat')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
const clean = require('gulp-clean')
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const minifycss = require('gulp-minify-css');

const gulpfn = require('gulp-fn')
const fs = require('fs');

const util = require('gulp-util');
let config = { production: !!util.env.production }

gulp.task('clean', function () {
    return gulp.src('build', {read: false})
        .pipe(clean())
        .pipe(gulpfn(function (file) { 
            if (!fs.existsSync('build')){
                fs.mkdirSync('build');
            } 
        }));    
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./build"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('styles', function(){
  gulp.src(['source/styles/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('build/styles/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(config.production ? minifyCSS() : util.noop())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/styles/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('scripts', function(){
  return gulp.src('source/scripts/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(concat('main.js'))
    .pipe(babel({presets: ['es2015', 'es2016']}))
    .pipe(gulp.dest('build/scripts/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(config.production ? uglify() : util.noop())
    .pipe(gulp.dest('build/scripts/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('external-scss', function(){
  gulp.src(['external/font-awesome-4.7.0/scss/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('build/external/font-awesome-4.7.0/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(config.production ? minifyCSS() : util.noop())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/external/font-awesome-4.7.0/css/'))
    .pipe(browserSync.reload({stream:true}))
});

const STATIC_STYLES = ['source/styles/**/*.css']
const STATIC_HYPERTEXT = ['source/**/*!template.html', 'source/**/*.html']
const STATIC_TEMPLATES = ['source/templates/*.template.html']

gulp.task('static-sources', function(){
  gulp.src(STATIC_STYLES)
      .pipe(gulp.dest('build/styles/'))
  return gulp.src(STATIC_HYPERTEXT)
      .pipe(gulp.dest('build/'))
});

gulp.task('default', ['browser-sync', 'styles', 'scripts', 'external-scss', 'static-sources'], function(){
  gulp.src(['external/font-awesome-4.7.0/fonts/fontawesome-webfont.*']).pipe(gulp.dest('build/external/font-awesome-4.7.0/fonts'));
  gulp.src( 'external/font-awesome-4.7.0/scss/*.scss', ['external-scss']);

  gulp.src(['external/fccfavicons-master/*']).pipe(gulp.dest('build/external/fccfavicons-master'));

  gulp.src(['node_modules/jquery/dist/*']).pipe(gulp.dest('build/external/jquery/dist'));

  gulp.src(['node_modules/lodash/**/*']).pipe(gulp.dest('build/external/lodash'));

  gulp.src(['node_modules/normalize.css/*.css']).pipe(gulp.dest('build/external/normalize.css'));

  gulp.watch('source/styles/**/*.scss', ['styles']);
  gulp.watch('source/scripts/**/*.js', ['scripts']);

  let static_sources = []
  static_sources.push(...STATIC_HYPERTEXT)
  static_sources.push(...STATIC_STYLES)
  gulp.watch(static_sources, ['static-sources']);

  gulp.watch('*.html', ['bs-reload']);
});

除了脚本,您还需要在其他任务中添加返回语句,以向gulp表示它们都已完成。

我在“脚本”任务中看到返回语句,但在其他任务中没有。我认为这不重要吗?当我在脚本中更改脚本时,watch不会捕捉到更改。噢,谢谢。那是。。是的,就是这样。我加上它作为答案,因为它解决了你的问题。