GulpでCoffeeScript、Sassをコンパイル

Gurntに比べての利点って何？

こちらと、こちらの記事に詳細な比較が書かれています。

Install

$ npm install -g gulp
$ npm install --save-dev gulp gulp-coffee gulp-sass

Coffee Compile

/path/to/coffee/source/にCoffeeのファイルがあったとして、
/path/to/js/dest/にCompileして生成されたjsファイルを吐き出す。

gulpfile.coffee

gulp   = require 'gulp'
coffee = require 'gulp-coffee'

gulp.task 'compile-coffee', () ->
    gulp.src 'path/to/coffee/source/**/*.coffee'
        .pipe coffee()
        .pipe gulp.dest('/path/to/js')

実行

$ gulp compile-coffee

Sass Compile

/path/to/sass/source/にscsssのファイルがあったとして、
/path/to/css/dest/にCompileして生成されたcssファイルを吐き出す。

gulpfile.coffee

gulp = require 'gulp'
Sass = require 'gulp-sass'

gulp.task 'compile-sass', () ->
    gulp.src '/path/to/sass/source/**/*.scss'
        .pipe sass()
        .pipe gulp.dest('/path/to/css')

実行

$ gulp compile-sass

Compileしたjs, cssファイルを一つに結合する。

HTTPリクエストを軽減するために、RailsのAssetPipelineのように、js, cssを一つのファイルに纏める。

install

$ npm install --save-dev gulp-uglify gulp-minify-css gulp-concat

gulpfile.coffee

gulp        = require 'gulp'
coffee      = require 'gulp-coffee'
uglify      = require 'gulp-uglify'
sass        = require 'gulp-sass'
minifyCss   = require 'gulp-minify-css'
concat      = require 'gulp-concat'

# compile coffeescript files
gulp.task 'compile-coffee', () ->
    gulp.src '/path/to/coffee/**/*.coffee'
        .pipe coffee()
        .pipe gulp.dest('/path/to/js')

# ugilify js file and concat javascript file to application.js
gulp.task 'compile-js', () ->
    compileFileName = 'application.js'
    gulp.src ['/path/to/js/**/*.js' '!/path/to/js/' + compileFileName]
        .pipe concat(compileFileName)
        .pipe uglify(preserveComments:'some')
        .pipe gulp.dest('/path/to/js')

# compile sass file
gulp.task 'compile-sass', () ->
    gulp.src '/path/to/sass/**/*.scss'
        .pipe sass()
        .pipe gulp.dest('/path/to/css/')

gulp.task 'compile-css', () ->
    compileFileName = 'application.css'
    gulp.src [ '/path/to/css/**/*.css',
                 '!/path/to/css/' + compileFileName ]
        .pipe concat(compileFileName)
        .pipe minifyCss()
        .pipe gulp.dest('/path/to/css')

gulp.task 'compile', ['compile-coffee', 'compile-sass', 'compile-js', 'compile-css']

実行

$ gulp compile

実行後、/path/to/js/application.js、/path/to/css/application.cssが作成されていることを確認してください。

参考

Introduction to Gulp.js with practical examples
Grunt vs Gulp - Beyond the Numbers
gulp vs Grunt
gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"