it-swarm.com.ru

Как Gulp-Watch нескольких файлов?

У меня есть что-то вроде этого:

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

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

});

но это не работает, потому что он следит за двумя каталогами, sass и каталог раскладок на предмет изменений.

Как мне заставить это работать, чтобы gulp наблюдал за всем, что происходит внутри этих каталогов?

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

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

});

sass/**/*.scss и layouts/**/*.css будут следить за каждым изменением файлов .scss и .css в каждом каталоге и подкаталоге. Если вы хотите изменить это значение на any file, сделайте последний бит *.*

114
Kelly J Andrews

Вы можете написать такие часы.

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, в своей задаче. 

62
A. J. Alger

Одна проблема, которая возникла у нескольких людей (включая меня), заключается в том, что добавление gulp.filter вне задачи приводит к сбою gulp.watch после первого прохода. Так что если у вас есть что-то вроде этого:

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

Затем вам нужно изменить его на:

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

Фильтр должен быть включен в функцию задачи. Надеюсь, что это помогает кому-то.

10
Lyra

Это работает для меня (глоток 4):

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

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

exports.watch = gulp.parallel(watchSass, watchImages)
4
Chintsu

@ A.J Ответ Алджера помог мне при использовании 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()
})
1
user6123723

Если вы преобразуете свои задачи в функции

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

Затем можно использовать 2 полезных метода:

GULP.SERIES будет запускать задачи синхронно

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

GULP.PARALLEL будет запускать их асинхронно

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