gulp
Gulpjsを使用したフロントエンドへの包括的なガイド2 of 2

備考

ブラウザ同期の設定とスタイルとスクリプトのためのウォッチャーの設定

注意

このページでは、browser-sync、 gulp-watch、run-sequenceの ようなgulpプラグインの使用方法を説明 し、Gulpj-workflow-automation-1の2で中断したところからgulp-workflow-automation を引き続き議論 します。最初にその投稿を検討してください。

• デフォルトタスク
• ウォッチドッグタスク - 何かイメージがあればいつでも、即座に展開可能な資産を継続的に構築するJS |開発の過程でCSSが変化します。

ブラウザ同期から始めましょう。

ガルフウォッチドッグタスク

ウォッチドッグタスクから始めましょう。

目標は、開発中に行った変更を監視することです。変更すると、対応するgulpタスクがトリガーされます。

また、ブラウザ上で変更を同期させる機能が必要です。

ブラウザの同期

したがって、ブラウザ同期をインストールする必要があります。

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

その前提で、gulpfile.jsを開いて時計機能を追加しましょう。ブラウザの同期を要求し、その機能を使用するためにいくつかの変数を定義しましょう。

gulpfileの一番上に下記のスニペットを追加します。それを画像圧縮宣言のすぐ下に置きます。

そのようです：

//Browser-sync

var sync = require('browser-sync').create();
var reload = sync.reload;

ブラウザの同期をブラウザに同期させることは、シンプルな構成です。ウォッチドッグと呼ばれるタスクを作成しましょう。

そのようです：

$.task('watchdog', function() {


})

私たちは、ブラウザの同期オプションを閲覧した場合さて、 ここでは 、サーバの設定を検索し、我々はそれがどのように簡単に見ることができます。

ウォッチドッグタスクの中に以下を置くだけです

スニペット - 1 - 内部ウォッチドッグの定型文

/*
 Initiate Browser sync
 @documentation - https://www.browsersync.io/docs/options/
 */
 sync.init({
  server: {
    baseDir: "./"
 },
 port: 8000 //change it as required
 });

上のウォッチドッグボイラープレートの内側を挿入します。

次のスニペットは、スタイルのウォッチャーを定義し、変更されたCSSファイルや新しい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 ]"監視してい" [fonts/google/**/*.css , /**/*.css ]"つまり、

fonts / google /の下のcss /すべてのcssファイルの下のすべてのcssファイル何かが変更されるか、新しいファイルが追加されると、gulpfileの最上部に定義されているreloadメソッドがbrowsersync宣言でトリガーされます。

注：ウォッチャーに.onイベントハンドラが添付されていることに気付くかもしれません。

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

基本的に、CUD（Create | Update | Delete）はリロード関数をトリガし、イベントオブジェクトをパラメータとしてコールバック関数に渡します。

コールバックは重要な機能です。資産の削除に関するuncacheのような操作を実現できます。現在、イベントオブジェクトには次のようなパラメータがあります。

• パス
• タイプ - 作成/更新/削除

アセットが削除された場合、以前の縮小機能で作成したキャッシュにgulp-cachedとgulp-rememberを介して更新が必要であることを確認する必要があります。

私たちは以下のスニペットでそれを処理しています。これは変更時のコールバックの中にあります。

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

注意

gulpのための$ - >エイリアス

gulp-load-pluginsの$$ - >エイリアス

私はsequence('optimizeStyles');を持っていることに気付くかもしれませんsequence('optimizeStyles');私はuncache呼び出しを書いた後

シーケンスメソッドは、同期メソッドがデフォルトで非同期で実行されることを保証します。

インストールは簡単です

行う

bash $ npm install run-sequence

次に、ブラウザ同期宣言のすぐ下のgulpfileに宣言します。

var sequence = require('run-sequence');

そのため、スクリプトのウォッチャーは簡単に書くことができます。ちょうど異なるグロブ！

ウォッチドッグボイラープレート内のスタイルウォッチャーの下にこのスニペットを追加します。

スニペット - 3 - ウォッチドッグタスクの定型文内

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

注意

上記のスニペットでは2つの関数を使用しました。

• uncache
• $$。remember.forget注意：

$ - > gulpのエイリアス

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