【问题标题】:How can I keep watching my tasks on gulp 4?如何在 gulp 4 上继续观看我的任务?
【发布时间】:2019-11-21 12:05:43
【问题描述】:

我注意到我无法在我的网站上运行 gulp watch,因为我有节点版本 (12) 和 gulp 4。 所以我刚刚升级到 gulp 4 并按照 npm 审计说明重新安装了所有 npm 包。我的 gulpfile.js 看起来像这样:

var gulp = require('gulp');
var livereload = require('gulp-livereload')
var uglify = require('gulp-uglifyjs');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function () {
    return gulp.src('./src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./src/images'));
});

gulp.task('sass', function () {
gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./src/css'));
});

gulp.task('uglify', function() {
gulp.src('./src/lib/*.js')
    .pipe(uglify('main.js'))
    .pipe(gulp.dest('./src/js'))
});

gulp.task('watch', function(){
    livereload.listen();

    gulp.watch('./src/sass/**/*.scss', gulp.parallel('sass'));
    gulp.watch('./src/lib/*.js', gulp.parallel('uglify'));
    gulp.watch(['./src/css/style.css', 
        './src/**/*.twig', 
        './src/js/*.js'], function (files){
        livereload.changed(files)
    });
});

当我运行 gulp watch 命令时,它显示“正在启动监视”,但是当我在浏览器和文件中查看时,没有任何内容被监视。

如何在 gulp 4 上继续观看我的任务?

【问题讨论】:

  • 什么是“没有被观看”?将监视文件以查看它们是否在启动 watch 任务后发生更改,除非您使用 ignoreInitial 选项,否则除非您使用 ignoreInitial 选项,否则不会触发任务,这样被监视的文件将在首次运行时触发它们的任务。

标签: gulp gulp-watch


【解决方案1】:

在你的 'sass' 和 'uglify' 任务中添加 return 语句以通知任务何时完成,如下所示:

gulp.task('uglify', function() {
return gulp.src('./src/lib/*.js')
    .pipe(uglify('main.js'))
    .pipe(gulp.dest('./src/js'))
});

【讨论】:

  • 确实有效。当我运行 gulp watch 时,控制台说手表启动了,但是当我更改 sass 文件中的任何内容时,什么都没有编译
  • 尝试在最后一个 gulp.watch 添加任务而不是像这样 gulp.watch(['./src/css/style.css', './src/**/*.twig ', './src/js/*.js'], gulp.series('liveReload'));然后在新任务 liveReload 中触发更改
猜你喜欢
  • 2016-09-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多