gulpfileをCoffeeScriptで書いてみる

はじめに

Gulpのタスクは増えてくるとgulpfile.js内の記述がどうしても多くなってきます。
今回はCoffeeScriptを導入してgulpfileを書き換え、またCoffeeScriptコンパイルのタスクを新しく書いていきます。

もくじ

CoffeeScriptの環境を作る

CoffeeScriptを使えるようにする

sudo npm install --save-dev coffee-script

gulpfile.jsに下記を入力

require('coffee-script/register');
require('./gulpfile.coffee');

上記で同じディレクトリの「gulpfile.coffee」を読みにいってくれます。

gulpfileを書き換えてみる

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');

//Javascriptのタスク
gulp.task('js', function() {
  gulp.src(['_js/*.js'])
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest('js'))
});

試しに上記のタスクををCoffeeScriptで書き換えてみます。

gulp = require 'gulp'
plumber = require 'gulp-plumber'
uglify = require 'gulp-uglify'

#Javascriptのタスク
gulp.task 'js', ->
  gulp.src '_js/*.js'
    .pipe plumber()
    .pipe uglify()
    .pipe gulp.dest 'js'

CoffeeScriptコンパイルのタスク

「gulp-coffee」をインストールする

sudo npm install --save-dev gulp-coffee

gulpfileにタスクを追加する

coffee = require 'gulp-coffee'

#CoffeeScriptのタスク
gulp.task 'coffee', ->
  gulp.src '_coffee/*.coffee'
    .pipe plumber()
    .pipe coffee()
    .pipe uglify()
    .pipe gulp.dest 'js'

パスはあくまでも例です。

さいごに

CoffeeScriptにすると単純に記述量が減るので、視認性が良くなります。
タスクが多くなっても管理がしやすそうですね。参考になればと思います。