Node.js入門（２）Gulpの導入と使い方 | IT工房

GulpとはNode.jsをベースにした開発ワークフローで苦労したり時間のかかるタスクを自動化するためのツールキットです。

Gulpでできること
Gulpのインストール
初期化
ローカルへのインストール
タスクの作成

Gulpでできること

Sassのコンパイル
コードの連結と圧縮
画像の圧縮
CSSベンダープリフィックスの管理
などなど

Gulpのインストール

Gulpのインストールはgulpのページを参照すると英語ながら書かれています。
基本的なインストール方法は「Node.js入門（１）環境づくりと少しだけ試してみる」の「Node.jsで開発するときの最初の手順〜初期設定」からの方法と同一な方法をとります。それはつまりGulpもNodeのパッケージだからです。

まずグローバルでインストールするには次のコマンドを使います。

グローバルインストールのコマンド

npm install --global gulp-cli

もし、エラーが出たら「sudo」をコマンドの先頭に付けます。

sudo npm install --global gulp-cli

結果は以下のように表示されます。

注意：gulpまたはgulp-cliをglobalでインストールするのは必ずしも良策ではありません。globalでインストールをしておけばgulpの実行がどこからでも可能になりますが、作業フォルダにインストールしたgulpとバージョンが違うとトラブルになりかねません。作業フォルダにインストールするだけでもgulpは動きます。
グローバルにインストールしてない場合、gulpの実行は「gulp」コマンドだけでは動きません。
node_module/.binに移動してから実行します。

初期化

Gulp作業用ディレクトリを作成してカレントディレクトリを作成したディレクトリに移動します。今回のディレクトリ名は「gulp_lesson」としました。

Haidoro:~ tahara$ cd /Users/tahara/gulp_lesson

初期化をすることでpackege.jsonを作成します。

npm init

ローカルへのインストール

次に作業用ディレクトリにもう一度Gulpをインストールします。

npm install --save-dev gulp

node_modulesフォルダができてpackage.jsonには次の内容が記述されています。

{
  "name": "gulp_lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tahara",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.3.0"
  }
}

タスクの作成

タスクを自動処理するためのJavaScriptを記述して、ファイル名を「gulpfile.js」とします。
このファイル名はGulpの決まりごとです。

画像を圧縮して保存するタスク

タスクのJavaScriptの内容

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('imagemin',function(){
	gulp.src(['assete/**/*'])
	.pipe(imagemin())
	.pipe(gulp.dest('images'));
});

変数gulpにモジュールをrequire()で読み込む。引数はgulpモジュールです。
また、require()でgulp-imageminプラグインを読み込みます。

gulpオブジェクトのtask()メソッドを使用してタスク処理を行うスクリプトを記述します。
第1引数が処理名、第２引数が処理の内容となります。

ファイルをコピーするタスクはgulp.src()で配列を引数に設定することで指定します。
assete/**/*はasseteフォルダ内のサブフォルダを含めてという意味です。
dest()はコピー先のディレクトリを指定します。
pipe()は連結するためのもので、imagemin()が圧縮操作を行います。

画像圧縮のプラグインの導入

画像を圧縮するにはさらにプラグインの導入が必要です。
GulpのプラグインはGulpのプラグインのページにまとまっています。

プラグインのページから「gulp-imagemin」をページ内検索などで探して、そのリンク先にある「gulp-imagemin」のページに行って使い方を確認します。

Install方法はプロジェクトフォルダにカレントディレクトリを移動していることを確認の上、下記コマンドをそのまま実行します。

npm install --save-dev gulp-imagemin

packege.jsonに追記されている内容を確認します。

{
  "name": "gulp_lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tahara",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.3.0"
  }
}

これでプラグインの導入完了しました。

タスクの実行は「gulp imagemin」で実行

gulp imagemin

SASSの導入

作業フォルダに移動して、gulp-sassのインストールを行います。コマンドは以下の通りです。

npm install gulp-sass --save-dev

次に、作業フォルダ内にsassファイル用の「scssフォルダ」とcss用の「cssフォルダ」を作成します。
続いて、gulpfile.jsの作成です。
このファイルは、imageminで使用したものに追記して記述することが可能です。

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

// SassとCssの保存先を指定
gulp.task('sass', function(){
  gulp.src('scss/**/*')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('css'));
});

//自動監視のタスクを作成(sass-watchと名付ける)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('scss/**/*', ['sass']);
  watcher.on('change', function(event) {
  });
});

実行するには以下のコマンドです。