Gulp-概要

Gulpとは？

GulpはNode.jsをプラットフォームとして使用するタスクランナーです。 Gulpは純粋にJavaScriptコードを使用し、フロントエンドタスクと大規模なWebアプリケーションの実行を支援します。 CSSやHTMLの縮小、ライブラリファイルの連結、SASSファイルのコンパイルなどのシステム自動化タスクを構築します。これらのタスクは、コマンドラインでシェルまたはBashスクリプトを使用して実行できます。

Gulpを使用する理由

他のタスクランナーと比較して、短く、シンプルで、高速です。
SASSおよびLESSをCSSプリプロセッサーとして使用します。
ソースファイルの編集後にページを自動的に更新します。
Gulpfile.jsを簡単に理解してビルドできるのは、純粋なJavaScriptコードを使用してタスクをビルドするためです。

歴史

GulpのすべてのドキュメントはCC0ライセンスで保護されています。当初、Gulp v1.0.0は2015年1月15日にリリースされ、Gulpの現在のバージョンは v3.9.0 です。

特徴

縮小化と連結を提供します。
純粋なJavaScriptコードを使用します。
LESSまたはSASSをCSSコンパイルに変換します。
Node.jsプラットフォームを使用して、メモリ内のファイル操作を管理し、速度を向上させます。

利点

他のタスクランナーよりも速度が非常に優れている
コーディングと理解が簡単。
Webアプリケーションを簡単にテストできます。
プラグインは使いやすく、一度に1つのことを行うように設計されています。
スタイルシートの縮小、画像の圧縮など、繰り返しのタスクを繰り返し実行します。

デメリット

依存関係の数が多く、Gruntと比較して新参者です。
Gulpプラグインを使用すると、複数のタスクを実行できません。
構成はGruntほどクリーンではありません。

Gulp-インストール

この記事では、Gulpのインストール手順を段階的に説明します。

Gulpのシステム要件

オペレーティングシステム-クロスプラットフォーム
ブラウザのサポート-IE（Internet Explorer 8 +）、Firefox、Google Chrome、Safari、Opera

Gulpのインストール

ステップ1 *-Gulpの例を実行するにはNode.jsが必要です。 Node.jsをダウンロードするには、https://nodejs.org/en/を開きます。次のような画面が表示されます-

Gulpインストール

zipファイルの最新機能バージョンをダウンロードします。

ステップ2 *-次に、セットアップを実行して、_NodeJs_をコンピューターにインストールします。

ステップ3 *-環境変数を設定する必要があります。

パスユーザー変数

[マイコンピュータ]を右クリックします。
プロパティを選択します。
[詳細設定]タブを選択し、[環境変数]をクリックします。

Gulp Installation

[環境変数]ウィンドウで、次の画面に示すようにPATHをダブルクリックします。

Gulpインストール

次のスクリーンショットに示すように、ユーザー変数の編集ウィンドウが表示されます。 Node.jsフォルダーパスを変数値フィールドにC：\ Program Files \ nodejs \ node_modules \ npmとして追加します。パスが既に他のファイルに設定されている場合は、その後にセミコロン（;）を追加し、次のスクリーンショットに示すようにNode.jsパスを追加する必要があります。

Gulp Installation

最後に、[OK]ボタンをクリックします。

システム変数

[システム変数]で、次の画面に示すように[パス]をダブルクリックします。

Gulp Installation

次のスクリーンショットに示すように、システム変数の編集ウィンドウが表示されます。次のスクリーンショットに示すように、[変数値]フィールドにNode.jsフォルダーパスを_C：\ Program Files \ nodejs \ _として追加し、[OK]をクリックします。

Gulp Installation

ステップ4 *-システムでコマンドプロンプトを開き、次のコマンドを入力します。インストールされたNode.jsバージョンが表示されます。

node -v

Gulp Installation

ステップ5 *-コマンドプロンプトで、次のコマンドを入力して、モジュールのインストールに使用されるnpm（Node.jsパッケージマネージャー）のバージョンを表示します。インストールされたNode.jsバージョンが表示されます。

npm -v

Gulp Installation

ステップ6 *-コマンドプロンプトで、次のコマンドを入力してGulpをインストールします。「-g」フラグを追加すると、Gulpがすべてのプロジェクトでグローバルに利用可能になります。

npm install gulp -g

Gulp Installation

ステップ7 *-Gulpが正常にインストールされたことを確認するには、次のコマンドを入力してGulpバージョンを表示します。

