Articles /

初心者のためのGulp

Gulp は、Web 開発に関していくつかの作業を手助けしてくれるツールです。 これは、次のようなフロントエンドのタスクを行うためによく使用されます。

  • Web サーバーを起動する
  • ファイルが保存されるたびにブラウザーを自動的にリロードする
  • Sass や LESS などのプリプロセッサを使用する
  • CSS や JavaScript、画像などの資産を最適化する

重要な注意点! この記事は Gulp 3.x 用に書かれましたが、現在 Gulp 4.x がリリースされ、推奨されています。 他のメジャーなバージョンアップと同様に、APIにもブレークダウンする変更があります。 Gulp 4をインストールして、この記事に書かれていることのいくつかを行おうとすると、それらは動作しないでしょう。 ここでは、そのことを忘れないように、いくつかのメモを散りばめておきます。 これは、かなり良い Gulp 4 スターターのように見えます。

これは、Gulp でできることの包括的なリストではありません。 十分にクレイジーであれば、Gulp で静的サイト ジェネレーターを構築することさえできます (私はそれをやりました!)。 したがって、Gulp は非常に強力ですが、独自のカスタマイズされたビルド プロセスを作成したい場合は、Gulp の使用方法を学ぶ必要があります。

つまり、この記事はそのためのものなのです。 この記事では、Gulp の基本を習得して、他のすべてを自分で探求し始めることができるように支援します。

Gulp での作業に飛び込む前に、他の類似のツールとは対照的に Gulp を使用したい理由について説明します。

なぜ Gulp なのか。

Gulp のようなツールは、Web サイト構築のタスクを実行するツールであるため、しばしば「ビルド ツール」と呼ばれます。 現在、最も人気のあるビルド ツールは、Gulp と Grunt の 2 つです。 (ChrisはGruntを使い始めるための記事をこちらで公開しています)。 しかし、もちろん他のツールもある。 Broccoli は、ビルド ツールの最も一般的なタスクの 1 つである資産のコンパイルに焦点を当てます。

Grunt と Gulp の違いや、どちらかを使用する理由については、すでに複数の記事があります。 より詳しく知りたい場合は、この記事、この記事、またはこの記事を参照してください。 Brunch はアセットにフォーカスしている点で似ており、サーバーやファイル ウォッチャーなど、最も一般的な他のタスクがバンドルされています。 Gulp の構成は、Grunt と比較して、はるかに短くシンプルになる傾向があります。 また、Gulpはより速く実行される傾向があります。

次に、Gulp を使用してワークフローを設定する方法を説明します。

設定するもの

この記事の終わりまでに、この記事の冒頭で説明したタスクを実行するワークフローができあがります。

  • Web サーバーをスピンアップする
  • Sass を CSS にコンパイルする
  • ファイルを保存するたびにブラウザーを自動的にリフレッシュする
  • すべての資産 (CSS, JS, フォントおよび画像) を運用に最適化する

また、異なるタスクをわかりやすく実行できる簡単なコマンドに連結する方法を学習します。

Gulp をコンピューターにインストールすることから始めましょう。

Gulp のインストール

Gulp をインストールする前に、コンピューターに Node.js (Node) をインストールしておく必要があります。

Node がまだインストールされていない場合は、Node の Web サイトからパッケージ インストーラーをダウンロードすることで入手できます。

Nodeのインストールが完了したら、コマンドラインで次のコマンドを使用してGulpをインストールできます。 

$ sudo npm install gulp -g

