WebDesign Dackel

gulpfile.coffeeからES6(ES2015)へ書きなおしてみた

gulpfile.coffeeからES6(ES2015)へ書きなおしてみた

Hatena0
Google+0
Pocket0
Feedly0

最近プライベートで使うコードをES6で書いてみたりしています。ただ、gulpfileに関してはずっとCoffeeScriptを使っていました。

メインのコードがES6なのに、gulpfileCoffeeScriptっていうのもどうなの?って感じがしたので、試しにgulpfile.coffeeを書きなおしてみました。

ES6で書くための手順

gulpCHANGELOGを見てみると、3.9.0からbabelをサポートしているみたいです。

そのためバージョンが3.9.0未満のものを使っている場合は、グローバル・ローカルどちらのgulpもアップデートしておきましょう。

$ npm update gulp && npm update -g gulp

アップデートが終わったら、babelをインストールしておきます。

$ npm i -D babel

最後に、gulpfile.coffee(gulpfile.js)をgulpfile.babel.jsというファイル名に変更します。
これでgulpのタスクを走らせた際にbabelが実行可能な状態に解決してくれるみたいです。

WebPackの設定ファイルについて

webpack.config.coffeeみたいなファイルもwebpack.config.babel.jsとすることでES6で書けます。ただ、ファイル名が凄く長くなりますね!

実際に書きなおしたタスク

それぞれ比較出来るようにシンプルなタスクを書いてみました。普段WebPackを使うことが多いのでwebpack.config.coffeeもついでに。

書きなおす前(CoffeeScript)

gulpfile.coffee

gulp = require "gulp"
$ = do require "gulp-load-plugins"
runSequence = require "run-sequence"
rimraf = require "rimraf"
webpack = require "webpack"
webpackConfig = require "./webpack.config.coffee"


gulp.task "clean", (cb) ->
  rimraf "./dist", cb


gulp.task "sass", ->
  gulp.src "./src/sass/**/*.scss"
  .pipe $.sass.sync(output: "compressed").on "error", $.sass.logError
  .pipe $.autoprefixer()
  .pipe gulp.dest "./dist/css"


gulp.task "uglify", ->
  gulp.src "./dist/js/**/*.js"
  .pipe $.uglify preserveComments: "some"
  .pipe gulp.dest "./dist/js"


gulp.task "webpack", (cb) ->
  webpack webpackConfig, (err, stats) ->
    throw new $.util.PluginError "webpack", err if err
    $.util.log "[webpack]", stats.toString()
    cb()


gulp.task "build", (cb) ->
  runSequence(
    "clean",
    ["sass", "webpack"],
    "uglify",
    cb
  )


gulp.task "watch", ["build"], ->
  $.watch "./src/coffee/**/*", ->
    gulp.start "webpack"

  $.watch "./src/sass/**/*", ->
    gulp.start "sass"


gulp.task "default", ->
  gulp.start "watch"

webpack.config.coffee

path = require "path"

module.exports =
  entry:
    app: "./src/coffee/app.coffee"
  output:
    path: path.join __dirname, "dist/js"
    filename: "[name].bundle.js"
  devtool: "#source-map"
  resolve:
    extensions: ["", ".js", ".coffee", ".webpack.js", ".web.js"]
  module:
    loaders: [
      {test: /\.coffee$/, loader: "coffee"}
    ]

書きなおした後(ES6)

gulpfile.babel.js

import gulp from "gulp"
import gulpLoadPlugins from "gulp-load-plugins"
import runSequence from "run-sequence"
import rimraf from "rimraf"
import webpack from "webpack"
import webpackConfig from "./webpack.config.babel.js"

let $ = gulpLoadPlugins();


gulp.task("clean", (cb) => {
  rimraf("./dist", cb);
});


gulp.task("sass", () => {
  gulp.src("./src/sass/**/*.scss")
  .pipe($.sass.sync({output: "compressed"}).on("error", $.sass.logError))
  .pipe($.autoprefixer())
  .pipe(gulp.dest("./dist/css"));
});


gulp.task("uglify", () => {
  gulp.src("./dist/js/**/*.js")
  .pipe($.uglify({preserveComments: "some"}))
  .pipe(gulp.dest("./dist/js"));
});


gulp.task("webpack", (cb) => {
  webpack(webpackConfig, (err, stats) => {
    if( err ) throw new $.util.PluginError("webpack", err);
    $.util.log("[webpack]", stats.toString());
    cb();
  });
});


gulp.task("build", (cb) => {
  runSequence(
    "clean",
    ["sass", "webpack"],
    "uglify",
    cb
  );
});


gulp.task("watch", ["build"], () => {
  $.watch("./src/coffee/**/*", () => {
    gulp.start("webpack");
  });

  $.watch("./src/sass/**/*", () => {
    gulp.start("sass");
  });
});


gulp.task("default", () => {
  gulp.start("watch");
});

webpack.config.babel.js

import path from "path"

export default {
  entry: {
    app: "./src/js/app.js"
  },
  output: {
    path: path.join(__dirname, "dist/js"),
    filename: "[name].bundle.js"
  },
  devtool: "#source-map",
  resolve: ["", ".js", ".jsx", ".webpack.js", ".web.js"],
  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: "babel?optional[]=runtime"}
    ]
  }
};

書きなおしてみた感想

参考にさせていただいたサイトでも書かれていましたが、CoffeeScriptで書いた時の「見やすい!書きやすいっ!」みたいな驚きは無いように思いました。

あまり凝ったものでは無い今回の様なタスクだと、ES6っぽさみたいなのがアロー関数くらいになる気がします。

特別な理由がないようであれば、タスクの記述に関してはもうしばらくCoffeeScriptにお世話になりそうです。。

まとめ

  1. gulp3.9.0以上にアップデート
  2. babelをインストール
  3. ファイル名をgulpfile.babel.jsに変更
  4. でも、個人的にはCoffeeScriptの方が書きやすいかも

参考サイト

[追記あり]gulpfileそのものをES6で書く