gulp -v

Gulp Installation

Gulp-基本

この章では、Gulpに関連するいくつかの基本を理解します。

ビルドシステムとは

ビルドシステムは、タスクの集合（集合的に*タスクランナー*と呼ばれる）と呼ばれ、反復作業を自動化します。

以下は、ビルドシステムを使用して処理できるタスクの一部のリストです-

前処理CSSおよびJavaScriptのコンパイル。
サイズを縮小するためのファイルの縮小。
ファイルを1つに連結します。
自動リロードのためのサーバーのトリガー。
展開ビルドを作成して、結果のファイルを1つの場所に保存します。

現代のフロントエンドワークフローでは、ビルドシステムは3つのコンポーネントで動作します-

パッケージマネージャー
プリプロセッサ
タスクランナーとビルドツール

パッケージマネージャー

これは、インストールのアップグレード、必要な依存関係の削除、クリーンライブラリ、および開発環境で使用されるパッケージの自動化に使用されます。パッケージマネージャの例は、 bower および npm です。

プリプロセッサ

プリプロセッサは、最適化された構文とネイティブ言語にコンパイルされる追加機能を追加することにより、効率的な現代のワークフローに非常に役立ちます。

人気のあるプリプロセッサのいくつかは-

CSS -SASS、LESS、およびスタイラス。
JS -CoffeeScript、LiveScript、TypeScriptなど
HTML -マークダウン、HAML、スリム、ジェイドなど

タスクランナー

タスクランナーは、SASSからCSSへの変換などのタスクを自動化し、ファイルを縮小し、画像を最適化し、開発ワークフローで使用される他の多くのタスクを実行します。 Gulpは、最新のフロントエンド作業環境のタスクランナーの1つであり、Node上で実行されます。

プロジェクトのセットアップ

コンピューターにプロジェクトを設定するには、たとえば「work」というフォルダーを作成します。作業フォルダには、次のサブフォルダとファイルが含まれています-

Src -前処理されたHTMLソースファイルおよびフォルダーの場所。
画像-圧縮されていない画像が含まれています。
スクリプト-複数の前処理済みスクリプトファイルが含まれています。
スタイル-複数の前処理済みCSSファイルが含まれています。
Build -このフォルダは、プロダクションファイルを含む自動的に作成されます。
画像-圧縮画像が含まれています。
スクリプト-縮小コードを含む単一のスクリプトファイル。
スタイル-縮小コードを含む単一のCSSファイル。
gulpfile.js -タスクを定義するために使用される構成ファイルです。

Gulp-アプリケーションの開発

前の章では、link：/gulp/gulp_installation [Gulpのインストール]とlink：/gulp/gulp_basics [Gulpの基本]について学習しました。これには、Gulpのビルドシステム、パッケージマネージャー、タスクランナー、Gulpの構造などが含まれます。

この章では、以下を含むアプリケーション開発の基本を説明します-

必要な依存関係の宣言
依存関係のタスクを作成する
タスクを実行する
タスクを見る

依存関係の宣言

アプリケーションのプラグインをインストールするとき、プラグインの依存関係を指定する必要があります。依存関係は、bowerやnpmなどのパッケージマネージャーによって処理されます。

*gulp-imagemin* という1つのプラグインを使用して、構成ファイルでプラグインの依存関係を定義しましょう。 このプラグインは、画像ファイルを圧縮するために使用することができ、次のコマンドラインを使用してインストールすることができます-

npm install gulp-imagemin --save-dev

次のコードに示すように、構成ファイルに依存関係を追加できます。

var imagemin = require('gulp-imagemin');

上記の行にはプラグインが含まれており、 imagemin という名前のオブジェクトとして含まれています。

依存関係のタスクの作成

タスクは、Gulpを構成するためのモジュール式アプローチを可能にします。依存関係ごとにタスクを作成する必要があり、他のプラグインを見つけてインストールするときに追加します。 Gulpタスクは次の構造を持ちます-

gulp.task('task-name', function() {
  //do stuff here
});

「task-name」は文字列名で、「function（）」はタスクを実行します。「gulp.task」は、関数を名前内のタスクとして登録し、他のタスクへの依存関係を指定します。

次のコードに示すように、上記で定義した依存関係のタスクを作成できます。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

