Gulp - 開発における苦痛な作業を自動化するためのツールキット


Gulp は、繰り返し作業を自動化する小さなツールキットです。これらの繰り返し作業は通常CSS、JavaScriptファイルをコンパイルするか、あるいは基本的に非標準のJavaScript/CSSファイルを扱うフレームワークを使用する場合はそれらのファイルをつかみ、まとめてコンパイルしてブラウザが理解できるようにすべてをコンパイルする自動化ツールを使用します。それ。

Gulp は、次の作業を自動化するのに役立ちます。

  • Compiling JS and CSS files
  • Refreshing browser page when you save a file
  • Run a unit test
  • Code analysis
  • Copying modified files to a target directory

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

このチュートリアルでは、Gulpをインストールする方法とあなたのプロジェクトのためのいくつかの基本的なタスクを自動化する方法を学びます。私たちはnpmを使うつもりです - これはノードパッケージマネージャを表します。これは Node.js とともにインストールされ、Nodejsとnpmが既にインストールされているかどうかを確認できます。

# node --version
# npm --version

システムにまだインストールしていない場合は、チュートリアル「Linuxシステムに最新のNodesと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 オプションは、 package.json ファイルを新しい devDependencies で更新するよう npm に指示します。

devDependencies は開発中に解決する必要がありますが、依存関係は実行時に解決する必要があります。 gulpは私たちの開発を手助けするツールなので、開発時に解決する必要があります。

それでは、 gulpfile を作成しましょう。実行したいタスクはそのファイルにあります。 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’); – imports the gulp module.
  • gulp.task(‘hello’, function(done) { – defines a task that will be available from the command line.
  • console.log(‘Hello world!’); – simply prints “Hellow world!” to the screen.
  • done(); – we use this callback function to instruct gulp that our tasks has finished.

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

# gulp --tasks

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 は、生産性を向上させるのに役立つ便利なツールキットです。あなたがこのツールに興味があるなら、私はあなたがここで利用可能なそのドキュメンテーションページをチェックすることを強く勧めます。