В Gulp имеется встроенная функция
для отслеживания изменений в любом из файлов проекта.
1 gulp.watch
Это очень удобно в работе, так как отпадает необходимость вручную запускать определенную задачу каждый раз, когда нужно зафиксировать эти изменения. В предыдущих статьях мы так и делали - запускали вручную на выполнение задачи по умолчанию или же определенную именованную задачу.
Сейчас давайте рассмотрим возможность запуска автоматического мониторинга в Gulp с помощью встроенной функции
. Допустим, у нас имеются две именованные задачи, одна из которых выполняет минификацию js-файлов 1
gulp.watch
, а вторая - конкатенацию css-файлов 1
gulp-uglify
:1
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-файлов, а затем сохраним эти изменения.
Для этого создадим еще одну именованную задачу
, цель которой - отслеживание изменений в указанных файлах. Создаем все как обычно (или - почти как обычно):1
watch
// Watch Task
gulp.task('watch', function(){
gulp.watch('js/*.js', ['uglify']);
});
Создаем задачу по имени
, а внутри тела функции поместим встроенную функцию 1
watch
. В качестве аргументов этой функции мы передаем ей два параметра.1
gulp.watch
Первый параметр - что и где Gulp должен отслеживать;
говорит о том, что необходимо отслеживать изменения всех файлов с расширением 1
js/*.js
, помещенных в директории 1
.js
.1
js
Второй параметр - что должен делать Gulp, если обнаружит изменения в указанном месте. В данном случае мы говорим ему, что необходимо запустить задачу по имени
.1
uglify
Как видим, имя задачи передается функции
в виде массива; отсюда можно сделать вывод, что задач может быть не одна, а несколько - в виде последовательности.1
gulp.watch
Перейдем от слов к делу и запустим в консоли выполнение мониторинга с помощью функции
. Команда для мониторинга в Gulp выглядит таким образом:1
gulp.watch
$ 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
Видим, что задача по имени
запустилась и вроде как закончилась (1
watch
). Но на самом деле Gulp находиться в фоновом режиме и отслеживает изменения js-файлов.1
Finished 'watch' after 7.06 ms
Чтобы проверить это, отредактируем и сохраним js-файл (в моем случае это
):1
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
Вау! Видим, что в консоли появились две строчки - это отработала задача
. То есть, Gulp “увидел”, что я внес изменение в файле 1
uglify
и мгновенно запустил задачу 1
jquery.js
, чтобы зафиксировать это изменение. Мониторинг с помощью функции 1
uglify
работает!1
gulp.watch
Давайте немного усложним задачу и добавим мониторинг
в директории 1
gulp.watch
. При любом изменении файлов в этой папке должна запускаться задача 1
css
:1
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
Внесем и сохраним изменения в файле
, размещенном в директории 1
normalize.css
. Вернемся в консоль:1
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
О! Видим, что
“подхватил” изменение в файле 1
gulp.watch
и запустил соответствующую этому изменению задачу 1
normalize.css
. Отлично - все работает!1
concat
Мониторинг
можно добавить в задачу по умолчанию (1
gulp.watch
). Давайте создадим такую конструкцию:1
default
// Default Task
gulp.task('default', ['concat', 'uglify', 'watch']);
Теперь, если запустить задачу
в консоли, то увидим следующее:1
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
Задачи запустились и выполнились именно в той последовательности, в какой они прописаны в массиве. Сперва выполнились две задачи на конкатенацию
и минификацию 1
concat
, а затем запустилась задача на мониторинг 1
uglify
.1
watch
Gulp “повис” в фоновом режиме и отслеживает изменения с помощью функции
в указанных директориях. Проверим это и внесем легкое изменение в любом из файлов (пусть это будут снова 1
gulp.watch
и 1
normalize.css
):1
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
Функция
прилежно отследила оба эти изменения и запустила соотвествующие им задачи:1
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 с помощью функции
!1
gulp.watch