Gulp 如何使用 gulp-watch ?

inn6fuwd  于 2022-12-16  发布在  Gulp
关注(0)|答案(3)|浏览(246)

什么是正确的方式来使用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时没有看到任何结果。

doinxwow

doinxwow1#

1.在你的shell(如苹果或Linux的终端或iTerm)中导航到你的gulpfile.js所在的文件夹。* 例如,如果你使用WordPress主题,你的gulpfile.js应该在你的主题的根目录中。
1.然后键入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/的地方,您都需要创建或更新此路径,以反映您为相应文件使用的路径。

hwamh0ep

hwamh0ep2#

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

ecfdbz9o3#

命名你的任务,就像我有我的'脚本'任务命名,这样你就可以添加它到系列。你可以添加一个任务数组到系列,他们将开始在他们列出的顺序。* 对于那些来自以前的版本,请注意返回的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.系列([“脚本”],[“任务2”],[“等”])

相关问题