カテゴリー: gulp

今日は気分を変えてタスクランナーを試したいと思います。
タスクランナーといえばGruntとかgulpが有名ですが、
node.jsで動くgulpが後発で使いやすそうなのでこちらで試してみます。
環境はmac os X yosemite 10.10.5

まずはnode.jsをインストール

brew install node.js

バージョンを確認

node -v

gulpをグローバルにインストール

npm install -g gulp

作業ディレクトリの作成と移動

mkdir gulp_test
cd gulp_test

package.jsonの作成

npm init

gulpをローカルにインストール

npm install -D gulp

プラグインをローカルへインストール
gulp-cssminとgulp-renameをインストール

npm install -D gulp-cssmin gulp-rename

gulp-cssmin:cssを圧縮するプラグイン
gulp-rename:名前を変更するプラグイン

gulpfile.js の作成。
package.jsonと同階層に手動でgulpfile.jsを作成し、下記のように記述

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('cssmin', function () {
  gulp.src('css/*.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
    gulp.watch('css/*.css', ['cssmin'])
});

gulp.task('default', ['cssmin','watch']);

実行

gulp

実行中は該当のディレクトリ内のcssに変更を加えると
自動でmin.cssという拡張子で同名の圧縮cssファイルが作成、更新される。