Gulpのすすめ
お疲れ様です。谷垣です。
今回（といっても初回ですが）はタスクランナーのgulpが便利でよいですよということで紹介をしたいと思います。
gulp.js - the streaming build system
1. なにができるの？
簡単に言うとコーディングのあれやこれやを自動でやってくれる「無くてもいいんだけどあったら便利だよね」という感じのツールです。
プラグインを突っ込んで機能を追加する形になりますが、僕の環境では
- css周り（Sass, 自動プレフィックス）
- ファイル保存時にブラウザでリアルタイムプレビュー
- phpみたいにhtml(ejs)をパーツ化→インクルード
- html, css, jsのソースを圧縮・整形
- スタイルガイドの作成（試行中）
という用途で使用しています。
その他にも画像を自動で圧縮してくれたり、構文をチェックしてくれたり、cssで使われていないゴミセレクタを削除してくれたり、いろんなプラグインがあります。
2. 使ってみて実際どう？
便利だなーと思ってます。
特にブラウザの自動更新とejsが良い。
新規サイトを作るときには毎回gulpプラグインのインストールが必要ですが、その手間を考えても積極的におすすめしたいレベル。
3. やってみる
3-1. node.jsをインスコ
node.jsが必要なのでいれてください。
バージョンによってプラグインのエラーが出たりするので、nodistでインスコすると便利です。
参考
node.js インストール備忘録（windows7） - Qiita
3-3. gulpをプロジェクトフォルダにインスコ
グローバルにインストールしたのとは別に、プロジェクトのフォルダ単位でもgulpをインストールします。
プロジェクトのルートにしたいフォルダで
「shift + 右クリック」→「コマンドウィンドウをここで開く」して、
npm install gulp --save-dev
と打ってエンターマン。
「node_modules」とかいうフォルダが生成されます。
これより以下のコマンドは全部、このルートにしたいフォルダで打ち込んでください。
3-4. package.jsonを作成
次にpackage.jsonを作成します。
この後入れていくプラグインの情報などがこのファイルに書かれていきます。
npm init
と叩くと色々聞かれるので、とりあえずエンターレンダーしましょう。
無事ファイルが作成されたらOKです。
一度作ったファイルは使い回しできるので、自分用のpackage.jsonを作っておくと幸せです。
3-5. プラグインをインスコ
ではいよいよプラグインを入れましょう。
とりあえず試しにSassを使えるようにしてみます。
コマンドプロンプトで
npm install gulp-sass --save-dev
と叩きます。
これでgulp-sassがインストールされました。
3-6. gulpfile.jsを作成
最後にプラグインを動かすための記述を、gulpfile.jsというファイルを作ってそこに書いていきます。
Sassのコンパイルを行う最低限のソースを書いてみました。ディレクトリ構造も下記の通り合わせて下さい。
gulpfile.js
var gulp = require('gulp'), // gulp本体 sass = require('gulp-sass'); // sassプラグイン gulp.task('default', function() { // タスクのコマンド名（gulp） gulp .src('src/scss/**/*.scss') // 'src/scss/'以下の全ての.scssファイルを対象にして、 .pipe(sass()) // Sassコンパイルするよ。 .pipe(gulp.dest('dist/css')); // コンパイルしたのは'dist/css/'以下に吐き出すよ。 });
プロジェクトフォルダ/ │ ├ package.json │ └ gulpfile.js ├ src/ （作業フォルダ） │ └ sass/ │ └ hoge.scss └ dist/ （出力フォルダ） └ css/
これで準備OKです。
4. もう少し便利に
今のままだといちいちコマンド打ってコンパイルしなきゃいけないので、
自動コンパイルにもしてみましょう。
gulpfile.jsを書き換えます。
var gulp = require('gulp'), // gulp本体 sass = require('gulp-sass'); // sassプラグイン gulp.task('sass', function() { // タスクのコマンド名（sass） gulp .src('src/scss/**/*.scss') // 'src/scss/'以下の全ての.scssファイルを対象にして、 .pipe(sass()) // Sassコンパイルするよ。 .pipe(gulp.dest('dist/css')); // コンパイルしたのは'dist/css/'以下に吐き出すよ。 }); gulp.task('default', function(){ // タスクのコマンド名（gulp） gulp.watch('src/scss/**/*.scss', ['sass']); // 'src/scss/'以下の.scssファイルに変更があったら、コマンド'sass'を走らせるよ。 });
'gulp.watch'はファイルの変更を監視する機能です。
タスクを実行してみます。
gulp
これでファイルの監視が始まりました。
'src/sass/hoge.scss'を編集して保存すると、自動的に'dist/css/hoge.css'が更新されます。
5. もっと便利に
じゃあBrowsersyncも入れてみます。
Browsersyncはブラウザでのプレビュー環境をつくり、監視しているhtmlやcss、jsに変更があると自動的に更新をかけてくれるやつです。
npm install browser-sync --save-dev
でインストールします。
gulpfile.jsとディレクトリ構造は以下。
ついでにブラウザ表示用のindex.htmlも作っておいてください。
var gulp = require('gulp'), // gulp本体 sass = require('gulp-sass'), // sassプラグイン browser = require('browser-sync'); // Browsersyncプラグイン gulp.task('server', function() { // タスクのコマンド名（server） browser({ // Browsersyncを起動 server: { baseDir: 'dist' // このディレクトリをルートとする。 } }); }); gulp.task('sass', function() { // タスクのコマンド名（sass） gulp .src('src/scss/**/*.scss') // 'src/scss/'以下の全ての.scssファイルを対象にして、 .pipe(sass()) // Sassコンパイルするよ。 .pipe(gulp.dest('dist/css')) // コンパイルしたのは'dist/css/'以下に吐き出すよ。 .pipe(browser.reload({ // ブラウザのリロードを有効にする。 stream: true })); }); gulp.task('watch', function() { // タスクのコマンド名（watch） gulp.watch('src/scss/**/*.scss', ['sass']); // sassファイルの監視コマンド }); gulp.task('default', ['watch', 'server']); // タスクのコマンド名（gulp）
プロジェクトフォルダ/ │ ├ package.json │ └ gulpfile.js ├ src/ （作業フォルダ） │ └ sass/ │ └ hoge.scss └ dist/ （出力フォルダ） ├ index.html └ css/
「gulp」を叩くと、localhost:3000をURLにしてブラウザが立ち上がります。
index.htmlが正しく書かれていたら、それが表示されているはずです。
この状態でhoge.scssを変更・保存すると、自動的にブラウザがリロードされて新しく書いたスタイルが適応されます。