画像は、img_srcobjectに保存されている _src/images/ / _ にあります。 imageminコンストラクターによって作成された他の関数にパイプされます。ターゲットディレクトリを表す引数を指定して *dest メソッドを呼び出すことにより、srcフォルダーからイメージを圧縮し、ビルドフォルダーにコピーします。

タスクを実行する

Gulpファイルがセットアップされ、実行する準備ができました。プロジェクトディレクトリで次のコマンドを使用してタスクを実行します-

gulp imagemin

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます-

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Gulp-タスクの結合

タスクは、Gulpを構成するためのモジュール式アプローチを可能にします。依存関係ごとにタスクを作成する必要があり、他のプラグインを見つけてインストールするときに追加します。 Gulpタスクには次の構造があります-

gulp.task('task-name', function() {
  //do stuff here
});

ここで、「task-name」は文字列名で、「function（）」はタスクを実行します。「gulp.task」は、関数を名前内のタスクとして登録し、他のタスクへの依存関係を指定します。

プラグインのインストール

*minify-css* という1つのプラグインを使用して、すべてのCSSスクリプトをマージおよび縮小します。 次のコマンドに示すように、npmを使用してインストールすることができます-

npm install gulp-minify-css --save-dev

「gulp-minify-cssプラグイン」を使用するには、次のコマンドに示すように「gulp-autoprefixer」という別のプラグインをインストールする必要があります-

npm install gulp-autoprefixer --save-dev

CSSファイルを連結するには、次のコマンドに示すようにgulp-concatをインストールします-

npm install gulp-concat --save-dev

プラグインのインストール後、次のように構成ファイルに依存関係を記述する必要があります-

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Gulpファイルへのタスクの追加

プラグインをインストールするときに追加する、依存関係ごとにタスクを作成する必要があります。 Gulpタスクには次の構造があります-

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

「concat」プラグインはCSSファイルを連結し、「autoprefix」プラグインはすべてのブラウザーの現在および以前のバージョンを示します。 srcフォルダーからすべてのCSSスクリプトを縮小し、ターゲットディレクトリを表す引数を指定して「dest」メソッドを呼び出して、ビルドフォルダーにコピーします。

タスクを実行するには、プロジェクトディレクトリで次のコマンドを使用します-

gulp styles

同様に、我々は「gulp-imagemin」と呼ばれる別のプラグインを使用して、次のコマンドを使用してインストールできる画像ファイルを圧縮します-

npm install gulp-imagemin --save-dev

次のコマンドを使用して、構成ファイルに依存関係を追加できます-

var imagemin = require('gulp-imagemin');

次のコードに示すように、上記で定義した依存関係のタスクを作成できます。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

