【初心者向け】gulpをはじめる for Mac

gulpの導入について。
簡単に流れを説明します。

※Macでの実行結果となります。

＜目次＞
【１】nodebrew（Mac版バージョン管理ツール）のインストール
【２】Node.jsのインストール
【３】gulpのインストール
【４】package.jsonの作成
【５】npmのインストール
【６】gulpfile.jsの作成
【７】実行

【１】nodebrew（Mac版バージョン管理ツール）のインストール

nodebrewはPC（ローカル）でバージョン管理（バージョンごとに使い分けたり、任意のNode.jsをインストールしたり）するためのツール。

（１）nodebrewをインストール

$ curl -L git.io/nodebrew | perl - setup

（２）PATHを通す

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

（３）設定を読み直す

$ source ~/.bashrc

【２】Node.jsのインストール

$ node -v

インストールされていればNode.jsのバージョン番号が、そうでなければ-bash: node: command not foundなどと表示される。

インストールされていなければ、下記よりインストール。
http://nodejs.org/

【３】gulpのインストール

$ sudo npm install -g gulp

上記完了したら、バージョンの確認。

$ gulp -v

[12:09:29] CLI version 3.9.1
[12:09:29] Local version 3.9.1

と出ればOK。

ここまでが下準備。

★gulpのインストール（ローカル）

gulpはグローバルだけでなくローカル（プロジェクト毎）にもインストールする必要があります。

$ sudo npm install gulp --save-dev

【４】package.jsonの作成

主なプラグインをインストール。
基本、案件ごとに使い回しができるように設定をしておく。

その他、プラグインは案件に応じて選択すること。

• gulp-tinypng-compress（https://www.npmjs.com/package/gulp-tinypng-compress）
• gulp-prettify（https://www.npmjs.com/package/gulp-prettify）
• gulp-html5-lint（https://www.npmjs.com/package/gulp-html5-lint）
• gulp-sass（https://www.npmjs.com/package/gulp-sass）
• gulp-autoprefixer（https://www.npmjs.com/package/gulp-autoprefixer）
• gulp-frontnote（https://www.npmjs.com/package/gulp-frontnote）

【５】npmのインストール

package.jsonを作成したら、プロジェクトのルートで下記を実行。
package.jsonで設定している必要なプラグインをまとめてインストールできる。

$ npm install

※node_modulesフォルダ、package.jsonが生成され、必要なモジュールが配置される

【６】gulpfile.jsの作成

gulpfile.js はタスクのレシピ。
package.jsonで指定したモジュールを読み込むと、使えるようになる。

＜サンプルコード＞

var gulp         = require('gulp');
var cssimport    = require('gulp-cssimport');
var autoprefixer = require('gulp-autoprefixer');
var minifyCss    = require('gulp-minify-css');
var rename       = require('gulp-rename');

gulp.task('style', function(){
  return gulp.src('src/style.css')
    .pipe(cssimport())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(minifyCss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('dist/'));
});

参考）プラグイン
http://gulpjs.com/plugins/

【７】実行

$ gulp style

正しく実行されれば、dist/フォルダにstyle.min.cssというファイルができる。

※Ctrl + C

で、プログラムを中断できる。

以上です。

こちらの記事もどうぞ。
【初心者向け】gulp触るなら覚えておいたほうが良いコマンド3選＋α
http://qiita.com/kobatatakayuki/items/0fa9faf8003c713ce5d5