如何Gulp-Watch多个文件?

时间:2014-12-25 07:23:49

标签: css gulp gulp-watch

我有这样的事情:

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() {
        gulp.run('css');
    });

});

但它不起作用,因为它会监视两个目录,sass和layouts目录以进行更改。

如何让它工作,让gulp监视那些目录中发生的任何事情?

7 个答案:

答案 0 :(得分:119)

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);

});

sass/**/*.scsslayouts/**/*.css会查看每个目录和子目录,以查看更改的.scss.css文件的所有更改。如果要将其更改为任何文件,请将最后一位*.*

答案 1 :(得分:62)

你可以写一个这样的手表。

gulp.task('watch', function() {
    gulp.watch('path/to/file', ['gulp task name for css/scss']);
    gulp.watch('path/to/file', ['gulp task name for js']);
});

通过这种方式,您可以根据要查看的内容的文件路径设置任意数量的任务,然后设置您创建的任务的名称。然后你可以像这样编写你的默认值:

gulp.task('default', ['gulp task name for css/scss', 'gulp task name for js']);

如果您只是想要查看各种文件更改,那么只需在任务中使用类似*.css的glob来查看文件。

答案 2 :(得分:10)

多人(包括我)出现的一个问题是,在任务之外添加gulp.filter会导致gulp.watch在第一次传递后失败。所以,如果你有这样的事情:

var filter = gulpFilter(['fileToExclude.js'])
gulp.task('newTask', function(){ ...

然后您需要将其更改为:

gulp.task('newTask', function(){
  var filter = gulpFilter(['fileToExclude.js'])

过滤器必须包含在任务功能中。希望有所帮助。

答案 3 :(得分:5)

这对我有用(准则4):

display: none

答案 4 :(得分:1)

@ A.J Alger在使用Gulp v3.x时的答案对我有用。

但从Gulp 4开始,以下似乎对我有用。

请注意,每个任务都必须返回一个值或调用" done()"。这个例子的主要任务是' watchSrc'它并行调用其他任务。

gulp.task('watchHtml', function(){
    return watch('src/**/*.html', function () {
        gulp.src('src/**/*')
            .pipe(gulp.dest(BUILD_DIR))
    })

})
gulp.task('watchJS', function(){
    return watch('src/**/*.js', 'devJS')
})

gulp.task('watchCSS', function(){
    return watch(['src/**/*.css', 'src/**/*.scss'], 'buildStyles')
})


gulp.task('watchSrc', gulp.parallel('watchHtml', 'watchJS', 'watchCSS'), function(done)
{
    done()
})

答案 5 :(得分:0)

如果您将任务转换为函数

 function task1(){
   return gulp...
   ...
 }

您可以使用2种有用的方法:

GULP.SERIES将同步运行任务

gulp.task('default', gulp.series(task1,task2));

GULP.PARALLEL将异步运行它们

gulp.task('default', gulp.parallel(task1,task2));

答案 6 :(得分:0)

从 gulp 4 开始,有两种可能:

create function jsonb_disaster(jsonb,int) returns jsonb language SQL as $$ 
    select value from jsonb_each($1) with ordinality where ordinality=1+$2
$$;


select jsonb_disaster('{"oz": "2835", "cup": "229", "jar": "170"}',0);
 jsonb_disaster 
----------------
 "2835"