gulp
Всеобъемлющее руководство по работе с фронтальным рабочим процессом с Gulpjs 2 of 2
Поиск…
замечания
Здорово. Таким образом, мы все сделали с нашей автоматизацией документооборота.
Теперь у нас есть файл gulp, который
- Отвечает и минимизирует изображения
- очищает, автофиксирует, объединяет и минимизирует Css
- Объединение и минимизация JS
- Часы для изменений в активах - это HTML | CSS | JS и запускает связанные задачи
- Создает каталог сборки и хранит в нем весь готовый код готового развертывания. И все это, в фоновом режиме, пока вы просто разрабатываете свое приложение.
Рекомендации
Настройка синхронизации браузера и настройка наблюдателей для стиля и скрипта
НОТА
Эта страница иллюстрирует использование плагинов gulp, таких как синхронизация браузера, gulp-watch и последовательность выполнения, и продолжает обсуждать автоматизацию автоматизации gulp-workflow, откуда мы остановились в Gulpjs-workflow-automation-1 of 2. Если вы приземлились здесь, подумайте о том, чтобы пройти этот пост первым.
- Задача по умолчанию
- Задача Watchdog - постоянно создавать готовые активы развертывания «на лету», всякий раз, когда изображение | JS | css меняется в процессе разработки.
Начнем с синхронизации браузера.
Задача сторожевого устройства Gulp
Начнем с задачи сторожевого таймера.
Цель состоит в том, чтобы следить за изменениями, которые вы делаете во время разработки. Любое изменение должно вызвать соответствующую задачу глотки.
Кроме того, нам нужна функциональность, которая синхронизирует ваши изменения в браузере.
Синхронизация браузера
Итак, нам нужно установить Browser Sync.
bash $ npm install browser-sync --save-dev
С этой предпосылкой откройте наш gulpfile.js и добавим функцию часов. Давайте используем синхронизацию браузера и определим некоторые переменные, чтобы использовать ее функциональность.
В верхней части gulpfile добавьте нижеприведенный фрагмент. Поместите его чуть ниже деклараций сжатия изображения.
вот так:
//Browser-sync
var sync = require('browser-sync').create();
var reload = sync.reload;
Синхронизация синхронизации браузера с браузером - простая настройка. Давайте создадим задачу под названием watchdog.
вот так:
$.task('watchdog', function() {
})
Теперь, если мы просматриваем здесь параметры синхронизации браузера и ищем настройки сервера, мы можем видеть, насколько это просто.
Нам просто нужно разместить ниже внутри нашей задачи сторожевого таймера
Snippet - 1 - внутренняя контрольная панель
/*
Initiate Browser sync
@documentation - https://www.browsersync.io/docs/options/
*/
sync.init({
server: {
baseDir: "./"
},
port: 8000 //change it as required
});
Вставьте вышеприведенную внутреннюю часть вашего контрольного щита выше.
Следующий фрагмент - это определение наблюдателя для стилей с целью перепрограммировать измененные файлы css или новые и запускать перезагрузку браузера автоматически.
фрагмент - 2 - внутри контрольной панели
$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);
}
sequence('optimizeStyles')
});
Вставьте вышеприведенную внутреннюю часть вашего контрольного щита выше.
Поэтому мы отслеживаем " [fonts/google/**/*.css , /**/*.css ]"
то есть,
все файлы css под css / all css-файлы под шрифтами / google / Когда что-либо изменяется или добавляется новый файл, он запускает метод reload, который определен в верхней части нашего gulpfile, в объявлении browsersync.
Примечание. Вы можете заметить, что у нас есть обработчик событий .on, прикрепленный к наблюдателю.
$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event)
В принципе, все CUD (Create | Update | Delete) запускает функцию перезагрузки и передает объект события в качестве параметра функции обратного вызова.
Обратный вызов является жизненно важной функцией, в которой мы можем достичь таких операций, как uncache при удалении активов. Теперь объект события имеет такие параметры, как
- дорожка
- type - Создать / Обновить / Удалить
Если объект удален, мы должны убедиться, что кеши, которые мы построили в наших предыдущих функциях минимизации, с помощью gulp-cache и gulp-remember, нуждаются в обновлении.
мы обрабатываем это в фрагменте ниже, который находится внутри обратного вызова при изменении.
if (event.type === 'deleted') {
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);
}
Заметка
$ -> псевдоним для глотки
$$ -> псевдоним для gulp-load-plugins
вы также можете заметить, что у меня есть sequence('optimizeStyles');
после того, как я написал вызов uncache
Метод последовательности, обеспечивает, синхронный метод работает в асинхронном по умолчанию javascript.
установка просто
ДЕЛАТЬ
bash $ npm install run-sequence
затем объявите его в своем gulpfile чуть ниже объявления синхронизации браузера.
var sequence = require('run-sequence');
Таким образом, с этим пониманием наблюдатель за сценариями легко писать. просто разные шары!
Итак, добавьте этот фрагмент ниже наблюдателя стиля внутри шаблона сторожевого таймера.
Snippet - 3 - внутри контрольной панели Watchdog
/*
on addition or change or deletion of a file in the watched directories
the change event is triggered. An event object with properties like
path,
event-type
is available for perusal passed to the callback
*/
$.watch('js/**/*', reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('scripts', event.path);
$$.remember.forget('linted-scripts', event.path);
}
sequence('optimizeScripts');
});
Заметка
Мы использовали две функции в наших отрывках выше.
- uncache
- $$. remember.forget Примечание:
$ -> Псевдоним для глотки
$$ -> Псевдоним для gulp-load-plugins
Определим функцию uncache где-нибудь в нашем gulpfile.js, прежде чем она будет вызвана.
/*
Deletes a cache entry
*/
var uncache = function(cacheName, cacheKey) {
var cache = $$.cached;
if (cache.caches[cacheName] && cache.caches[cacheName][cacheKey])
return delete cache.caches[cacheName][cacheKey];
return false;
}
/*
logs current cache created via gulp-cached
*/
var viewCache = function() {
console.log($$.cached.caches)
}
Определение задачи по умолчанию
Итак, давайте закончить код gulpfile, определив задачу по умолчанию.
задача по умолчанию - это та, которая выполняется, когда вы просто говорите
gulp
в командной строке под корнем вашего проекта.
$.task('default', ['generateResponsiveImages'], function() {
$.start('watchdog');
console.log('Starting Incremental Build');
});