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

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

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

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

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

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

こんなやつ↓

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

導入までの道のり

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

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

Node.js

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

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

node -v

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

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

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

mkdir test
cd test

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

npm init

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

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

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

npm install gulp -g
npm install gulp --save-dev

はい、完了です。

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

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

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

株式会社LIG

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

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

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

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

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

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

npm install gulp-compass --save-dev
npm install gulp-uglify --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-plumber --save-dev

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

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

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

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

//package.json
{
  "name": "gluptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-minify-css": "^1.1.1",
    "gulp-compass": "^2.1.0",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.2.0"
  }
}

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

//gulpfile.js
var gulp = require("gulp");
var compass = require('gulp-compass');
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var minifyCss = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('./scss/*.scss')
    .pipe(compass({
      css: 'tempcss',
      sass: 'scss'
    }))
    .pipe(minifyCss())
    .pipe(gulp.dest('../css'));
});

gulp.task("js", function() {
    gulp.src('js/*.js')
    	.pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest("../js"));
});


gulp.task("default", function() {
    gulp.watch("./js/*.js",["js"]);
    gulp.watch("./scss/*.scss",["compass"]);
});

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

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

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

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

gulp compass
gulp js

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

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

gulp

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

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

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

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

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

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

npm install

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

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