Gulp個人的メモまとめ
とある大型案件でGulpを使う事になったので、自分の為に
入門用のまとめを書く事にしました。
まずは環境を整える
node.jsのインストール
公式サイトからDLしてインストール。
http://nodejs.org/
http://nodejs.jp/
黒い画面で「node -v」でVerかくにん。
上記でインストールが成功したにも関わらず、node -vでエラーが出たら
[コントロールパネル]→[システム]→[システムの詳細設定]→[環境変数]を開き、PATHを選んで[編集]より、変数値の末尾にインストールされたnode.exeのフォルダのパスを「;nodeフォルダパス」を追加。
Gulpのインストール
黒い画面で
Win
「npm install gulp -g」
mac
「sudo npm install gulp -g」
と入れてENTER!
これでグローバル環境にインストールができる。
とりあえず使ってみる
まずは任意のディレクトリに移動する為に「cd」コマンドを使う。
黒い画面で「cd ディレクトリパス」で移動できる。
とりあえずpacage.jsonを作る
黒い画面で「npm init」と入れればいい。
適当にEnter押して作成しよう（後で変えればいい）
ローカル環境にもGulpを入れようね
黒い画面で「npm install gulp --save-dev」でOK。
※Gruntと同じ。
プラグインインストールしましょうね
黒い画面にて「npm install プラグイン名 --save-dev」でインストールできる。
削除する時は「isntallをuninstall」にするだけ。
プラグインは
http://gulpjs.com/plugins/
http://qiita.com/oreo3@github/items/0f037e7409be02336cb9
あたりを見ればいいと思います。
gulpfile.js を作成する
Gulp版設定ファイルの事。
プラグインとかをインポートしたり、プラグインの設定を書く。
プラグインのインポートは
var gulp = require("gulp");
みたいな感じで。
ディレクトリの設定も
var dir = {src: '_src',img: '_img'}
みたいな感じで書けばいいとおもいます。
タスクの実行
タスクの実行は
「gulp 変数名（インポートした時につけたやつ）」
でOK。
ただ、タスク毎にこれをやるのは面倒すぎるのでそういったものは全部監視しましょうね。
タスクの監視
gulp.task("default", function() {
gulp.watch(ファイルパターン,実行したいタスク);
});
な感じで監視するタスクを書いておく。
黒い画面で 「gulp」と打てば、後はファイルの変更があれあ処理してくれると思う。
