gulp で、CoffeeScript をコンパイルして concat して SourceMap 出力して SCSS もコンパイルして watch する

とりあえず手元では動いているようなので上げておく。

• CoffeeScript をコンパイルして
• できた JavaScript ファイルを全部結合して
• sourcemap ファイルを出力して
• ついでに scss もコンパイルして
• ファイルの変更を監視する

という gulpfile です。

gulpfile.coffee

gulp       = require 'gulp'
coffee     = require 'gulp-coffee'
concat     = require 'gulp-concat'
plumber    = require 'gulp-plumber'
sass       = require 'gulp-sass'
sourcemaps = require 'gulp-sourcemaps'


files =
    coffee: './app/**/*.coffee'
    scss  : './assets/css/**/*.scss'


gulp.task 'js', ->
    gulp.src files.coffee
        .pipe plumber()
        .pipe sourcemaps.init
            loadMaps: true
        .pipe coffee
            bare: true
        .pipe concat 'app.js'
        .pipe sourcemaps.write '.',
            addComment: true
            sourceRoot: '/src'
        .pipe gulp.dest './app'


gulp.task 'css', ->
    gulp.src files.scss
        .pipe plumber()
        .pipe sass()
        .pipe gulp.dest './assets/css'


gulp.task 'watch', ['build'], ->
    gulp.watch files.coffee, ['js']
    gulp.watch files.scss, ['css']


gulp.task 'build', ['js', 'css']
gulp.task 'default', ['build']

package.json

{
    "name": "gulp-coffee-sass",
    "version": "1.0.0",
    "devDependencies": {
        "coffee-script": "*",
        "gulp": "*",
        "gulp-coffee": "*",
        "gulp-concat": "*",
        "gulp-plumber": "*",
        "gulp-sourcemaps": "*",
        "gulp-sass": "*"
    }
}

つかいかた

gulp

でビルド、
指定フォルダの *.coffee ファイルをすべてコンパイルして1つのファイルにまとめ、SourceMap ファイルを出力。また、指定フォルダの *.scss もコンパイルします。

gulp watch

で監視に入ります。

---

一応 github に置きました

• github.com/matsuoshi/gulp-coffee-concat-sourcemaps-sass-watch

gulp 昨日使い始めたばっかりなので、見よう見まねです。おかしいとこなどありそう。