如何使用gulp watch？

Question

什么是正确的方式来使用大口手表插件？

...
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

1. 在您的外壳(如苹果或Linux的终端或iTerm)中导航到您的gulpfile.js所在的文件夹。例如，如果您将其与WordPress主题一起使用，则gulpfile.js应该位于主题的根目录中。因此，使用cd /path/to/your/wordpress/theme.
2. Then类型gulp watch导航到该位置，然后按enter。

如果您的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/这是一个您需要创建或更新的路径，以反映您用于相应文件的路径。

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'])
});