Another Sky - Web Development, Photography, Travel.

「gulpでSassのコンパイルやlivereloadなどを試してみた」の記事を書いて早一年。普段Gruntを使っているのでgulpの情報はほとんど追っていないのですが、プラグイン等がよくアップデートされているような雰囲気を感じます。

最近JavaScriptとその動作サンプルファイルを書いているのですが、たまにはgulpを使ってみようかと思ってgulpfileを書いたので、2015年版gulpfileとして記録しておこうと思います。

Note

• HTTPサーバーとLivereloadは、BrowserSyncで実現してみました。gulp-connectはブラックリストに入っているし（まぁ使っても良いのだけれど）、かといってconnectモジュールを直接使おうとすると、結構手間だったので...。
• Sassのコンパイルは、普段Rubyで実装されたSass（gulpだとgulp-ruby-sassプラグイン）を利用していますが、今回はSassをCで実装したLibsassを使うgulp-sassプラグインを利用してみました。コンパイルが速いですね。どちらのプラグインが良いかは悩むところ。
• gulp-notifyを採用し、SassのコンパイルやJSHintでエラーが出た際にデスクトップ通知が出るようにしました。
• 昨年も書いたけど、gulp-plumberが無くても、タスクが終了したり止まったりすることは無いようなのですが...。

gulpfile.coffeeの例

gistにも入れておきました。（package.jsonも入れておいたので、ダウンロードしてお試し頂けます。）

'use strict';

# Settings
BASEPATH = './htdocs/'
PATHS =
    STATIC:
        SRC: BASEPATH
    SCRIPTS:
        SRC: BASEPATH + 'common/js/'
    STYLES:
        SRC: BASEPATH + '_scss/'
        DEST: BASEPATH + 'common/css/'
PORT = '3501'
AUTOPREFIXER_BROWSERS = [
    'last 2 versions'
    'IE >= 8'
    'Firefox ESR'
    'Android >= 4.1'
]

# Load Modules
gulp = require 'gulp'
path = require 'path'
plugins = require('gulp-load-plugins')()
browserSync = require 'browser-sync'
reload = browserSync.reload
jshintStylish = require 'jshint-stylish'

# Tasks
gulp.task 'serve', ->
    browserSync
        server:
            baseDir: BASEPATH
        port: PORT
        browser: "google chrome"
    return

gulp.task 'styles', ->
    gulp.src(PATHS.STYLES.SRC + '*.scss')
        .pipe plugins.sourcemaps.init()
        .pipe plugins.sass
            onError: (err) ->
                plugins.notify().write err
        .pipe plugins.autoprefixer
            browsers: AUTOPREFIXER_BROWSERS
        .pipe plugins.sourcemaps.write('.')
        .pipe gulp.dest(PATHS.STYLES.DEST)

gulp.task 'jshint', ->
    gulp.src PATHS.SCRIPTS.SRC + '*.js'
        .pipe plugins.jshint()
        .pipe plugins.jshint.reporter(jshintStylish)
        .pipe plugins.notify((file) ->
            # http://stackoverflow.com/questions/22787673/gulp-sass-error-with-notify#answer-23115547
            if file.jshint.success
                # Don't show something if success
                return false
            errors = file.jshint.results.map((data) ->
                if data.error
                    return '(' + data.error.line + ':' + data.error.character + ') ' + data.error.reason
                return
            ).join('\n')
            file.relative + ' (' + file.jshint.results.length + ' errors)\n' + errors
        )

gulp.task 'watch', ->
    gulp.watch PATHS.STATIC.SRC + '**/*.html', browserSync.reload
    gulp.watch PATHS.STYLES.SRC + '*.scss', ['styles', browserSync.reload]
    gulp.watch PATHS.SCRIPTS.SRC + '*.js', ['jshint', browserSync.reload]
    return

gulp.task 'default', [
    'serve'
    'watch'
]