gulp導入でWeb開発環境の自動化 便利なgulp.jsの導入方法
gulp（ガルプ）導入で開発環境の高速化
web制作では昨今欠かせないタスクランナーの1つ「gulp.js」(以下、gulp)を導入しました。
ビルドツールではGruntが人気で、ずっと導入しようと思っていたけど、いつの間にか「今ならgulp.jsでしょ」みたいな流れになってきていたので、gulpを導入してみることにしました。
gulpとは?
まずはじめにgulpについてですが、こちらは基本的にはGruntと同じ、「Node.js」で開発されているタスクランナーの1つです。
(画像はNode.jsサイトの画面です。)
主にSass/CompassやLess、CSS/JS圧縮、画像圧縮などのタスクを自動で行ってくれるビルドツールです。
最近、制作現場ではコンパイルを必要とするケースはとても一般的です。
ですが、例えばSassを編集する度にコンパイルを実行したりとか、画像編集する度に結合圧縮したりなど、一つひとつのコマンドを手作業で実行するのは少し面倒です。
gulpはそんな面倒くさがりでも、さらに楽ができるものになっています。
（楽をしていると言うと語弊がありますが、手作業の時間を限りなく削り効率化させることは、より他の工程に割く時間を生むので当然のことですよね。）
gulpはGruntとできることはほとんど同じだと言われていますが、Gruntに比べつかいやすい点がいくつかあると言われています。
（例：GruntはJSON形式の記述方法で少し扱いづらいイメージがあるのに対し、gulpはJavascriptで記述可のため、デザイナーでも扱いやすい。また、Gruntは基本は同期処理であるのに対し、gulpは非同期処理のため処理時間を短縮できる。）
gulp導入方法
まずはじめに、GruntもgulpもNode.jsをベースに開発されているため、Node.js本体のインストールが必要となります。作業環境にNode.jsがインストールされていない場合は、まずNode.jsをインストールしてください。
1、Node.jsをインストールする
まずは公式サイトよりNode.jsのインストーラーをダウンロードして手順に従いインストールしてください。
ちゃんとインストールされたかどうかの確認は、コマンドラインでNode.jsのバージョン表示で確認してください。
2、gulpをインストールする
Node.jsのインストールが完了したら、次にgulpをnpmからインストールします。
以下を、コマンドラインに入力しインストールしてください。
npm install -g gulp
※Mac環境でインストール中にエラーが発生する場合は先頭にsudoを付け足し管理者権限で実行してください。また、npmのバージョンが古いとこれもインストール中にエラーになるらしいので、事前にnpmのバージョンもアップデートしておきましょう。「sudo npm install -g npm」
ローカル環境でもインストールしておく
Node.jsでは、-gオプションを付与せずインストールすると、グローバル環境ではなくローカルのフォルダ内にモジュールが保存されます。そのためローカル環境のプロジェクトフォルダ以下でも使えるようにしたいため、ローカル環境にもgulpをインストールしておく必要があります。そのためには以下のようにコマンドを入力しインストールします。
npm install gulp --save-dev
3、package.jsonを作成する
こちらは基本的なNode.jsの使い方として、プロジェクトに必要な設定はあらかじめpackage.jsonというファイルに記述します。
package.jsonファイルの作成は以下の通りです。
まずプロジェクトのルートフォルダにコマンドラインで移動します。
Macの場合
cd /Users/ユーザー名/プロジェクトフォルダ名
Windowsの場合
cd C:¥Users¥ユーザー名¥プロジェクトフォルダ名
ルートフォルダに移動したら、以下のコマンドを実行します。
npm init
そうすると、プロジェクトの設定情報について以下のようにいろいろ聞かれますので、適当に記述します。
特筆することがなければ、とりあえずすべてそのままで構いません。
name:プロジェクト名 version: プロジェクトバージョン description:プロジェクト説明 git repository: gitなどのバージョン管理システムの情報 keywords: npmで公開時に使用されるらしいキーワード author: 作者情報 license: ライセンス（BSDやMITなど）
すべてが完了しますと、ルートフォルダに以下のようなpackage.jsonファイルが作成されます。
{
"name": "projectName(プロジェクト名)",
"version": "0.0.0(プロジェクトバージョン)",
"description": "MyProject(プロジェクト説明)",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "SHIGE(作者情報)",
"license": "MIT(ライセンス)",
"devDependencies": {
"gulp": "^3.8.11"
}
}
作成後にファイルを弄くる場合は、行末のカンマに注意してください。
4、プロジェクトに合わせて必要なプラグインをインストールする
ただgulpをインストールしただけではコンパイル機能などを持ちませんので、プロジェクトに合わせて必要なプラグインをインストールしていきます。
以下ベターなヤツを少しピックアップ
| プラグイン名 | プラグインの機能 |
|---|---|
| gulp-imagemin | 画像圧縮 |
| gulp-minify-css | CSS圧縮 |
| gulp-rename | ファイルのリネーム |
gulpのプラグインはたくさん公開されています。
プラグインについては以下公式サイトより検索できます。
- 公式サイト
インストールは以下のようにコマンドでインストールができます。
npm install プラグイン名 --save-dev
上記のように「–save-dev」とコマンドを入力することでインストールしたプラグインが自動的にpackage.jsonに追記されます。
例として以下のようにプラグインをインストールすると、
npm install gulp-imagemin --save-dev
以下のようにpackage.jsonに追記されます。
....
"author": "SHIGE(作者情報)",
"license": "MIT(ライセンス)",
"devDependencies": {
"gulp": "^3.8.11",
"gulp-imagemin": "^2.1.0"
}
}
※バージョンは記事執筆時のバージョンです。
このようにしてプロジェクトに合わせて必要なプラグインをインストールしていきましょう。
5、gulpfile.jsという設定ファイルを作成する
ここにきてようやく具体的なgulpの動かし方について触れていきます。
gulpは基本的に、設定ファイルにJavascriptでタスクを記述して実行させます
ここでは例で、以下のような「gulpfile.js」という設定ファイルを作成してみます。
var gulp = require('gulp');// gulpプラグインの読みこみ
var minifyCss = require("gulp-minify-css");// CSSを圧縮するプラグインの読み込み
gulp.task('style', function(){ // 「style」という名前のタスクを登録
return gulp.src('css/style.css') // 「css/style.css」を指定
.pipe(minifyCss()) //cssの圧縮を実行
.pipe(gulp.dest('min_css')); //出力場所を指定
});
上記のように、require(‘読み込むファイルなどの名前’)と記述し、別ファイルのJavascriptなどを読み込みます。
| 記述方法 | 処理内容 |
|---|---|
| require(‘プラグイン名’) | 実行するプラグインを指定します。 |
| gulp.task(‘タスク名’,実行される処理) | 任意のタスク名を登録します。タスク名と、実際に実行される処理を記述します。 |
| gulp.src(‘対象となるファイル、フォルダ名’) | タスク処理の対象となるファイルを指定します。カンマ区切りで複数指定できます。その他以下のような記述で対象を変更できます。 |
| .pipe(処理内容()) | 実行する処理を記述します。pide()は処理をいくつでもつなげることができます。 |
| .pipe(gulp.dest(‘出力場所’)); | 処理を実行したファイルを出力する場所を指定します。 |
6、gulpfile.jsで設定したタスクを実行する
gulpfile.jsで設定したタスク名を記述し、コマンドラインで実行します。
gulp style
上記のようにコマンドを実行することによって、gulpfile.jsで設定したタスクが実行されます。
これによって、今まで一つひとつ実行していたコンパイルや圧縮などといったタスクをまとめて実行することができます。
以上でgulpの基本的な使い方は完了です。
このままでもいいのですが、さらに便利な機能がgulpにはあります。
それがwatchというファイル監視の方法です。
watchでファイル更新を監視し、更新があった場合処理を自動で実行する
上記解説のままでは、プロジェクトファイル内で処理対象ファイルの更新があった場合に、
その都度コマンドラインでコマンドを実行しなければいけません。
これでは少し面倒です。
そのためさらに作業を簡略化するために、ファイルが変更・追加など更新されたタイミングでタスクを自動で実行してくれるwatch機能というものがあります。
上記までの例にwatch機能を加えて見ます。
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
gulp.task('watch', function(){
gulp.watch('css/**',function() {//cssフォルダ以下のファイルを監視する
gulp.src('css/*.css')//cssフォルダ以下の拡張子が.cssのファイルを対象
.pipe(minifyCss())
.pipe(gulp.dest('min_css'));
});
});
上記の場合は、
gulp.watch('監視するファイル名')監視するファイルを指定し、その対象内で何らかの更新があった場合、自動でタスクを実行します。
あとはコマンドラインで同様に、以下のようにコマンドを実行しておけば完了です。
gulp watchTask
ファイルの監視をやめたい場合は、コマンドラインで Ctrl+C同時押しで監視を終了させます。
