タスクランナーGulpを使ってウェブ制作を効率的に！

Sassを使ったCSSコーディングの効率化、画像の圧縮、JavascriptやCSSファイルの縮小など、ウェブサイトの制作には様々な作業、技術が必要です。
最近、こういった作業を自動的に行ってくれるタスクランナーというツールが注目されていますね。

タスクランナーとは、Node.jsで開発された様々なタスクを自動で行ってくれるツールで、今までは「Grunt」が有名でしたが、最近では「Gulp」という後発のツールが徐々に人気を集めています。
今回はこのGulpのご紹介と、Gruntとの違い、導入手順(Windows8)、Gulpでできる事などをまとめたいと思います。

タスクランナー「Gulp」とは？？

Gruntと同じくNode.jsで作られたタスクランナーで、Sassのコンパイル、Javascript、CSSファイルの結合や縮小、画像の圧縮等を自動化できるツールで、使いこなせばウェブサイトの制作時間を大幅に削減できるものです。
導入と設定に少し知識が必要ですが、使わない時と比べると制作スピードが圧倒的に違います！

Gulp公式サイト

Gruntと何が違うの？？

簡単に言うと、強みとしては、Gruntよりコードが短く済む事、処理が速い事、コードが書きやすい事が挙げられます。
弱みとしては、リリースされて日が浅い事もありGruntよりはプラグインが少ないです。でも、Gruntより高性能だったり、最低限のものは揃っていたりで、困る事は無いかな？と思います。

Gulpの導入

それでは、実際にGulpを導入してきましょう！
手順は大きく以下になります。

1.Node.jsをインストール

Gulpを使うにはNode.jsが必要なので、まずはNode.jsをインストールします。

2.Gulp.jsをインストール

コマンドラインを使い、Gulp.jsをインストールします。

3.package.jsonの作成

またもやコマンドラインを使い、package.jsonを任意のディレクトリにインストールします。

4.プラグインのインストール

使いたい機能に必要なプラグインをインストールしていきます。

では、各項目の詳細手順です。

1.Node.jsをインストール

公式サイトからインストーラーをダウンロードし、実行してください。

画面中央の「INSTALL」から、最新版のインストーラーがダウンロードできます。

インストーラーのウィザードに沿ってそのまま進みましょう。
特に注意点などもありません。

2.Gulp.jsをインストール

コマンドラインから、Gulp.jsをインストール。
windowsなら、コマンドプロンプトを起動します。Gulpは、ローカルとグローバルへのインストールが必要です。
[ruby] C:\Users\owner>npm install gulp –save-dev
[/ruby]

バージョン表示でインストールできているか確認しましょう。
[ruby] C:\Users\owner>gulp -v
[13:58:13] CLI version 3.8.10
[13:58:13] Local version 3.8.10

C:\Users\owner>
[/ruby] CLI、Local両方バージョンが表示されていたらOKです。

3.package.jsonの作成

またコマンドライン。インストールするディレクトリまで「cd」コマンドで移り、package.jsonをインストールします。
[ruby] C:\Users\owner>cd c:\sample/gulp

c:\sample\gulp>
[/ruby]

package.jsonのインストール。以下のコマンドを入力します。
[ruby] c:\sample\gulp>npm init
[/ruby]

すると、プロジェクトの名前、バージョン、説明などなどの質問が続きますので、任意の入力をしていきます。

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> –save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp)
[/ruby] お好きな名前などを入力してENTERで進めていきます。

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> –save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp) gulp
version: (1.0.0)
description: gulp test
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to c:\sample\gulp\package.json:

{
“name”: “gulp”,
“version”: “1.0.0”,
“description”: “gulp test”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”
}

Is this ok? (yes)
[/ruby]

最後にENTERを押せば完了。

4.プラグインのインストール

必要なプラグインをインストールします。
今回は、前回ご紹介したCompassを動かす為のgulp-compassを入れてみましょう。
先程と同じく、CLI、ローカル両方にインストールする為、「–save-dev」を付けましょう。

c:\sample\gulp>npm install gulp-compass –save-dev
[/ruby]

これでGulpの導入までの手順は完了です。

Gulpを使ってみよう！

導入が終わったので、Gulpがどんなに便利なのか試しに使ってみましょう！

gulpfile.jsの設定

Gulpは、gulpfile.jsに書かれた処理を実行します。
なので、まずはgulpfile.jsを作成します。
先程インストールしたCompassを動かすgulpfile.jsを書いてみます。
Compassは、SassからCSSを作成するので、Sassを編集する度にCSSを生成しようとコマンドを打って実行していたら手間ですよね。
ですので、Sassを保存したら自動的にCSSが再生成されるようにします。

//Compassのタスク
gulp.task(‘compass’,function(){
gulp.src([‘dev/scss/**/*.scss’])
.pipe(compass({
config_file : ‘config.rb’,
css : ‘dev/**/css’,
sass: ‘dev/**/scss/’
}));
});
gulp.task(‘default’, function() {
gulp.watch(‘dev/scss/**/*.scss’,[‘compass’]);
});
[/ruby]

1.var タスク名 = require(‘プラグイン名’);で、gulpと、インストールしたプラグインを呼び出します。
2.gulp.task(‘タスク名’,function() {});でタスクの登録をおこないます。
3.gulp.src(’ファイル’のパス);で読み出したいファイルを指定します。
4.pipe(行いたい処理);でsrcで取得したファイルに処理を施します
5.gulp.task(‘default’,function(){});で、defaultというコマンド「gulp」で実行できるタスクを登録しておきます。
6.gulp.watch(‘監視するファイルのパターン’,[実行したいタスク]);で監視するファイルと実行するタスクを指定します。

これで、「gulp」とコマンドを実行しておけば、Sassが書き換わる度に自動的にタスクが実行され、CSSファイルが生成されます。
随時監視させておきたいタスクはこのdefaultタスクに入れておけば便利です。