設定瀏覽器同步和配置樣式和指令碼的觀察者

Created: November-22, 2018

注意

這個頁面說明了瀏覽器同步， gulp-watch 和 run-sequence 之類的 gulp 外掛的使用，並繼續討論****我們在 Gulpjs-workflow-automation-1 中停留的 gulp-workflow-automation。如果你降落在這裡，考慮先審閱該帖子。

預設任務
監視程式任務 - 無論何時映像，都可以動態地持續構建部署就緒資產 JS | css 在發展過程中發生了變化。

讓我們從瀏覽器同步開始。

Gulp 看門狗任務

讓我們從看門狗任務開始吧。

目標是觀察你在開發過程中所做的更改。任何改變，都應該觸發相應的 gulp 任務。

此外，我們需要一種在瀏覽器上同步你的更改的功能。

瀏覽器同步

因此，我們需要安裝 Browser Sync。

bash $ npm install browser-sync --save-dev

有了這個前提，讓我們開啟我們的 gulpfile.js 並新增監視功能。讓我們要求瀏覽器同步並定義一些變數以使用其功能。

在 gulp 檔案的頂部，新增以下程式碼段。將它放在影象壓縮宣告的正下方。

像這樣：

//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')
});

將上面插入上面的看門狗樣板內部。

所以我們正在監控，即，

字型/ google 下 css / all css 檔案下的所有 css 檔案當有任何更改或新增新檔案時，它會在 browsersync 宣告中觸發重新載入方法，該方法在 gulp 檔案的頂部定義。

注意：你可能會注意到，我們將一個 .on 事件處理程式附加到觀察程式。

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event)

基本上，任何 CUD（Create | Update | Delete）都會觸發過載函式，並將事件 Object 作為引數傳遞給回撥函式。

回撥是一個至關重要的功能，我們可以在資產刪除時實現像 uncache 這樣的操作。現在，事件物件具有類似的引數

路徑
type - 建立/更新/刪除

如果資產被刪除，我們需要確保我們在早期的縮小函式中構建的快取（通過 gulp-cached 和 gulp-remember）需要更新。

我們正在處理下面的程式碼片段，這是在變更回撥中。

if (event.type === 'deleted') { 
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);  
}

注意

$ - > gulp 的別名

$$ - > gulp-load-plugins 的別名

你可能還會注意到，在我編寫了 uncache 呼叫之後，我有了一個 sequence('optimizeStyles');

序列方法，確保，同步方法預設執行在非同步 javascript 中。

安裝很簡單

做

bash $ npm install run-sequence

然後，在瀏覽器同步宣告下方的 gulp 檔案中宣告它。

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');
});

注意

我們在上面的程式碼段中使用了兩個函式。

非快取

$$。remember.forget 注意：

$ - > alul for gulp

$$ - > gulp-load-plugins 的別名

讓我們在呼叫之前在 gulpfile.js 中的某處定義函式 uncache。

/*
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)
}