Help us understand the problem. What is going on with this article?

GulpでCoffeeScript、Sassをコンパイル

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

teitei_tk
Software Engineer
https://teitei-tk.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away