Gulp 如何大口观看多个文件?

3zwjbxry  于 2022-12-08  发布在  Gulp
关注(0)|答案(7)|浏览(172)

我有这样的话:

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

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

});

但是它不起作用,因为它监视两个目录,sass和layouts目录的更改。
我如何让它工作,让gulp看到这些目录中发生的任何事情?

pxiryf3j

pxiryf3j1#

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

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

});

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

s3fp2yjn

s3fp2yjn2#

你可以这样写一个表。

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

如果您只想监视各种文件更改,那么只需在任务中使用glob(如*.css)来监视文件。

wdebmtf2

wdebmtf23#

许多人(包括我)都遇到过一个问题,即在任务之外添加gulp.filter会导致gulp.watch在第一次传递后失败。

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

则需要将其更改为:

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

过滤器必须包含在任务函数中。希望这对某些人有帮助。

91zkwejq

91zkwejq4#

这对我很有效(咕噜4声):

function watchSass() {
  return gulp.watch(sassGlob, { ignoreInitial: false }, buildCss)
}

function watchImages() {
  return gulp.watch(imagesGlob, copyImages)
}

exports.watch = gulp.parallel(watchSass, watchImages)
falq053o

falq053o5#

@A.J Alger的回答在我使用Gulp v3.x时很管用。
但从第四次吞咽开始,下面的内容似乎对我很有效。
请注意,每个任务都必须返回一个值或调用“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()
})
ewm0tg9j

ewm0tg9j6#

到了第四口,这是另一种选择:

const { watch, series, parallel } = require('gulp');

function watchTask(cb) {
  // this will execute all task on any changes
  watch(['src/**/*'],
    series(parallel(jsTask, htmlTask, assetTask),
  ));
  // this will run specific task based on file type or folder
  watch(['src/**/*.js'], series(jsTask));
  watch(['src/**/*.html'], series(htmlTask));
  watch(['assets/**/*'], series(assetTask));
}

exports.default = series(parallel(jsTask, htmlTask, assetTask), watchTask);
8dtrkrch

8dtrkrch7#

如果将任务转换为函数

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

然后有2个有用的方法,你可以用途:
GULP.SERIES将同步运行任务

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

PARALLEL将异步运行它们

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

相关问题