CoffeeScript
Node.js
Sass
gulp

GulpでCoffeeScript、Sassをコンパイル

More than 3 years have passed since last update.


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のアプローチ "なぜグローバルとローカルにインストールが必要なのか"