Метод Watch используется для мониторинга ваших исходных файлов. Когда будут внесены какие-либо изменения в исходный файл, часы запустят соответствующую задачу. Вы можете использовать задачу «по умолчанию», чтобы отслеживать изменения в файлах HTML, CSS и JavaScript.
Обновить задание по умолчанию
В предыдущей главе вы узнали, как использовать комбинированные задачи, используя задачу по умолчанию. Мы использовали gulp-minify-css, gulp-autoprefixer и gulp-concatplugins и создали задачу стилей для минимизации CSS-файлов.
Чтобы просмотреть файл CSS, нам нужно обновить задачу «по умолчанию», как показано в следующем коде:
gulp.task('default', ['styles'], function() { // watch for CSS changes gulp.watch('src/styles/*.css', function() { // run styles upon changes gulp.run('styles'); }); });
Будут просмотрены все CSS-файлы в папке work / src / styles / , и после внесения изменений в эти файлы будет выполнена задача стилей.
Выполнить задание по умолчанию
Запустите задачу по умолчанию, используя следующую команду.
gulp
После выполнения вышеуказанной команды вы получите следующий вывод.
C:\work>gulp [17:11:28] Using gulpfile C:\work\gulpfile.js [17:11:28] Starting 'styles'... [17:11:28] Finished 'styles' after 22 ms [17:11:28] Starting 'default'... [17:11:28] Finished 'default' after 21 ms
Всякий раз, когда в CSS-файлы вносятся какие-либо изменения, вы получите следующий вывод.
C:\work>gulp [17:11:28] Using gulpfile C:\work\gulpfile.js [17:11:28] Starting 'styles'... [17:11:28] Finished 'styles' after 22 ms [17:11:28] Starting 'default'... [17:11:28] Finished 'default' after 21 ms gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead. [17:18:46] Starting 'styles'... [17:18:46] Finished 'styles' after 5.1 ms
Процесс Watch останется активным и будет реагировать на ваши изменения. Вы можете нажать Ctrl + C, чтобы завершить процесс мониторинга и вернуться в командную строку.