В Gulp имеется встроенная функция
gulp.watch
для отслеживания изменений в любом из файлов проекта.
Это очень удобно в работе, так как отпадает необходимость вручную запускать определенную задачу каждый раз, когда нужно зафиксировать эти изменения. В предыдущих статьях мы так и делали - запускали вручную на выполнение задачи по умолчанию или же определенную именованную задачу.
Сейчас давайте рассмотрим возможность запуска автоматического мониторинга в Gulp с помощью встроенной функции gulp.watch
. Допустим, у нас имеются две именованные задачи, одна из которых выполняет минификацию js-файлов gulp-uglify
, а вторая - конкатенацию css-файлов gulp-concat
:
// Uglify Task
gulp.task('uglify', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});
// Concat Task
gulp.task('concat', function() {
gulp.src('css/*.css')
.pipe(concat('one.css'))
.pipe(gulp.dest('build/css'))
});
Нам нужно сделать так, чтобы Gulp запускал их каждый раз самостоятельно, когда мы внесем изменения в любой из js-файлов или css-файлов, а затем сохраним эти изменения.
Для этого создадим еще одну именованную задачу watch
, цель которой - отслеживание изменений в указанных файлах. Создаем все как обычно (или - почти как обычно):
// Watch Task
gulp.task('watch', function(){
gulp.watch('js/*.js', ['uglify']);
});
Создаем задачу по имени watch
, а внутри тела функции поместим встроенную функцию gulp.watch
. В качестве аргументов этой функции мы передаем ей два параметра.
Первый параметр - что и где Gulp должен отслеживать; js/*.js
говорит о том, что необходимо отслеживать изменения всех файлов с расширением .js
, помещенных в директории js
.
Второй параметр - что должен делать Gulp, если
обнаружит изменения в указанном месте. В данном случае мы говорим ему,
что необходимо запустить задачу по имени uglify
.
Как видим, имя задачи передается функции gulp.watch
в виде массива; отсюда можно сделать вывод, что задач может быть не одна, а несколько - в виде последовательности.
Перейдем от слов к делу и запустим в консоли выполнение мониторинга с помощью функции gulp.watch
. Команда для мониторинга в Gulp выглядит таким образом:
$ gulp watch
[10:55:26] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[10:55:26] Starting 'watch'...
[10:55:26] Finished 'watch' after 7.06 ms
Видим, что задача по имени watch
запустилась и вроде как закончилась (Finished 'watch' after 7.06 ms
). Но на самом деле Gulp находиться в фоновом режиме и отслеживает изменения js-файлов.
Чтобы проверить это, отредактируем и сохраним js-файл (в моем случае это jquery.js
):
$ gulp watch
[10:55:26] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[10:55:26] Starting 'watch'...
[10:55:26] Finished 'watch' after 7.06 ms
[10:59:17] Starting 'uglify'...
[10:59:17] Finished 'uglify' after 8.96 ms
Вау! Видим, что в консоли появились две строчки - это отработала задача uglify
. То есть, Gulp “увидел”, что я внес изменение в файле jquery.js
и мгновенно запустил задачу uglify
, чтобы зафиксировать это изменение. Мониторинг с помощью функции gulp.watch
работает!
Давайте немного усложним задачу и добавим мониторинг gulp.watch
в директории css
. При любом изменении файлов в этой папке должна запускаться задача concat
:
// Watch Task
gulp.task('watch', function() {
gulp.watch('js/*.js', ['uglify']);
gulp.watch('css/*.css', ['concat']);
});
Снова запустим Gulp для мониторинга изменений в проекте.
Кстати, а вы знаете, как останавливать Gulp, запущенный в фоновом режиме? Если нет, то это просто - в консоли Linux это выполняется сочетанием клавиш Ctrl+C.
$ gulp watch
[11:08:55] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[11:08:55] Starting 'watch'...
[11:08:55] Finished 'watch' after 8.24 ms
Внесем и сохраним изменения в файле normalize.css
, размещенном в директории css
. Вернемся в консоль:
$ gulp watch
[11:08:55] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[11:08:55] Starting 'watch'...
[11:08:55] Finished 'watch' after 8.24 ms
[11:11:04] Starting 'concat'...
[11:11:04] Finished 'concat' after 9.12 ms
О! Видим, что gulp.watch
“подхватил” изменение в файле normalize.css
и запустил соответствующую этому изменению задачу concat
. Отлично - все работает!
Мониторинг gulp.watch
можно добавить в задачу по умолчанию (default
). Давайте создадим такую конструкцию:
// Default Task
gulp.task('default', ['concat', 'uglify', 'watch']);
Теперь, если запустить задачу default
в консоли, то увидим следующее:
$ gulp
[11:20:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[11:20:44] Starting 'concat'...
[11:20:44] Finished 'concat' after 7.18 ms
[11:20:44] Starting 'uglify'...
[11:20:44] Finished 'uglify' after 2.65 ms
[11:20:44] Starting 'watch'...
[11:20:44] Finished 'watch' after 7.96 ms
[11:20:44] Starting 'default'...
[11:20:44] Finished 'default' after 7.23 μs
Задачи запустились и выполнились именно в той последовательности, в
какой они прописаны в массиве. Сперва выполнились две задачи на
конкатенацию concat
и минификацию uglify
, а затем запустилась задача на мониторинг watch
.
Gulp “повис” в фоновом режиме и отслеживает изменения с помощью функции gulp.watch
в указанных директориях. Проверим это и внесем легкое изменение в любом из файлов (пусть это будут снова normalize.css
и jquery.js
):
$ gulp
[11:20:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[11:20:44] Starting 'concat'...
[11:20:44] Finished 'concat' after 7.18 ms
[11:20:44] Starting 'uglify'...
[11:20:44] Finished 'uglify' after 2.65 ms
[11:20:44] Starting 'watch'...
[11:20:44] Finished 'watch' after 7.96 ms
[11:20:44] Starting 'default'...
[11:20:44] Finished 'default' after 7.23 μs
[11:26:31] Starting 'concat'...
[11:26:31] Finished 'concat' after 2.37 ms
[11:26:46] Starting 'uglify'...
[11:26:46] Finished 'uglify' after 1.49 ms
Функция gulp.watch
прилежно отследила оба эти изменения и запустила соотвествующие им задачи:
...
[11:26:31] Starting 'concat'...
[11:26:31] Finished 'concat' after 2.37 ms
[11:26:46] Starting 'uglify'...
[11:26:46] Finished 'uglify' after 1.49 ms
Отлично! Мы изучили вопрос создания задачи мониторинга в Gulp с помощью функции gulp.watch
!
Комментарии