Gulpのすすめ

はじめに

Qiita始めました。
初めてなのでGulpを紹介します。

Gulpとは

Nodeベースのタスクランナーです。
一世風靡したgruntとは違い、並行処理を強みとしています。

インストール

npm install -g gulp

これだけです。簡単ですね。

gulpfileをcoffeeで書く

gulpのメリットのひとつとして「シンプルで可読性が高い」というのもあります。
そのメリットを活かすためにもcoffeeで書くことをおすすめします。
gulpfile.coffeeを作成してcoffee-scriptをインストールするだけです。

npm install --save-dev coffee-script

おすすめプラグイン

gulp-coffee

coffee scriptのコンパイル用

gulp-stylus

stylusのコンパイル用
僕はsassよりstylusが好きです。
全部Nodeで管理したほうがラク。

autoprefixer-stylus

mixinでprefixをどうにかする時代は終わりました。

gulp.task 'stylus', () ->
  gulp.src paths.dest.stylus
    .pipe stylus
      use:
        autoprefixer
          browsers:  ['last 3 versions', 'ie 8',  'android 2.3']
    .pipe gulp.dest paths.dest.stylesheets

こんな感じで使ってます。

gulp-jade

slimも好きだけどやっぱりnodeで統一
ruby案件とかだったらもちろんsassとslimでいきますよ

run-sequence

gulpは並行処理がメリットですがもちろんタスクの依存をどうにかしたいものも多いです。
僕はrun-sequenceで解消することが多いです。

gulp-shell

適当にシェル叩きたいときにはこの子から

gulp-gzip

gzipは当然ですね。

gulp-clean

gruntと比べてgulpはtmpとか必要としないけどdestとかはcleanしないとね

サンプル

僕はこんな感じで書くことが多いので参考までに。

gulp = require 'gulp'
clean = require 'gulp-clean'
runSequence = require 'run-sequence'
gzip = require 'gulp-gzip'

# html
jade = require 'jade'
gulpJade = require 'gulp-jade'

# javascript
coffee = require 'gulp-coffee'

# css
stylus = require 'gulp-stylus'
autoPrefixer = require 'gulp-autoprefixer'


# ###################
# PATH
# ###################
paths =
  src:
    jade: './source/views'
    stylus: './source/assets/stylus'
    coffee: './source/assets/coffee'

  dest:
    css: './build/assets/css'
    js: './build/assets/js'
    html: './build/views'


# ###################
# TASK
# ###################
gulp.task 'jade', () ->
  gulp.src ["#{paths.src.jade}/**/!(_)*.jade"]
    .pipe gulpJade
      jade: jade
      pretty: true
    .pipe gulp.dest "#{paths.dest.html}"

gulp.task 'stylus', () ->
  gulp.src ["#{paths.src.stylus}/**/!(_)*.styl"]
    .pipe stylus
      use:
        autoprefixer
          browsers: ['last 3 versions', 'ie 8', 'android 2.3']
    .pipe gulp.dest "#{paths.dest.css}"
    .pipe gzip
      append: true
    .pipe gulp.dest "#{paths.dest.css}"

gulp.task 'coffee', () ->
  gulp.src ["#{paths.src.coffee}/**/*.coffee"]
    .pipe coffee
      bare:true
    .pipe gulp.dest "#{paths.dest.js}"
    .pipe gzip
      append: true
    .pipe gulp.dest "#{paths.dest.js}"

gulp.task 'clean:html', () ->
  gulp.src "#{paths.dest.html}/**/*"
    .pipe clean()

gulp.task 'clean:css', () ->
  gulp.src "#{paths.dest.css}/**/*"
    .pipe clean()

gulp.task 'clean:js', () ->
  gulp.src "#{paths.dest.js}/**/*"
    .pipe clean()

gulp.task 'clean', (callback) ->
  runSequence(
    ['clean:html', 'clean:css', 'clean:js'],
    callback
    )


gulp.task 'watch', () ->
  gulp.watch ["#{paths.src.jade}/**/*.jade"], ['jade']
  gulp.watch ["#{paths.src.stylus}/**/*.styl"], ['stylus']
  gulp.watch ["#{paths.src.coffee}/**/*.coffee"], ['coffee']


gulp.task 'default', (callback) ->
  runSequence(
    ['clean'],
    ['jade', 'stylus', 'coffee'],
    callback
    )

大規模開発になる場合はgulpとかディレクトリ切ってtask毎に分離したりするといいでしょう。

まとめ

初Qiitaなのでもう有りふれているgulpの記事など書いてしまいました。
今年は色々書いていこうかと思うのでよろしくお願いします。