Gulp作業メモ

少し前に本格的にGruntから乗り換えました。

1. デフォルトタスクで_srcをルートにサーバを立ててファイルを監視
2. takeoutタスクでpublic以下に圧縮したソースをコピー

というものになっています。

ES6用

https://github.com/kimizuka/GulpES6github.com

gulpfile.babel.js

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

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

var gulp       = require("gulp"),
    del        = require("del"),
    babel      = require("gulp-babel"),
    rename     = require("gulp-rename"),
    plumber    = require("gulp-plumber"),
    jade       = require("gulp-jade"),
    htmlhint   = require("gulp-htmlhint"),
    compass    = require("gulp-compass"),
    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"),
    webserver  = require("gulp-webserver");

(function() {
  var JADE_PATH = "jade/**/";

  pagelist = pagelist.map(function(name) {
    return SRC_PATH + JADE_PATH + name;
  });
})();

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

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

})();

(function() {
  if (/\/$/.test(metadata.url)) {
    metadata.og_image_path = metadata.og_image_path.replace(/^\//, "");
  }
})();

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

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("del", function() {
  del([DIST_PATH]);
});

gulp.task("jade-dev", function() {
  return gulp.src(pagelist)
             .pipe(plumber())
             .pipe(jade({
               pretty : true,
               locals : {
                meta    : metadata,
                isDev   : true,
                isJsMin : false
               }
             }))
             .pipe(gulp.dest(SRC_PATH));
});

gulp.task("jade-preview", function() {
  return gulp.src(pagelist)
             .pipe(plumber())
             .pipe(jade({
               pretty : true,
               locals : {
                meta    : metadata,
                isDev   : true,
                isJsMin : true
               }
             }))
             .pipe(gulp.dest(DIST_PATH));
});

gulp.task("jade", function() {
  return gulp.src(pagelist)
             .pipe(plumber())
             .pipe(jade({
               pretty : true,
               locals : {
                meta    : metadata,
                isDev   : false,
                isJsMin : true
               }
             }))
             .pipe(gulp.dest(DIST_PATH));
});

gulp.task("htmlhint-dev", ["jade-dev"], function() {
  gulp.src(SRC_PATH + "*.html")
      .pipe(htmlhint())
      .pipe(htmlhint.reporter());
});

gulp.task("htmlhint-preview", ["jade-preview"], function() {
  gulp.src(SRC_PATH + "*.html")
      .pipe(htmlhint())
      .pipe(htmlhint.reporter());
});

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

gulp.task("compass", function() {
  return gulp.src(SRC_PATH + "sass/**/*.scss")
             .pipe(plumber())
             .pipe(compass({
               config_file : SRC_PATH + "config.rb",
               sourcemap   : true,
               sass        : SRC_PATH + "sass",
               css         : SRC_PATH + ASSETS_PATH + "css"
             }));
});

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

gulp.task("prefixer", ["compass"], 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("babel", ["concat"], function() {
  return gulp.src(SRC_PATH + ASSETS_PATH + "js/main.concat.js")
             .pipe(babel({presets: ['es2015']}))
             .pipe(gulp.dest(SRC_PATH + ASSETS_PATH + "js/"));
});

gulp.task("uglify", ["babel"], 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("webserver", function() {
  gulp.src(SRC_PATH)
      .pipe(webserver({
        port             : (Math.random() * 1000 | 0) * 10,
        livereload       : true,
        directoryListing : false,
        open             : true
      }));
});

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

gulp.task("default", ["webserver", "watch"]);
gulp.task("clean");
gulp.task("preview", ["imgmin", "copy", "htmlhint-preview", "uglify", "prefixer"]);
gulp.task("takeout", ["imgmin", "copy", "htmlhint", "uglify", "prefixer"]);

ES5用

https://github.com/kimizuka/HigeGulpgithub.com

gulpfile.js

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

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

var gulp       = require("gulp"),
    del        = require("del"),
    rename     = require("gulp-rename"),
    plumber    = require("gulp-plumber"),
    jade       = require("gulp-jade"),
    htmlhint   = require("gulp-htmlhint"),
    compass    = require("gulp-compass"),
    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"),
    webserver  = require("gulp-webserver");

(function() {
  var JADE_PATH = "jade/**/";

  pagelist = pagelist.map(function(name) {
    return SRC_PATH + JADE_PATH + name;
  });
})();

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

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

})();

(function() {
  if (/\/$/.test(metadata.url)) {
    metadata.og_image_path = metadata.og_image_path.replace(/^\//, "");
  }
})();

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("del", function() {
  del([DIST_PATH]);
});

gulp.task("jade-dev", function() {
  return gulp.src(pagelist)
             .pipe(plumber())
             .pipe(jade({
               pretty : true,
               locals : {
                meta    : metadata,
                isDev   : true,
                isJsMin : false
               }
             }))
             .pipe(gulp.dest(SRC_PATH));
});

gulp.task("jade-preview", function() {
  return gulp.src(pagelist)
             .pipe(plumber())
             .pipe(jade({
               pretty : true,
               locals : {
                meta    : metadata,
                isDev   : true,
                isJsMin : true
               }
             }))
             .pipe(gulp.dest(DIST_PATH));
});

gulp.task("jade", function() {
  return gulp.src(pagelist)
             .pipe(plumber())
             .pipe(jade({
               pretty : true,
               locals : {
                meta    : metadata,
                isDev   : false,
                isJsMin : true
               }
             }))
             .pipe(gulp.dest(DIST_PATH));
});

gulp.task("htmlhint-dev", ["jade-dev"], function() {
  gulp.src(SRC_PATH + "*.html")
      .pipe(htmlhint())
      .pipe(htmlhint.reporter());
});

gulp.task("htmlhint-preview", ["jade-preview"], function() {
  gulp.src(SRC_PATH + "*.html")
      .pipe(htmlhint())
      .pipe(htmlhint.reporter());
});

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

gulp.task("compass", function() {
  return gulp.src(SRC_PATH + "sass/**/*.scss")
             .pipe(plumber())
             .pipe(compass({
               config_file : SRC_PATH + "config.rb",
               sourcemap   : true,
               sass        : SRC_PATH + "sass",
               css         : SRC_PATH + ASSETS_PATH + "css"
             }));
});

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

gulp.task("prefixer", ["compass"], 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("webserver", function() {
  gulp.src(SRC_PATH)
      .pipe(webserver({
        port             : (Math.random() * 1000 | 0) * 10,
        livereload       : true,
        directoryListing : false,
        open             : true
      }));
});

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

gulp.task("default", ["webserver", "watch"]);
gulp.task("clean");
gulp.task("preview", ["imgmin", "copy", "htmlhint-preview", "uglify", "prefixer"]);
gulp.task("takeout", ["imgmin", "copy", "htmlhint", "uglify", "prefixer"]);