如何使用 gulp-watch？答案

【问题标题】：How to use gulp-watch?如何使用 gulp-watch？
【发布时间】：2015-05-19 16:03:11
【问题描述】：

gulp-watch 插件的正确使用方法是什么？

...
var watch = require('gulp-watch');

function styles() {
  return gulp.src('app/styles/*.less')
    .pipe(watch('app/styles/*.less'))
    .pipe(concat('main.css'))
    .pipe(less())
    .pipe(gulp.dest('build'));
}

gulp.task('styles', styles);

运行gulp styles 时没有看到任何结果。

【问题讨论】：

标签： gulp gulp-watch

【解决方案1】：

在您的 shell（例如 Apple 或 Linux 的终端或 iTerm）中，导航到 gulpfile.js 所在的文件夹。 例如，如果您将它与 WordPress 主题一起使用，则您的 gulpfile.js 应该位于主题的根目录中。因此使用cd /path/to/your/wordpress/theme 导航到那里。
然后输入gulp watch 并回车。

如果您的gulpfile.js 配置正确（参见下面的示例），您将看到如下输出：

[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms

每次保存文件时，您都会立即在此处看到新的输出。

这是一个函数式gulpfile.js 的示例：

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    watchLess = require('gulp-watch-less'),
    pug = require('gulp-pug'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-csso'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('watch', function () {
    gulp.watch('source/less/*.less', ['css']);
});

gulp.task('html', function(){
    return gulp.src('source/html/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
return gulp.src('source/less/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

gulp.task('js', function(){
    return gulp.src('source/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'))
});

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

注意： 在您看到 source/whatever/ 的任何地方，您都需要创建或更新以反映您用于相应文件的路径.

【讨论】：

【解决方案2】：

gulp.task('less', function() {
  gulp.src('app/styles/*.less')
    .pipe(less())
    .pipe(gulp.dest('build'));
});


gulp.task('watch', function() {
  gulp.watch(['app/styles/*.less'], ['less'])
});

【讨论】：

这不是你使用 gulp-watch 插件的方式

【解决方案3】：

为您的任务命名，就像我为我的“脚本”任务命名一样，以便您可以将其添加到系列中。您可以将一系列任务添加到系列中，它们将按列出的顺序启动。 对于那些来自以前版本的人，请注意 gulp.src 上的返回。

这是工作代码，希望对潜伏者有所帮助。

那么(for version 4+)你需要做这样的事情：

    
    var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
    var uglify = require('gulp-uglify'); // and here as well 
    
    gulp.task('scripts', function(done) {
      return gulp.src('./src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
    });
    
    gulp.task('watch', function() {
        gulp.watch('./src/js/*.js',gulp.series(['scripts']))
    });

** 注意 gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))

【讨论】：