Question

使用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时，我看不到任何结果。

Answer 1

在您的Shell（例如Apple或Linux的Terminal或iTerm）中，导航到gulpfile.js所在的文件夹。 例如，如果您将其与WordPress主题一起使用，则gulpfile.js应该位于主题的根目录中。因此，请使用 cd / path / to / your / wordpress / theme < / code>。


然后键入 gulp watch ，然后按Enter。



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

  [15:45:50]使用gulpfile /path/to/gulpfile.js
[15:45:50]开始“观看” ...
[15:45:50] 11毫秒后完成“观看”
 

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

 以下是功能性 gulpfile.js 的示例： 

  var gulp = require（'gulp'），
    watch = require（'gulp-watch'），
    watchLess = require（'gulp-watch-less'），
    哈巴狗= require（'gulp-pug'），
    更少= require（'少吃一口'），
    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（）{
    返回gulp.src（'source / html / *。pug'）
    .pipe（pug（））
    .pipe（gulp.dest（'build / html'））
}）;

gulp.task（'css'，function（）{
返回gulp.src（'source / less / *。less'）
    .pipe（less（））
    .pipe（minifyCSS（））
    .pipe（gulp.dest（'build / css'））
}）;

gulp.task（'js'，function（）{
    返回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 / ，这就是您需要创建或更新以反映您正在使用的路径的路径

Answer 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？

2 个答案: