はじめに
はじめまして！
株式会社GizumoというできたてほやほやのIT会社で働かせてもらっているozima shinsukeです！
この記事はその会社の社員が書いているGizumoエンジニア Advent Calendar 2015の14日目の記事です。
今回はタイトルの通りgulpってなに？？？？という話をしたいと思います！
(何を今更ってツッコミは華麗にスルーします)
gulpって？？？
Node.jsのStreamAPIを利用したビルドシステムです。
ってこんな説明でわかるかーーい！！
なのでしっかりとググりました。
gulpとは、Node.jsを使ったタスク自動化ツールです。 CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」 というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。
www.webcreatorbox.com/tech/gulp/
いやーさすがグーグルさん！だいぶわかりやすくなりましたね！！
要はさまざまな作業を自動化してくれる便利な奴ってことですね(小並感)
では実際に動かすところまでやってみましょう！
環境構築
gulpはNode.jsのパッケージの一つなので、まずNode.jsをインストールする必要があります。
Node.jsをインストール
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
僕が敬愛してやまない株式会社LIGさんの記事を完全にパクリ参考にさせてもらってます！
やり方はめちゃ簡単！
まずNVM(Node Version Manager)をインストール！
$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
次に
$ nvm help Node Version Manager Usage: nvm help Show this message
でhelpが表示されていればOKです！
$ nvm ls-remote v0.1.14 v0.1.15 v0.1.16
で次にインストールします！
$ nvm install v0.12.9
で確認！
$ node -v v0.12.9
問題なさそうですね！
では次に行きましょ！！
基本macのインストール手順になっているので、Windowsの人はあきらめ下記URLを参考にしてください。
gulpのインストール
ここまで来るのに長かったですね！
いよいよgulpのインストールです！
npm install -g gulp
※上記コマンドでエラーが出る場合sudoをトップにつけ管理者権限で実行します。
次にgulpを使いたいプロジェクトのディレクトリを作成、移動します！
mkdir hogehoge cd hogehoge
これで移動できました！
そしたら次に
npm init
をして、package.jsonの作成をしましょう！
いろいろ聞かれるが、基本YESで大丈夫！
gulpは全体で使うグローバルと、プロジェクト単位で使うローカルがあります！
なのでこんどはローカルのgulpをインストールしましょー！
npm install -D gulp
これでローカルにもダウンロードされました！
確認
gulp -v [00:22:48] CLI version 3.9.0 [00:22:48] Local version 3.9.0
こんなのが表示されればOK
プラグイン（パッケージ、モジュール）のインストール
gulpで行いたいタスクによってプラグイン（パッケージとかモジュールとも言う）をインストールして、いろんなことをできるようにしましょー
-
browser-sync・・・ ブラウザを自動リロードさせる
-
gulp-autoprefixer・・・ cssのベンダープレフィックスをCan I Useを元にいい感じにつけてくれる
-
gulp-csso・・・ cssの軽量化
-
gulp-if ・・・・ gulpのタスクの処理で、条件指定でいろいろできるようになる
-
gulp-imagemin・・・ 画像の軽量化
-
gulp-jshint・・・ jsの構文チェック
-
gulp-load-plugins・・・ gulp-XXX系のプラグインをまとめてロードできる
-
gulp-minify-html・・・ htmlの軽量化
-
gulp-ruby-sass・・・・ sass
-
gulp-uglify・・・ jsの軽量化
-
gulp-useref・・・ html内のcssやjsの読込み部分を変更
-
jshint-stylish・・・ gulp-jshintの出力をスタイリッシュにする
-
rimraf・・・ nodeのためのrm -rf ディレクトリの削除に使用
-
run-sequence・・・ gulpタスクの実行順序を指定できる
例えば、gulpでStylus（CSSプリプロセッサ）を入れたい場合、下記コマンドをプロジェクトフォルダ内で実行
npm install gulp-stylus
そうするとプロジェクトフォルダ内に下記のようなフォルダが作られる。
/node_modules ← gulpを動かすためのnode.jsのフォルダ
_/gulp ← gulpが入ってるフォルダ
_/gulp-stylus ← Stylusプラグインのフォルダ
このようにプラグインを追加すると/node_modulesの中にプラグインごとのフォルダが作られ、そこにプラグインのプログラムが入っている
/node_modules ← gulpを動かすためのnode.jsのフォルダ
_/gulp ← gulpが入ってるフォルダ
インストールしたプラグインを使えるようにgulpfile.jsファイルに記述
下記のような形でプロジェクトフォルダ内にgulpfile.jsファイルを新規作成。
/プロジェクトフォルダ
_gulpfile.js ← 新規作成
_/node_modules ← node.jsのやつ。gulpとか入ってる。
下記はStylusプラグインを入れた場合の例
取り込みたいプラグインをインポートする
gulp = require 'gulp' ← gulpを使う場合、必ず書く（インポートする）もの
stylus = require('gulp-stylus') ← Stylusプラグインを入れる場合
Stylusの設定
gulp.task 'stylus', () -> ## gulp.task(“タスク名”,function() {});でタスクの登録
return gulp.src 'stylus/*' ## gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定
.pipe stylus() ## pipe(行いたい処理)でsrcで取得したファイルに処理を施す
.pipe gulp.dest('css/') ## gulp.dest(“出力先”)で出力先に処理を施したファイルを出力
実際に動かす！
新しくprodディレクトリと、srcディレクトリをつくってみよー
mkdir prod
mkdir src
prodの中にcssディレクトリをsrcの中にscssディレクトリを更に作ろー！
mkdir prod/css
mkdir src/scss
その次にgulpfile.jsを作り
var gulp = require('gulp');
var sass = require('gulp-sass');
//sass
gulp.task('sass', function(){
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
gulp.task('default');
と記述してみよう！
でいざターミナルで起動！
gulp
なんか動いたっぽいけど意味が無い。。。。
そこで、
/src/scss/配下に
hogehoge.scssを作成！！
$color: #555;
$font-size: 14px;
$big-font-size: 18px;
body {
background: $color;
font-size: $font-size;
}
h1{
font-size: $big-font-size;
}
みたいなソースを書いて再度チャレンジ！
/prod/cssに
hogehoge.cssができていればうまく行ってます！
こんな少しの労力で、scssのコンパイルができるのは楽しいですね！！
まとめ
gulpの導入について振り返りも含めて書いてみました！
なかなか難しいですね。。。
いまさらgulpかよって思うかもしれませんが、未だに使いこなせていないのであんまり深くは聞かないでください！
僕は新しいもの好きなので、ツールや新技術に使われてしまっていることが多いのですが、それでも便利なものは便利なのでみなさんはいろんな新しい物を試していって自分に合う合わないが分かるまで、ツールを使い倒して欲しいです！
さて明日はわれらのまさかづ兄貴の出番です！！
めちゃ楽しみですね！！
ではでは！