gulp
Всеобъемлющее руководство по работе с фронтальным рабочим процессом с Gulpjs 2 of 2

замечания

Настройка синхронизации браузера и настройка наблюдателей для стиля и скрипта

НОТА

Эта страница иллюстрирует использование плагинов 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');
});