Gulp smoosher 任务在 gulp init 上运行良好，但在运行时不会更新

Question

我正在使用 gulp smoosher 将 CSS 文件中的内容内嵌到我的 index.html 文件的副本中。

这在 gulp 初始化时工作正常，但是当运行我无法通过更新我的 CSS 文件来触发/生成任何更新的任务。

我目前正在尝试以下内容：

var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var smoosher = require('gulp-smoosher');

var cssDir = 'assets/src/css';
var cssTargetDir = 'assets/build/css';
var htmlSrcDir = 'assets/src';

gulp.task('css', function() {
  gulp.src(cssDir + '/**/*.css')
    .pipe(autoprefix({
            browsers: ['last 40 versions'],
            cascade: false
        }))
    .pipe(gulp.dest(cssTargetDir));
});

gulp.task('smoosher', ['css'], function () {
    gulp.src(htmlSrcDir + '/index.html')
        .pipe(smoosher({
            base: 'assets/build/' //target and inject from build CSS
        }))
        .pipe(gulp.dest('')); //root
});

gulp.task('watch', function(){
    gulp.watch(cssDir + '/*.css', ['css']);
    gulp.watch(htmlSrcDir + '/index.html', ['smoosher']);
})

gulp.task('default', [
    'css',
    'smoosher',
    'watch'
]);

Answer 1

您应该更改 smoosher 的监视以监视 css 文件而不是 index.html

记住要注意变化的源头，而不是最终结果

gulp.task('watch', function(){
    gulp.watch(cssDir + '/*.css', ['css']);
    gulp.watch(cssDir + '/*.css', ['smoosher']);
})

Gulp smoosher 任务在 gulp init 上运行良好，但在运行时不会更新

Gulp smoosher task runs fine on gulp init but won't update when running

gulp

gulp-watch

Gulp smoosher 任务在 gulp init 上运行良好，但在 运行 时不会更新

Gulp smoosher task runs fine on gulp init but won't update when running

gulp

gulp-watch

Gulp smoosher 任务在 gulp init 上运行良好，但在运行时不会更新