gulpを触ってみよう【旧】

gulpとは

スクランナー。あれやってこれやってというタスクを登録し、一気にやってもらうやつ。フロントエンド用。似たようなものにGruntがある。
ちなみもう脱gulpな動きもある
http://qiita.com/chuck0523/items/dafdbd19c12efd40e2de
らしいのだけど、とりあえずやってみようというところで、gulpを導入する。

gulpの導入

Node.jsのインストール

windowsを想定。 公式サイト(https://nodejs.org/en/ )から最新版のNodeをいれる。 インストールができたらターミナルで以下コマンドを入力しバージョンが表示されるか確認。

>node -v
v0.12.6

gulpのグローバルインストール

PCのどこでも使えるようにグローバルでインストール。ターミナル開いてすぐのとこで以下コマンドを入れる。

>npm install --global gulp-cli
>gulp -v

※もし過去にgulpを入れたことが有ったら、衝突を防ぐため(npm rm –global gulp)と入力して一旦gulpを削除すること。

gulp使用フォルダの作成

gulpを実際に使用したいフォルダを作成する。(作成したフォルダにhtmlやcssをいれることになる。既にあるフォルダにいれるのなら、そのプロジェクトのルートディレクトリに入れるといいと思う。)以下このフォルダのことをプロジェクトフォルダとする。

package.jsonの作成

プラグインの定義とかを記入するpackage.jsonを作成する。 ターミナルでgulpを使用したいプロジェクトフォルダへ移動し、以下コマンドを記入。

>npm init

※なんか沢山設定値を聞かれるけど全部空欄でもいいらしいので-yオプションを付けて質問回避してもいいのでは。 コマンド入力後にプロジェクトフォルダを開くとpackage.jsonができているはず。

gulpのローカルインストール

プロジェクトフォルダへ移動し、以下コマンドを入力。

>npm install --save-dev gulp

インストール後、プロジェクトフォルダ直下にgulpfile.jsというjsファイルを作成し、以下を記述。

//plug-in
var gulp = require('gulp');

プラグインのインストール

通常、プラグインのインストールとアンインストールは以下コマンドで行う。

// プラグインのインストール
npm install プラグイン名 --save-dev
 
// プラグインのアンインストール
npm uninstall プラグイン名 --save-dev

複数プラグインをまとめて一括とかもできる(調べたらわかる)
今回は
cssを圧縮するプラグイン (ミニファイ) をインストールする。(随時更新)

gulp-minify-cssのインストール

以下コマンドを入力。

npm install gulp-minify-css --save-dev

以下をgulpfile.jsに追記。

//CSS圧縮
gulp.task('minify-css', function() { //minify-cssがタスク名
  gulp.src("css/*.css") //対象ファイル(*はすべてという意味)
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css/'));
});

ちなみに現在のプロジェクトフォルダはこんな感じ

ディレクトリ構成例(■はディレクトリ)
■mysite----
 index.html
 package.json
   gulpfile.js
   ■node_modules 
 ■css----
  mystyle.css
 ■js----
  myscript.js

使ってみる

gulpに登録したタスクを実行してみる。タスコの実行は、「gulp タスク名」でできる。 以下をターミナルで入力。

gulp minify-css

実行が終わると、プロジェクトフォルダにdistフォルダができていて、その中に圧縮されたファイルがある。やったー。

追記:既にかなり古い内容となってしまっていたため、書き直し中。