はじめに

はじめまして！

株式会社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を参考にしてください。

node.js インストール備忘録（windows7）

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を作り

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かよって思うかもしれませんが、未だに使いこなせていないのであんまり深くは聞かないでください！

僕は新しいもの好きなので、ツールや新技術に使われてしまっていることが多いのですが、それでも便利なものは便利なのでみなさんはいろんな新しい物を試していって自分に合う合わないが分かるまで、ツールを使い倒して欲しいです！

さて明日はわれらのまさかづ兄貴の出番です！！
めちゃ楽しみですね！！

ではでは！