ちょっとしたコーディング用にと試してみた「gulp（ガルプ）」が便利すぎてやばいｗ

こんにちは、えんぞーです。

いつものように**「今更？？」**と言われるネタではあるのですが、便利だったので「glup（ガルプ）」をご紹介。

CSS とか Jsvascript をよく書く人でまだ使ってなければ是非目を通して頂きたい＾＾

「gulp（ガルプ）」ってなんぞや？

ちょっと前に Grunt(グラント)っていうイノシシがトレードマークのタスクランナーが流行ったんですが、覚えてますか？

こんなやつ ↓

基本的にこれと一緒でタスクランナーという奴です。

そもそもタスクランナーが何かと言う話になるのですが、簡単に言うと事前に決めておいた作業を自動化出来るツールになります。

「自動化出来るってどこまで出来るの？」という疑問も湧きますが、多様なプラグインがあるので色々出来るとしか言えませんｗ

組み合わせを自分で考えて効率化を図るツールと考えて良いでしょう。

Grunt も使ったんだけどね・・・

私は前述の Grunt も使っていてこのサイトでもまとめておこうかな位には思ったんですけどね、どうにも肌に合わなかった。

JSON 形式での設定ファイルがしっくり来なかったというのもあるのですけれど、そこに学習コストが発生するのが嫌だったんですよね・・・。

なぜなら、実際のところは特に困ってなかったから。

私は作業する際にはだいたい PhpStorm を使っていて、ちょっとしたものであれば SublimeText3 を使って作業しています。

どちらも SASS+Compass のコンパイル自動化が出来ているので基本これで問題ない状態なのです。

たまに Javascript 書いた時とか minify（圧縮）しないと・・・って事で面倒ではありましたけど、それでもそんなに手間では無いわけで。

色々出来るのはわかっているけどまずはいいや・・・と、私の中の Grunt はそんなに弄られること無く記憶の片隅に埋もれたのでした。

では Gulp の何が気に入ったのか

一番の理由は導入の容易さです。

一度設定ファイル書いちゃえば簡単に他の案件にも使える訳ですが、そこまでの到達の手軽さが気に入っています。

あと、Grunt と違って非同期処理による処理の軽快さもあるかもしれません。

Grunt が非同期処理出来ないって事ではないようですけど、手軽さを求めていたので・・・。

導入までの道のり

道のりとか書くとそこそこ険しい感じが出てきますがそんな事はなく、実にシンプルで簡単です。

まずは node.js のインストーラーをダウンロードしてインストールします。

Node.js

特に何か設定あるわけでもなく、そのまま突き進んでインストール完了します。

完了したら一度コマンドプロンプトから下記のコマンド打ってバージョン情報出るか見てみましょう。

1node -v

この画像のようにバージョン情報出たら OK です。

次に適当な場所にフォルダ作ってそこにコマンドプロンプトで移動しましょう。

今回はコマンドプロンプトを立ち上げた時の場所のすぐ下に「test」というフォルダを作ります。

1mkdir test

1cd test

作ったフォルダに移動したら下記のコマンドを打って設定ファイルの初期化を行います。

1npm init

すると色々聞かれますが、特に理由無いのであれば全部 Enter で突き進んで OK です。

こんな感じになったら完了。名前くらい付けたほうが良いかもしれないけど、どうせ後で弄れるし。

で、あとは gulp をインストールします。

1npm install gulp -g
2npm install gulp -save-dev

はい、完了です。

あとは自分のしたい事に合わせてプラグインを選んで設定する作業となります。

インストールについては LIG さんのところでも書いているので躓いた人は参考にしてみてください。

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ 

株式会社LIG

私（えんぞー）の場合の設定

私の場合はちょっとしたコーディングでも Compass 使いたいというのが大前提にあるので、それが主体になります。

あと Css ファイル、Js ファイルの Minify 出来ればそれでって感じです。

gulp のプラグインはコマンドラインで入れていくことになるのですが、プラグインを入れるとその情報が package.json に追加されていきます。

なので、一度使うものを入れてしまうとその設定が記載されているのでその設定ファイルさえ残しておけば同じ状態に出来ます。

今回の例で言うと、最初に下の様なコマンドで必要なプラグインを入れていきます。

1npm install gulp-compass --save-dev
2npm install gulp-uglify --save-dev
3npm install gulp-minify-css --save-dev
4npm install gulp-plumber --save-dev

今回使用しているプラグインの詳細はこちらになります。

• gulp-compass
• gulp-uglify
• gulp-minify-css
• gulp-plumber

他にも様々なプラグインが存在するので自分のやりたいことに合わせて導入します。

すると、package.json の設定が下記のように追加されます。

 1//package.json
 2{
 3  "name": "gluptest",
 4  "version": "1.0.0",
 5  "description": "",
 6  "main": "index.js",
 7  "scripts": {
 8    "test": "echo "Error: no test specified" && exit 1"
 9  },
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "gulp": "^3.8.11",
14    "gulp-minify-css": "^1.1.1",
15    "gulp-compass": "^2.1.0",
16    "gulp-plumber": "^1.0.1",
17    "gulp-uglify": "^1.2.0"
18  }
19}

次にプラグインの設定ファイル。

 1//gulpfile.js
 2var gulp = require("gulp");
 3var compass = require("gulp-compass");
 4var uglify = require("gulp-uglify");
 5var plumber = require("gulp-plumber");
 6var minifyCss = require("gulp-minify-css");
 7
 8gulp.task("compass", function () {
 9  gulp
10    .src("./scss/*.scss")
11    .pipe(
12      compass({
13        css: "tempcss",
14        sass: "scss",
15      })
16    )
17    .pipe(minifyCss())
18    .pipe(gulp.dest("../css"));
19});
20
21gulp.task("js", function () {
22  gulp.src("js/*.js").pipe(plumber()).pipe(uglify()).pipe(gulp.dest("../js"));
23});
24
25gulp.task("default", function () {
26  gulp.watch("./js/*.js", ["js"]);
27  gulp.watch("./scss/*.scss", ["compass"]);
28});

上の方で説明したように「package.json」の方は必要なプラグインの情報、「gulpfile.js」の方はプラグインの設定です。

この設定の動きはというと、compass の方は scss 内の scss ファイルをコンパイルして tempcss フォルダに書き出すと共に minify した css を一つ前の css フォルダに書き出す。（こっちが本命ファイルです。）

js は js フォルダ内の js ファイルを minify して一つ前の js フォルダに書きだすようにしています。

それぞれ設定ファイルがあるフォルダで

1gulp compass

1gulp js

として単体でも動作させることが出来ますが、普段はファイルの変更をトリガーにして自動で処理するようにしています。

その場合は同じようにフォルダ内で

1gulp

とだけ打つと監視するようになるのでこの状態で作業すると効率よいです。

ちなみに、compass については事前に ruby いれて compass 自体のインストールも必要なので入ってなければインストールが必要です。

エラー出た時に監視が外れるのが精神的によろしくないので「gulp-plumber」入れて監視が途切れないようにしています。

終了する場合はctrl + c を押すと終了するか聞いてくるので Y を押して終了しましょう。

作業するときに小回りがきくようになった

プラグインの選定や設定で少し悩むこともあるのですが、一回作ってしまえば別のフォルダに設定ファイル（「package.json」と「gulpfile.js」）を入れて

1npm install

このコマンドを打つだけですぐ使えるようになるのですごく使い勝手がいいです。

まぁ・・・この辺は Grunt でも同じではありましたけども Grunt よりも気軽に使える感じなのがいいですね。