ウェブサイト検索

Gulp - 開発における面倒なタスクを自動化するツールキット


Gulp は、反復的なタスクを自動化する小さなツールキットです。これらの繰り返しのタスクは、通常、CSS や JavaScript ファイルをコンパイルすることですが、基本的に、非標準の JavaScript/CSS ファイルを扱うフレームワークを使用する場合は、それらのファイルを取得し、それらをまとめてパッケージ化し、ブラウザーが簡単に理解できるようにすべてをコンパイルする自動化ツールを使用する必要があります。それ。

Gulp は、次のタスクを自動化するのに役立ちます。

  • JS および CSS ファイルのコンパイル
  • ファイルを保存するときにブラウザ ページを更新する
  • 単体テストを実行する
  • コード分析
  • 変更されたファイルをターゲット ディレクトリにコピーする

gulp ファイルの作成、自動化ツールの開発、またはタスクの自動化に必要なすべてのファイルを追跡するには、package.json ファイルを生成する必要があります。このファイルには基本的に、プロジェクトの内容、プロジェクトを機能させるために必要な依存関係についての説明が含まれています。

このチュートリアルでは、Gulp をインストールする方法と、プロジェクトのいくつかの基本タスクを自動化する方法を学びます。 npm (ノード パッケージ マネージャーの略) を使用します。これはNode.js とともにインストールされます。次のコマンドを使用して、Nodejs と npm がすでにインストールされているかどうかを確認できます。

node --version
npm --version

システムにまだインストールされていない場合は、チュートリアル「Linux システムに最新の Nodejs と NPM バージョンをインストールする」を確認することをお勧めします。

Linux に Gulp をインストールする方法

gulp-cli のインストールは、npm で次のコマンドを使用して完了できます。

npm install --global gulp-cli

gulp モジュールをローカルにインストールする場合 (現在のプロジェクトのみ)、以下の手順を使用できます。

プロジェクト ディレクトリを作成し、そのディレクトリ内に移動します。

mkdir myproject
cd myproject

次に、次のコマンドを使用してプロジェクトを初期化します。

npm init

上記のコマンドを実行すると、プロジェクトの名前、バージョンの説明などを入力するための一連の質問が表示されます。最後に、入力したすべての情報を確認します。

これで、次のコマンドを使用してプロジェクトに gulp パッケージをインストールできます。

npm install --save-dev gulp

--save-dev オプションは、npm に新しい devDependencypackage.json ファイルを更新するように指示します。

devDependency は開発中に解決する必要があるのに対し、Dependency は実行時に解決する必要があることに注意してください。 gulp は開発を支援するツールであるため、開発時に解決する必要があります。

Gulp ファイルの作成

次にgulp ファイルを作成しましょう。実行したいタスクはそのファイル内にあります。これはgulp コマンドを使用すると自動的にロードされます。テキスト エディタを使用して、gulpfile.js という名前のファイルを作成します。このチュートリアルでは、簡単なテストを作成します。

次のコードを gulpfile.js に挿入できます。

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

ファイルを保存し、次のように実行してみます。

gulp hello

次の結果が表示されるはずです。

上記のコードの動作は次のとおりです。

  • var gulp=require(‘gulp’); – gulp モジュールをインポートします。
  • gulp.task(‘hello’, function(done) { – コマンド ラインから使用できるタスクを定義します。
  • console.log(‘Hello world!’); – 単に「Hello world! 」を画面に出力します。
  • done(); – このコールバック関数を使用して、タスクが完了したことを gulp に指示します。

もちろん、上記はgulpfile.js をどのように構成できるかを示すサンプルにすぎません。 gulpfile.js から利用可能なタスクを確認したい場合は、次のコマンドを使用できます。

gulp --tasks

Gulp プラグイン

Gulp には何千ものプラグインがあり、すべて異なる機能を提供します。 Gulp のプラグイン ページで確認できます。

以下では、より実践的な例で minify-html プラグインを使用します。以下の機能を使用すると、HTML ファイルを縮小して新しいディレクトリに配置できます。ただし、その前に、gulp-minify-html プラグインをインストールします。

npm install --save-dev gulp-minify-html

gulpfile.js は次のようになります。

cat gulpfile.js
サンプル出力
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

次に、次のコマンドを使用して HTML ファイルを縮小できます。

gulp minify-html
du -sh /src dest/

結論

Gulp は、生産性の向上に役立つ便利なツールキットです。このツールに興味がある場合は、ここから入手できるドキュメント ページを確認することを強くお勧めします。