はじめてのgulp

フロント側はgulpを使うと幸せになれるっぽい

↑どこで聞いたかは忘れました。
けどgulp色々書いておくと便利なことをよしなにやってくれるっぽい。
っていうことでひとまず触ってみた。
簡単な処理を作ってみる。

とりあえずプロジェクトファイルをつくってinitする

$ mkdir hoge && cd hoge
$ npm init

色々インスコ

$ npm install -g gulp 
$ npm install --save-dev gulp
$ npm install --save-dev gulp-imagemin //これは画像圧縮してくれるプラグイン。

続いてgulpfileを作る。
ここにgulpでやってほしい処理をシコシコ書いていく。

gulpfile.js

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");//さっきのプラグイン追加

//gulpのタスク
gulp.task('imageMinTask', function(){ //「imageMinTask」のとこは自由な名前でおｋ
  gulp.src("images/*.png")//処理したいファイル
      .pipe(imagemin())//ここでminify
      .pipe(gulp.dest("min_images"));//出力するフォルダ
});

以上でタスクは書けたので、

タスク実行

$ gulp imageMinTask

でimagesフォルダに置いておいた画像が圧縮されておりました。パチパチ。

ただ毎度毎度

$ gulp imageMinTask

するのはめんどいので
watchタスクで書き直す

gulpfile.js

//gulpファイル読み込み
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");


gulp.task("imageMinTask",function(){
  gulp.src("images/*.png")
      .pipe(imagemin())
      .pipe(gulp.dest("min_images"));
});


gulp.task("watch",function(){
  gulp.watch(['images/**'],['imageMinTask']);
});

で、タスク実行

$ gulp watch

こんな感じです。