1,716 views

この記事は最終更新から 2704日 が経過しています。

1. やりたいこと

過去の３記事でやったことを一つのスクリプトにまとめて書いてみる。
(50) Node.js + gulpでcssファイルを自動圧縮
(51) Node.js + gulpで画像ファイルを自動圧縮
(52) Node.js + gulpでJavaScriptファイルを自動圧縮

2. やってみた！

実現手段は簡単だ。
gulp.watch()の引数で複数のタスクを指定すればよいのだ。

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var minifyJs = require('gulp-uglify');
var isChanged = require('gulp-changed');
var minifyImg = require('gulp-imagemin');
var minifyImg_JPG = require('imagemin-jpeg-recompress');
var minifyImg_PNG = require('imagemin-pngquant');
var minifyImg_GIF = require('imagemin-gifsicle');

var path = {
  src : "01_src",
  dst : "02_dst"
}

gulp.task('minify-css', function() {
    gulp.src(path.src + "/**/*.css")
        .pipe(cleanCSS())
        .pipe(gulp.dest(path.dst));
});
gulp.task('minify-js', function() {
    gulp.src(path.src + "/**/*.js")
        .pipe(minifyJs())
        .pipe(gulp.dest(path.dst));
});
gulp.task('minify-img', function() {
    gulp.src(path.src + "/**/*.+(jpg|jpeg|png|gif)")
        .pipe(isChanged(path.dst))
        .pipe(minifyImg([minifyImg_JPG(),minifyImg_PNG(),minifyImg_GIF()]))
        .pipe(gulp.dest(path.dst));
});
 
gulp.task('watch', function() {
    gulp.watch(path.src + "/**/*",['minify-css', 'minify-js', 'minify-img']);
});