GulpをつかってHTML, JS, CSS, 画像を圧縮するタスクをつくる

最近、ひさしぶりタスクランナーなしでコーディングをしました。

タスクランナーなしで作業するときは、

JSHint, a JavaScript Code Quality Tool や The W3C Markup Validation Service でバリデートをかけたり、

jshint.com

validator.w3.org

/packer/ 、 CSS Minifier などのウェブサービスでJS、CSSを圧縮したりしていたのですが、

http://dean.edwards.name/packer/dean.edwards.name

cssminifier.com

1. JSファイルの結合がめんどい
2. どうせならCSSにプレフィックスを自動で振りたい
3. 一気に画像の圧縮もしたい

と思い、gulpをつかって圧縮用のタスクランナーをつくりました。

---

リポジトリ

https://github.com/kimizuka/HigeMingithub.com

---

つかいかた

1. _srcに圧縮前のコードや画像を入れる
2. package.json の jsfiles に 結合するJSファイルを結合順に追加する
3. デフォルトタスクを実行する
4. publicフォルダに圧縮後のコードや画像が入っている

以上です。

※ 注意: タスクを実行する前にpublicフォルダを手動で消去する必要があります。

---

ソースコード

gulpfile.js

var ASSETS_PATH     = "data/",
    DIST_PATH       = "../public/",
    SRC_PATH        = "./build/",
    SUPPORT_BROWSER = ["last 2 versions"];

var packageJSON  = require('./package'),
    jsfiles      = packageJSON.jsfiles,
    jshintConfig = packageJSON.jshintConfig;

var gulp       = require("gulp"),
    rename     = require("gulp-rename"),
    plumber    = require("gulp-plumber"),
    htmlhint   = require("gulp-htmlhint"),
    htmlmin    = require("gulp-htmlmin"),
    prefixer   = require("gulp-pleeease"),
    concat     = require("gulp-concat"),
    uglify     = require("gulp-uglify"),
    jshint     = require("gulp-jshint"),
    stylish    = require("jshint-stylish"),
    imagemin   = require("gulp-imagemin"),
    pngquant   = require("imagemin-pngquant");

(function() {
  var JS_PATH = "data/js/"

  jsfiles= jsfiles.map(function(name) {
    return SRC_PATH + JS_PATH + name;
  });
})();

gulp.task("watch", function() {
  gulp.watch(SRC_PATH + "jade/**/*.jade", ["htmlhint-dev"]);
  gulp.watch(SRC_PATH + "sass/**/*.scss", ["prefixer-dev"]);
  gulp.watch(jsfiles, ["concat"]);
});

gulp.task("copy", function() {
    gulp.src(
        [SRC_PATH + ASSETS_PATH + "**/*.{mp3,ogg,wav,mp4,mov,swf}"],
        {base: "src"}
    ).pipe(gulp.dest(DIST_PATH));
});

gulp.task("htmlhint", function() {
  gulp.src(SRC_PATH + "**/*.html")
      .pipe(htmlhint())
      .pipe(htmlhint.reporter());
});

gulp.task("htmlmin", ["htmlhint"], function() {
  gulp.src(SRC_PATH + "**/*.html")
      .pipe(htmlmin({
        collapseWhitespace : true
      }))
      .pipe(gulp.dest(DIST_PATH));
});

gulp.task("prefixer", function() {
  gulp.src(SRC_PATH + ASSETS_PATH + "css/**/*.css")
      .pipe(prefixer({
        browsers   : SUPPORT_BROWSER,
        mqpacker   : true,
        sourcemaps : false,
        minifier   : true
      }))
      .pipe(gulp.dest(DIST_PATH + ASSETS_PATH + "css/"));
});

gulp.task("jshint", function() {
  return gulp.src(jsfiles)
             .pipe(jshint(jshintConfig.dev))
             .pipe(jshint.reporter(stylish));
});

gulp.task("concat", ["jshint"], function() {
  return gulp.src(jsfiles)
             .pipe(plumber())
             .pipe(concat("main.concat.js"))
             .pipe(gulp.dest(SRC_PATH + ASSETS_PATH + "js/"));
});

gulp.task("uglify", ["concat"], function() {
  gulp.src(SRC_PATH + ASSETS_PATH + "js/main.concat.js")
      .pipe(uglify())
      .pipe(rename("main.min.js"))
      .pipe(gulp.dest(DIST_PATH + ASSETS_PATH + "js/"));
});

gulp.task("jsmin", ["uglify"]);

gulp.task("imgmin", function() {
  gulp.src(SRC_PATH + ASSETS_PATH + "img/**/*.{png,jpg,gif,ico}")
      .pipe(imagemin({
        progressive       : true,
        use               : [pngquant()],
        optimizationLevel : 7
      }))
      .pipe(gulp.dest(DIST_PATH + ASSETS_PATH + "img/"));
});

gulp.task("default", ["takeout"]);
gulp.task("takeout", ["imgmin", "copy", "htmlmin", "jsmin", "prefixer"]);