注意: Mac ユーザーだけが sudo キーワードを必要とします。 (sudoを使用したくない場合は、Pawel Grzybekによる最初のコメントを参照してください）。 また、上記のコードにある「$」は、コマンド プロンプトを象徴しているだけであることを忘れないでください。 419>

ここで使用した npm install コマンドは、Node Package Manager (npm) を使用して Gulp をコンピューターにインストールするためのコマンドです。

このコマンドの -g フラグは、Gulp をコンピューターにグローバルにインストールするように npm に指示します。

Mac ユーザーは、Gulp をグローバルにインストールするために管理者権限が必要なため、コマンドに追加の sudo キーワードが必要です。

Gulpがインストールされたので、Gulpを使用するプロジェクトを作成しましょう。

Gulp プロジェクトの作成

まず、このチュートリアルを進めるにあたり、プロジェクトのルートとしてサーバーにするために project というフォルダーを作成します。 そのディレクトリの中から npm init コマンドを実行します。

# ... from within our project folder$ npm init

npm init コマンドはプロジェクト用の package.json ファイルを作成し、プロジェクトで使用する依存関係 (Gulp は依存関係の一例) など、プロジェクトに関する情報を保存します。

npm init はあなたにプロンプトを表示します。

package.json ファイルが作成されたら、次のコマンドを使用して、プロジェクトに Gulp をインストールできます。 

$ npm install gulp --save-dev

今回はGulpをグローバルにインストールするのではなく、projectにインストールしているため、コマンドに若干の違いがあります。

Gulpをグローバルにインストールしないので、sudoキーワードは不要で、-gも不要であることがわかりますね。 9604> を追加し、package.json に gulp を開発依存として追加するようにコンピューターに指示しました。

コマンドの実行が完了したときにプロジェクト フォルダーを確認すると、Gulp が node_modules フォルダーを作成していることが確認できるはずです。 また、node_modulesの中にgulpフォルダがあることが確認できるはずです。

Gulp を使い始める準備はほぼ整っています。 その前に、プロジェクトで Gulp をどのように使用するかを明確にする必要があり、その一環としてディレクトリ構造を決定します。

フォルダー構造の決定

Gulp は任意のフォルダー構造で動作するように柔軟です。 ただ、プロジェクトのためにそれを微調整する前に、内部構造を理解する必要があります。

この記事では、一般的な Web アプリの構造を使用します。 

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

この構造では、app フォルダーを開発用に使用し、dist (「distribution」の意) フォルダーを本番サイト用に最適化されたファイルを格納するために使用します。

app は開発用に使用されているため、すべてのコードは app に配置されます。

Gulp の設定を行う際には、このフォルダー構造を念頭に置いておく必要があります。 では、まず最初のGulpタスクをgulpfile.jsに作成し、すべてのGulpの設定を保存します。

Writing Your First Gulp Task

Gulpを使うための最初のステップは、requireそれをgulpfileに記述することです。 

var gulp = require('gulp');

requireステートメントは、node_modules フォルダにある gulp という名前のパッケージを探すように Node に指示します。 パッケージが見つかったら、その中身を変数 gulp に代入します。

これで、この gulp 変数を使用して gulp タスクを書き始めることができます。 gulpタスクの基本的な構文は次のとおりです:

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

task-name はタスクの名前を指し、Gulpでタスクを実行したいときはいつでもこれを使用することになるでしょう。 また、gulp task-nameと書くことで、コマンドラインで同じタスクを実行することができます。

試しに、helloタスクにHello Zell!と書いて作ってみましょう。 

gulp.task('hello', function() { console.log('Hello Zell');});

このタスクをコマンドラインにgulp helloと書いて実行すればよい。 

$ gulp hello

コマンドラインにはHello Zell!というログが返されます。

Gulp タスクは通常、これより少し複雑です。 通常、2 つの追加の Gulp メソッドと、さまざまな Gulp プラグインが含まれています。

以下は、実際のタスクがどのようなものであるかです。

ご覧のように、実際のタスクは gulp.src と gulp.dest という 2 つの追加の gulp メソッドを取り込みます。

gulp.src はタスクに使用するファイルを Gulp タスクに伝え、gulp.dest はタスクが完了したらファイルをどこに出力するかを Gulp に伝えます。

Sass ファイルを CSS ファイルにコンパイルする実際のタスクを作成してみましょう。

Gulp による前処理

gulp-sass というプラグインを使用して、Gulp で Sass を CSS にコンパイルすることができます。 gulp-sass は gulp でやったように npm install コマンドでプロジェクトにインストールすることができます。

また、--save-dev フラグを使用して、package.json で gulp-sass が devDependencies に追加されることを確認したいと思います。 

$ npm install gulp-sass --save-dev

プラグインを使用する前に、gulpで行ったように node_modules フォルダから require gulp-sass を追加する必要があります。 

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

aGulpPlugin()をsass()に置き換えることで、gulp-sassを使用することができます。 このタスクはSassをCSSにコンパイルするためのものなので、sassと名付けましょう。 

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

sass タスクが動作するためには、ソースファイルと保存先を提供する必要があるので、app/scss フォルダーに styles.scss ファイルを作成しましょう。 このファイルはgulp.srcでsassタスクに追加されます。

最終的にstyles.cssファイルを`app/css`フォルダに出力したいのですが、これはgulp.destのdestinationにあたります。

私たちは、sass タスクが私たちが望むように動作しているかどうかをテストしたいと思います。 これを行うには、styles.scss 内に Sass 関数を追加します。 

// styles.scss.testing { width: percentage(5/7);}

コマンドラインで gulp sass を実行すると、app/css に styles.css ファイルが作成されたことが確認できるはずです。 さらに、percentage(5/7)が71.42857%に評価されたコードも入っています。 

/* styles.css */.testing { width: 71.42857%; }

これでsassタスクが動作していることがわかりました!

時には、複数の .scss ファイルを同時に CSS にコンパイルする機能が必要なことがあります。 Node グローブの助けを借りて、そうすることができます。

FYI: Gulp-sass は LibSass を使用して、Sass を CSS に変換します。 Ruby ベースの方法よりはるかに速いです。

Globbing in Node

グロブはファイルのマッチングパターンであり、gulp.srcに複数のファイルを追加することを可能にします。 これは正規表現のようなものですが、特にファイルパスに対してです。

グロブを使用すると、コンピュータはファイル名とパスが指定されたパターンに一致するかどうかをチェックします。 パターンが存在する場合、ファイルにマッチします。

Gulp を使用するほとんどのワークフローは、4 つの異なるグロブ パターンしか必要としない傾向があります。

  1. *.scss: * パターンは、現在のディレクトリ内の任意のパターンに一致するワイルドカードです。 この場合、ルート フォルダー (project) 内の .scss で終わるすべてのファイルにマッチします。
  2. **/*.scss: これは * パターンのより過激なバージョンで、ルート フォルダーおよびすべての子ディレクトリ内の .scss で終わるすべてのファイルにマッチします。 この場合、not-me.scss はマッチから除外されます。
  3. *.+(scss|sass): プラス + と括弧 () は、Gulp がパイプ | 文字によって異なるパターンを分離して、複数のパターンにマッチさせることを可能にします。 この場合、Gulp はルート フォルダー内の .scss または .sass で終わる任意のファイルにマッチします。

app/scss 内で見つかった他の Sass ファイルは、この変更で自動的に sass タスクに含まれることになります。 プロジェクトに print.scss ファイルを追加すると、print.css が app/css に生成されることがわかります。

これで、1 つのコマンドですべての Sass ファイルを CSS ファイルにコンパイルすることに成功したわけです。 問題は、Sass を CSS にコンパイルするたびに手動で gulp sass を実行しなければならない場合、どのような利点があるのかということです。

幸運なことに、「監視」と呼ばれる処理を通じて、ファイルが保存されるたびに sass タスクを自動的に実行するように Gulp に指示できます。

Sass ファイルの変更を監視する

Note! Gulp Watch は 3.x から 4.x へ大きく変更されたものの 1 つです。ドキュメントを参照してください。 watch メソッドのシンタックスは次のとおりです: 

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', );

しかし、より頻繁に、一度に複数のタイプのファイルを見たいと思うでしょう。 そのためには、複数のウォッチプロセスを watch タスクにまとめることができる。 

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

今 gulp watch コマンドを実行すると、Gulp はすぐに監視を開始することがわかります。

そして、.scss ファイルを保存するたびに sass タスクが自動的に実行されることです。

Browser Sync の助けを借りて、さらに一歩進んで、.scss ファイルを保存するたびに Gulp がブラウザーを再ロードするようにしましょう。

Browser Sync によるライブ リロード

ブラウザーの同期によって、簡単にライブ リロードを行うためのウェブ サーバーをスピンアップしてウェブ開発を簡単にするのに役立てます。 また、複数のデバイス間でアクションを同期させるなど、他の機能も備えています。

まず、Browser Sync をインストールする必要があります。 

$ npm install browser-sync --save-dev

Browser Sync をインストールする際、gulp- という接頭辞がないことにお気づきかもしれません。 これは、Browser Sync が Gulp と一緒に動作するためで、プラグインを使用する必要はありません。

Browser Sync を使用するには、require Browser Sync.

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

Gulp が Browser Sync を使用してサーバーをスピンアップできるよう、browserSync タスクを作成する必要があります。 サーバーを実行するので、サーバーのルートがどこにあるのかをBrowser Syncに通知する必要があります。 私たちの場合、それは `app` フォルダです。

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

また、sass タスクを少し変更して、sassタスクが実行されるたびに、ブラウザに新しいCSSスタイルを注入（CSSを更新）できるようにしなければなりません。

Browser Sync の設定は完了しました。 さて、ライブリロードを行うためには、watchタスクとbrowserSyncタスクの両方を同時に実行する必要があります。

コマンド ライン ウィンドウを 2 つ開いて gulp browserSync と gulp watch を別々に実行するのは面倒なので、watch タスクに browserSync が完了してから watch の実行を許可するように指示して、Gulp にこれらを一緒に実行させるようにしましょう。

これを行うには、watchタスクに2番目の引数を追加します。 構文は次の通り。 

gulp.task('watch', , function (){ // ...})

そして、この場合、browserSync タスクを追加しています。 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

また、sass が watch の前に実行されるようにし、Gulp コマンドを実行するときに CSS がすでに最新であることを確認します。 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

ここで、コマンドラインで gulp watch を実行すると、Gulp は sass と browserSync の両方のタスクを同時に開始するはずです。 両方のタスクが完了すると、watchが実行されます。

同時に、app/index.html を指すブラウザ ウィンドウもポップアップ表示されるでしょう。 styles.scssファイルを変更すると、ブラウザが自動的に再読み込みされることがわかります。

このライブリロードのセクションを終える前にもう一つあります。 すでに .scss ファイルが再読み込みされるのを監視しているので、さらに一歩進んで、HTML または JavaScript ファイルが保存されたらブラウザを再読み込みしてはどうでしょうか。

2 つのウォッチ プロセスを追加し、ファイルが保存されたときに browserSync.reload 関数を呼び出すことによって、これを行うことができます。

このチュートリアルではこれまで、3 つの事柄を取り上げました。

  1. 開発のために Web サーバーを起動する
  2. Sass プリプロセッサを使用する
  3. ファイルが保存されるたびにブラウザーをリロードする

次のセクションでは、アセットの最適化に関する部分をカバーしましょう。 まず、CSS と JavaScript ファイルの最適化から始めます。

CSS および JavaScript ファイルの最適化

開発者は、CSS および JavaScript ファイルを生産用に最適化しようとするとき、最小化と連結という 2 つのタスクを実行する必要があります。

このプロセスを自動化する際に開発者が直面する問題の 1 つは、スクリプトを正しい順序で連結することが困難なことです。

index.html に 3 つの script タグが含まれているとします。

これらのスクリプトは 2 つの異なるディレクトリにあります。 gulp-concatenate のような従来のプラグインでそれらを連結するのは難しいでしょう。

ありがたいことに、この問題を解決してくれる便利な Gulp プラグイン、gulp-useref が存在します。

Gulp-useref は、”<!-build:” で始まり “<!-endbuild->” で終わるコメントを探し、任意の数の CSS および JavaScript ファイルを 1 つのファイルに連結します。 その文法は 

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> は js, css, remove のいずれかである。 type には、連結しようとするファイルの種類を指定するのがよいでしょう。 typeをremoveに設定すると、Gulpはファイルを生成せずにビルド・ブロック全体を削除します。

<path> ここで、生成されるファイルのターゲットパスを参照します。

最終的なJavaScriptファイルは、main.min.jsとして、jsフォルダーに生成されるようにします。 したがって、マークアップは次のようになります。

ここで、gulp-useref プラグインを gulpfile で設定しましょう。 プラグインをインストールして、gulpfile で require する必要があります。

$ npm install gulp-useref --save-dev
var useref = require('gulp-useref');

useref タスクの設定は、これまで行ってきた他のタスクと同様です。 以下はそのコードです。 

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

ここで、このuserefタスクを実行すると、Gulpは3つのscriptタグを実行し、それらをdist/js/main.min.jsに連結してくれます。

しかしながら、このファイルは今は最小化されていません。 JavaScript ファイルの minify を支援するために、gulp-uglify プラグインを使用する必要があります。 また、JavaScriptファイルの最小化のみを試みることを確実にするために、gulp-ifという2番目のプラグインが必要です。 

$ npm install gulp-uglify --save-dev

Gulp は useref タスクを実行するたびに `main.min.js` ファイルを自動的に最小化するようになりました。

Gulp-useref でまだ明らかにしていない巧妙なことの 1 つは、”<!-build:” および “<!-endbuild->” 内のすべてのスクリプトを `js/main.min.js` を指す単一の JavaScript ファイルに自動的に変更することです。

素晴らしいでしょう？

同様の方法で、任意の CSS ファイルを連結することもできます (複数追加することを決めた場合)。 同じ手順で build コメントを追加していきます。

また、同様に連結された CSS ファイルを最小化することができます。 gulp-cssnano プラグインというパッケージを使用して、最小化を行う必要があります。

$ npm install gulp-cssnano

これで、useref タスクを実行するたびに、最適化された CSS ファイルと最適化された JavaScript ファイルを 1 つずつ取得できるようになりました。

次に、画像を最適化しましょう。

画像の最適化

もうお分かりだと思いますが、画像の最適化にはgulp-imageminが必要です。

$ npm install gulp-imagemin --save-dev
var imagemin = require('gulp-imagemin');

gulp-imageminを使ってpng, jpg, gif そして svg までも最小化できます。 この最適化処理のために、imagesタスクを作成してみましょう。 

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

ファイルの種類によって最適化が異なることがあるので、imageminにオプションを追加して、各ファイルの最適化方法をカスタマイズするとよいでしょう。

たとえば、interlacedオプション・キーをtrueに設定すると、インターレースGIFを作成することができます。

必要であれば、他のオプションも弄ることができます。

しかし、画像の最適化は非常に時間のかかる作業であり、必要な場合以外は繰り返したくありません。 

$ npm install gulp-cache --save-dev

最適化プロセスはほぼ終了しました。 もうひとつ、`app` ディレクトリから `dist` というフォント ディレクトリに移す必要があるフォルダがあります。 今それを行いましょう。

Dist にフォントをコピーする

フォント ファイルはすでに最適化されているので、これ以上することはありません。 あとは、フォントを dist にコピーするだけです。

Gulp でファイルをコピーするには、プラグインなしで gulp.src と gulp.dest を指定するだけです。

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

これで Gulp は gulp fonts を実行するたびに `app` から `dist` に `fonts` をコピーするようになりました。

gulpfile には現在 6 つの異なるタスクがありますが、それぞれをコマンド ラインから個別に呼び出す必要があり、これは少し面倒なので、すべてを 1 つのコマンドに結び付けたいと思います。

ただし、その前に、生成されたファイルを自動的にクリーンアップする方法を見てみましょう。

生成されたファイルを自動的にクリーンアップする

ファイルを自動的に生成するので、もう使用されないファイルが知らない間にどこかに残っていないことを確認したいものです。

このプロセスは、クリーニング (またはより簡単な用語で、ファイルの削除) と呼ばれています。

クリーニングを行うには、del を使用する必要があります。 

npm install del --save-dev
var del = require('del');

del 関数はノード グロブの配列を受け取り、どのフォルダーを削除するか指示します。

Gulp タスクでこれを設定することは、私たちが最初に行った “hello” の例とほぼ同じです。 

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

これで、gulp clean:dist が実行されるたびに、Gulp が `dist` フォルダーを削除してくれるようになりました。

注意: gulp-cache がすでに画像のキャッシュをローカル システムに保存しているので、dist/images フォルダーを削除することを心配する必要はありません。

ローカル システムからキャッシュを消去するには、`cache:clear` という名前の別のタスクを作成します

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

ふぅ、これは一口メモです。 今までのタスクをまとめてしまいましょう

Gulp タスクの結合

これまで行ってきたことをまとめましょう。 これまでのところ、2 つの異なる Gulp タスクのセットを作成しました。

最初のセットは開発プロセス用で、CSS に Sass をコンパイルし、変更を監視し、それに応じてブラウザーを再読み込みしました。

2 番目のセットは最適化プロセスで、本番用 Web サイトのすべてのファイルを準備しました。 このプロセスでは、CSS、JavaScript、画像などの資産を最適化し、フォントをappからdistにコピーして引き継ぎました。

最初の一連のタスクは、gulp watchコマンドを使用してシンプルなワークフローにグループ化されています。 

gulp.task('watch', , function (){ // ... watchers})

2 番目のセットは、本番用 Web サイトを作成するために実行する必要があるタスクで構成されています。 これには、clean:dist、sass、useref、images、およびfontsが含まれます。

同じ思考回路で行くと、build タスクを作成して、すべてをまとめることができます。 

gulp.task('build', , function (){ console.log('Building files');})

残念ながら、Gulp は第2引数のすべてのタスクを同時にアクティブにするので、この方法では build タスクを記述できません。

cleanよりも useref や images、あるいは fonts が先に完了し、`dist` フォルダがすべて削除される可能性もあります。

そこで、クリーンが他のタスクより先に完了するようにするために、Run Sequence という追加のプラグインを使用する必要があります。

$ npm install run-sequence --save-dev

以下、run sequence によるタスクシーケンスのシンタックスを示します。

task-nameが呼び出されると、Gulpはまずtask-oneを実行します。 task-oneが終了すると、Gulpは自動的にtask-twoを開始します。 最後に、task-twoが終了すると、Gulpはtask-threeを実行します。

Run Sequenceでは、タスクを配列で配置すれば、同時に実行することも可能です。 

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

この場合、Gulpはまずtask-oneを実行します。 task-oneが終了すると、Gulpは第2引数のタスクをすべて同時に実行します。

したがって、clean:dist が最初に実行され、その後に他のすべてのタスクが実行されるようにするタスクを作成することができます。 今回はタスク名としてdefaultを使用する。 

gulp.task('default', function (callback) { runSequence(, callback )})

なぜdefaultなのか？

最後に、私たちが行った作業の github リポを紹介します！

gulp.task('default', function (callback) { runSequence(, callback )})

default という名前のタスクがあると、gulp コマンドを入力するだけで実行できるので、キーストロークをいくつか節約することができます。

まとめ

Gulp の絶対的な基本を調べ、HTML と JS ファイルの変更を監視しながら同時に CSS に Sass をコンパイルできるワークフローを作成しました。 このタスクは、コマンド ラインの gulp コマンドで実行できます。

また、本番用 Web サイトの dist フォルダを作成する 2 番目のタスク build も作成しました。 Sass を CSS にコンパイルし、すべてのアセットを最適化し、必要なフォルダーを dist フォルダーにコピーしました。 このタスクを実行するには、コマンドラインに gulp build と入力するだけです。

最後に、生成された dist フォルダから作成された画像キャッシュを消去する clean タスクがあり、dist に誤って保管された古いファイルを削除することが可能です。

ここまでで、ほとんどの Web 開発者にとって十分な機能を持つ堅牢なワークフローを作成しました。 Gulp とワークフローには、このプロセスをさらに良くするために探求できることがたくさんあります。 ここにいくつかのアイデアを紹介します。

開発用です。

  • Autoprefixer を使用してベンダー フリーの CSS コードを書く
  • Sourcemap を追加してデバッグを容易にする
  • sprity でスプライトを作成する
  • gulp-changed で変更したファイルのみをコンパイルする
  • Babel または Traceur で ES6 を書く
  • Browserify.Pirates で Javascript ファイルのモジュール化する
  • Browser.Pirates で JBODE を変更する

    • Babel で ES6 を作成する

  • Browserify.Pirates で JBODE を変更する webpack, or jspm
  • Handlebars や Swig などのテンプレートエンジンで HTML をモジュール化
  • require-dir で gulpfile を小さなファイルに分割
  • gulp-modernizr で Modernizr スクリプトを自動的に生成

最適化のため。

  • unCSSで使用しないCSSを削除
  • CSSOでCSSをさらに最適化
  • CriticalでパフォーマンスのためのインラインCSSを生成

開発または最適化のプロセスに加えて、gulp-jasmineでJavaScriptユニットテスト書き込み、そしてgulp-ryncでdistフォルダを自動的に本番サーバに配置することができるようになりました。

おわかりのように、今回作成したワークフローはかなり多くのことを行っていますが、他にもできることはたくさんあります。 自分のニーズに合ったワークフローを作成することは、非常にエキサイティングで充実したものになりますが、初めての場合は取り込むことがたくさんあります。

このブログの記事、あるいは一連の記事でカバーすることは不可能なほど、Gulp には多くのことがあります。 そのため、私はワークフローの自動化に関する本を書きました。）

Leave a Reply