画像は「src/images/* / 」にあり、img_srcobjectに保存されます。「imagemin」コンストラクターによって作成された他の関数にパイプされます。 srcフォルダーから画像を圧縮し、ターゲットディレクトリを表す引数を指定して「dest」メソッドを呼び出すことにより、ビルドフォルダーにコピーします。

タスクを実行するには、プロジェクトディレクトリで次のコマンドを使用します-

gulp imagemin

複数のタスクを組み合わせる

次のコードに示すように、構成ファイルにデフォルトのタスクを作成することにより、一度に複数のタスクを実行できます-

gulp.task('default', ['imagemin', 'styles'], function() {

});

Gulpファイルがセットアップされ、実行する準備ができました。プロジェクトディレクトリで次のコマンドを実行して、上記の結合タスクを実行します-

gulp

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます-

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

Gulp-Watch

Watchメソッドは、ソースファイルを監視するために使用されます。ソースファイルに変更が加えられると、ウォッチは適切なタスクを実行します。「デフォルト」タスクを使用して、HTML、CSS、およびJavaScriptファイルの変更を監視できます。

デフォルトタスクの更新

前の章では、デフォルトタスクを使用してリンクする方法を学びました：/gulp/gulp_combining_tasks [gulp結合タスク] 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');
   });
});

*work/src/styles/* フォルダーの下にあるすべてのCSSファイルが監視され、これらのファイルに変更が加えられると、スタイルタスクが実行されます。

デフォルトタスクの実行

次のコマンドを使用して「デフォルト」タスクを実行します。

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

監視プロセスはアクティブなままで、変更に対応します。 * Ctrl + C *を押して監視プロセスを終了し、コマンドラインに戻ることができます。

Gulp-ライブリロード

Live Reloadは、ファイルシステムの変更を指定します。 BrowserSync は、CSSディレクトリ内のすべてのHTMLおよびCSSファイルを監視し、ファイルが変更されるたびに、すべてのブラウザーでページにライブリロードを実行するために使用されます。 BrowserSyncは、複数のデバイス間でURL、相互作用、およびコード変更を同期することにより、ワークフローを高速化します。

BrowserSyncプラグインのインストール

BrowserSyncプラグインは、クロスブラウザーCSSインジェクションを提供し、次のコマンドを使用してインストールできます。

npm install browser-sync --save-dev

BrowserSyncプラグインの構成

BrowserSyncプラグインを使用するには、次のコマンドに示すように、構成ファイルに依存関係を記述する必要があります。

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

Gulpを使用してサーバーで動作するには、_BrowserSync_のタスクを作成する必要があります。サーバーを実行しているため、サーバーのルートについてBrowserSyncにtelする必要があります。ここでは、ベースディレクトリを「ビルド」として使用しています。

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

次のCSSファイルのタスクを使用して、ブラウザに新しいスタイルを挿入することもできます。

gulp.task('styles', function() {

   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

BrowserSyncのタスクを作成する前に、パッケージマネージャーを使用してプラグインをインストールし、このリンク：/gulp/gulp_combining_tasks [chapter]で定義されているように構成ファイルに依存関係を書き込む必要があります。

設定が完了したら、BrowserSyncとwatchTaskの両方を実行して、ライブリロード効果を発生させます。 2つのコマンドラインを個別に実行する代わりに、次のコードに示すように、watchTaskとともに_browserSynctask_を追加して一緒に実行します。

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

プロジェクトディレクトリで次のコマンドを実行して、上記の結合タスクを実行します。

gulp

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

URL http：//localhost：3000/ でブラウザウィンドウが開きます。 CSSファイルに加えられた変更はコマンドプロンプトに反映され、変更されたスタイルでブラウザが自動的にリロードされます。

Gulp-CSSとJavaScriptの最適化

この章では、CSSとJavaScriptを最適化する方法を学びます。不要なデータを削除するには最適化が必要です（例：ソースファイルからのスペースと未使用文字）。ファイルのサイズを縮小し、ファイルをより速くロードできるようにします

プラグインをインストールしてCSSとJavaScriptを最適化する

コマンドラインから「work」ディレクトリに移動し、次のコマンドを使用して「gulp-uglify」、「gulp-minify-css」、「gulp-concat」プラグインをインストールします-

npm install gulp-uglify gulp-minify-css gulp-concat

依存関係の宣言とタスクの作成

設定ファイル gulpfile.js で、次のコードに示すように、最初に依存関係を宣言します。

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

次に、次のコードに示すように、CSSとJavaScriptを最適化するタスクを作成する必要があります。

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

*js* タスクは、 *src/scripts/* フォルダーから *.js* ファイルを受け入れます。 *js* ファイルを連結およびu化してから、 *build/scripts/script.js* ファイルを生成します。

*CSS* タスクは、 *src/styles/* フォルダーから *.css* ファイルを受け入れます。 *CSS* ファイルを連結および縮小し、 *build/styles/styles.css* ファイルを生成します。

タスクを実行する

構成ファイルがセットアップされ、実行する準備ができました。次のコマンドを使用して、タスクを実行します。

gulp

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

Gulp-画像の最適化

この章では、画像を最適化する方法を学びます。最適化すると、画像のサイズが小さくなり、読み込みが速くなります。

プラグインをインストールしてイメージを最適化する

コマンドラインから「work」ディレクトリに移動し、次のコマンドを使用して「gulp-changed」および「gulp-imagemin」プラグインをインストールします。

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

依存関係の宣言とタスクの作成

設定ファイル gulpfile.js で、最初に次のコマンドに示すように依存関係を宣言します。

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

次に、次のコードに示すように、画像を最適化するタスクを作成する必要があります。

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';

   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

*imagemin* タスクは、_src/images/_フォルダーからpng、jpg、およびgifイメージを受け入れ、宛先に書き込む前にそれらを縮小します。 * changed（）*は、最小化するたびに新しいファイルのみが渡されるようにします。 _gulp-changed_プラグインは新しいファイルのみを処理するため、貴重な時間を利用します。

タスクを実行する

構成ファイルがセットアップされ、実行する準備ができました。次のコマンドを使用して、タスクを実行します。

gulp

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます。

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp-便利なプラグイン

Gulpは、次の表で説明するように、HTMLとCSS、JavaScript、グラフィックスなどを操作するための便利なプラグインを提供します。

HTMLおよびCSSプラグイン

Sr.No.	Plugin & Description
1	autoprefixer CSSプロパティのプレフィックスが自動的に含まれます。
2	gulp-browser-sync CSSディレクトリ内のすべてのHTMLおよびCSSファイルを監視するために使用され、ファイルが変更されるたびに、すべてのブラウザーでページへのライブリロードを実行します。
3	gulp-useref 最適化されていないスクリプトまたはスタイルシートへの参照を置き換えるために使用されます。
4	gulp-email-design CSSスタイルをインラインに変換するHTMLメールテンプレートを作成します。
5	gulp-uncss CSSファイルを最適化し、未使用および重複したスタイルを見つけます。
6	gulp-csso これはCSSオプティマイザーであり、CSSファイルを最小化してファイルサイズを小さくします。
7	gulp-htmlmin HTMLファイルを最小化します。
8	gulp-csscomb CSSのスタイルフォーマッタを作成するために使用されます。
9	gulp-csslint CSSリンターを指定します。
10	gulp-htmlhint HTMLバリデーターを指定します。

JavaScriptプラグイン

Sr.No.	Plugin & Description
1	gulp-autopolyfiller JavaScriptに必要なポリフィルを含むautoprefixerと同じです。
2	gulp-jsfmt 特定のコードスニペットの検索に使用されます。
3	gulp-jscs JavaScriptコードのスタイルを確認するために使用されます。
4	gulp-modernizr ユーザーのブラウザが提供するHTML、CSS、およびJavaScript機能を指定します。
5	gulp-express gulp express.js Webサーバーを起動します。
6	gulp-requirejs require.jsを使用して、require.js AMDモジュールを1つのファイルに結合します。
7	gulp-plato 複雑さ分析レポートを生成します。
8	gulp-complexity コードの複雑さと保守性を分析します。
9	fixmyjs JSHintの結果を修正します。
10	gulp-jscpd ソースコードのコピー/貼り付け検出器として使用されます。
11	gulp-jsonlint JSONバリデーターです。
12	gulp-uglify JavaScriptファイルを縮小します。
13	gulp-concat CSSファイルを連結します。

単体テストプラグイン

Sr.No.	Plugin & Description
1	gulp-nodeunit Gulpからノードユニットテストを実行します。
2	gulp-jasmine 出力に関連する問題を報告するために使用されます。
3	gulp-qunit QUnitテストの基本的なコンソール出力を提供し、PhantomJSノードモジュールとPhantomJSランナーQUnitプラグインを使用します。
4	gulp-mocha Mochaの薄いラッパーを指定し、Mochaテストを実行します。
5	gulp-karma Gulpでは廃止されました。

グラフィックプラグイン

Sr.No.	Plugin & Description
1	gulpicon SVGからスプライトを生成し、PNGに変換します。
2	gulp-iconfont SVGからWOFF、EOT、TTFファイルを作成するためにWebフォントで使用されます。
3	gulp-imacss 画像ファイルをデータURIに変換し、単一のCSSファイルに配置します。
4	gulp-responsive さまざまなデバイスのレスポンシブ画像を生成します
5	gulp-sharp 画像の向きと背景の変更とサイズ変更に使用されます。
6	gulp-svgstore SVGファイルを<symbol>要素を持つ1つに結合します。
7	gulp-imagemin & gulp-tinypng PNG、JPEG、GIF、SVGなどの画像の圧縮に使用されます。
8	gulp-spritesmith 画像とCSS変数のセットからスプライトシートを作成するために使用されます。

コンパイラプラグイン

Sr.No.	Plugin & Description
1	gulp-less Gulp用のLESSプラグインを提供します。
2	gulp-sass Gulp用のSASSプラグインを提供します。
3	gulp-compass Gulp用のコンパスプラグインを提供します。
4	gulp-stylus CSSでスタイラスを保持するために使用されます。
5	gulp-coffee Gulp用のcoffeescriptプラグインを提供します。
6	gulp-handlebars Gulpのハンドルバープラグインを提供します。
7	gulp-jst JSTでアンダースコアテンプレートを提供します。
8	gulp-react Facebook React JSXテンプレートをJavaScriptに指定します。
9	gulp-nunjucks JSTでNunjucksテンプレートを指定します。
10	gulp-dustjs JSTでダストテンプレートを指定します。
11	gulp-angular-templatecache templateCacheでAngularJSテンプレートを指定します。

その他のプラグイン

シニア

プラグインと説明

1

*gulp-grunt*

GulpからGruntタスクを実行します

2

*gulp-watch*

変更が行われるたびにファイルを監視します。

3

*gulp-notify*

タスクが失敗するたびにエラーメッセージを通知します。

4

*gulp-git*

Gitコマンドを使用できます。

5

*gulp-jsdoc*

Gulp用のJavaScriptドキュメントを作成します。

6

*gulp-rev*

ファイル名に静的な資産改訂を提供します。

7

*gulp-bump*

JSONパッケージのバージョンを増やします。

8

*gulp-bower-files*

バウアーパッケージの注入に使用されます。

9

*gulp-removelogs*

console.logステートメントを削除します。

10

*gulp-preprocess*

コンテキストまたは環境の構成に基づいて、HTML、JavaScript、およびその他のファイルを前処理します。

11

*gulp-duration*

Gulpタスクの期間を指定します。

12

*gulp-changedおよびgulp-newer*

変更されたファイルと新しいファイルを実行します。

13

*gulp-connect*

LiveReloadでWebサーバーを実行するために使用されます。

14

*gulp-shell*

シェルコマンドを実行します。

15

*gulp-ssh*

SSHおよびSFTPタスクを使用して接続します。

16

*gulp-zip*

ファイルとフォルダーを圧縮します。

17

gulp-cleanおよびgulp-copy

gulp-cleanプラグインはファイルとフォルダーを削除し、gulp-copyプラグインはソースから新しい宛先にファイルをコピーします。

18

*gulp-filesize*

人間が読める形式でファイルサイズを指定します。

19

*gulp-util*

gulpプラグインのユーティリティを提供します。

Gulp-不要なファイルのクリーニング

この章では、生成されたファイルをきれいにする方法を学びます。ファイルを自動的に生成するため、ビルドを実行する前に不要なファイルを削除する必要があります。この手順は*クリーニング*と呼ばれます。 del プラグインは、この目的に使用できます。

delプラグインのインストール

コマンドラインで次のコマンドを入力してプラグインをインストールします。

npm install del --save-dev

依存関係の宣言とタスクの作成

設定ファイル gulpfile.js で、次のコマンドに示すように依存関係を宣言します。

var del = require('del');

次に、次のコードに示すようにタスクを作成します。

gulp.task('clean:build', function() {
   return del.sync('build');
});

上記のタスクはビルド全体をクリーンアップします。クリーンタスクは、イメージキャッチをクリアし、ビルドに存在する古いファイルを削除します。

次のコードに示すように、特定のファイルまたはフォルダーのみをクリーンアップし、それらの一部をそのままにすることができます。

gulp.task('clean:build', function() {
  //return del.sync('build');
   return del([
      'build/temp/',
     //instructs to clean temp folder
      '!build/package.json'
     //negate to instruct not to clean package.json file ]);
});

上記のタスクでは、 temp フォルダーのみがクリーンアップされ、 package.json は変更されません。

Gulp-quick-guide

Gulp-概要

Gulpとは？

Gulpを使用する理由

歴史

特徴

利点

デメリット

Gulp-インストール

Gulpのシステム要件

Gulpのインストール

パスユーザー変数

Gulp-基本

ビルドシステムとは

パッケージマネージャー

プリプロセッサ

タスクランナー

プロジェクトのセットアップ

Gulp-アプリケーションの開発

依存関係の宣言

依存関係のタスクの作成

タスクを実行する

Gulp-タスクの結合

プラグインのインストール

Gulpファイルへのタスクの追加

複数のタスクを組み合わせる

Gulp-Watch

デフォルトタスクの更新

デフォルトタスクの実行

Gulp-ライブリロード

BrowserSyncプラグインのインストール

BrowserSyncプラグインの構成

Gulp-CSSとJavaScriptの最適化

プラグインをインストールしてCSSとJavaScriptを最適化する

依存関係の宣言とタスクの作成

タスクを実行する

Gulp-画像の最適化

プラグインをインストールしてイメージを最適化する

依存関係の宣言とタスクの作成

タスクを実行する

Gulp-便利なプラグイン

HTMLおよびCSSプラグイン

JavaScriptプラグイン

単体テストプラグイン

グラフィックプラグイン

コンパイラプラグイン

その他のプラグイン

Gulp-不要なファイルのクリーニング

delプラグインのインストール

依存関係の宣言とタスクの作成