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フォルダができていて、その中に圧縮されたファイルがある。やったー。
追記:既にかなり古い内容となってしまっていたため、書き直し中。