gulp是什麼？

http://gulpjs.com/ 相信你會明白的！
與著名的構建工具grunt相比，有什麼優勢呢？
1. 易於使用，程式碼優於配置
2. 高效，不會產生過多的中間檔案，減少I/O壓力
3. 易於學習，API非常少，你能在很短的事件內學會gulp

那些常用的gulp外掛

No.1、run-sequence

作用：讓gulp任務，可以相互獨立，解除任務間的依賴，增強task複用

推薦指數：★★★★★

No.2、browser-sync

作用：瀏覽器同步，快速響應檔案更改並自動重新整理頁面

推薦指數：★★★★★

No.3、del

作用：刪除檔案/資料夾

推薦指數：★★★★★

No.4、gulp-coffee

作用：編譯coffee程式碼為Js程式碼，使用coffeescript必備

推薦指數：★★★★

No.5、coffee-script

作用：gulpfile預設採用js字尾，如果要使用gulpfile.coffee來編寫，那麼需要此模組

推薦指數：★★★

No.6、gulp-nodemon

作用：自動啟動/重啟你的node程式，開發node服務端程式必備

推薦指數：★★★★★

No.7、yargs

作用：用於獲取啟動引數，針對不同引數，切換任務執行過程時需要

推薦指數：★★★

No.8、gulp-util

作用：gulp常用的工具庫

推薦指數：★★★★★

No.9、gulp-uglify

作用：通過UglifyJS來壓縮JS檔案

推薦指數：★★★★

No.9、gulp-concat

作用：合併JS

推薦指數：★★★★

No.10、gulp-sourcemaps

作用：處理JS時，生成SourceMap

推薦指數：★★★★

No.11、gulp-less

作用：將less預處理為css

推薦指數：★★★★

No.12、gulp-sass

作用：將sass預處理為css

推薦指數：★★★★

No.13、gulp-autoprefixer

作用：使用Autoprefixer來補全瀏覽器相容的css。

推薦指數：★★★★

No.14、gulp-minify-css

作用：壓縮css。

推薦指數：★★★★

No.15、connect-history-api-fallback

作用：開發angular應用必須，用於支援HTML5 history API.

推薦指數：★★★

一般的gulpfile檔案（採用coffee編寫）

首先是，node應用程式：

gulp = require('gulp')
runSequence = require('run-sequence')

coffee = require('gulp-coffee')
gutil = require('gulp-util')
del = require('del')
nodemon = require('gulp-nodemon')
argv = require('yargs').argv
rename = require('gulp-rename')
browserSync = require('browser-sync')
reload = browserSync.reload

# 處理引數
isDebug = not (argv.r || false)

# --入口任務-----------------------------------------------------------------
gulp.task('default', (callback)->
  runSequence(
    ['clean']
    ['coffee-server', 'copy-server', 'copy-client', 'coffee-client', 'copy-views']
    'serve'
    ['browserSync', 'watch']
    callback
  )
)
# --構建相關任務---------------------------------------
gulp.task('clean', (callback)->
  del(['./dist/'], callback)
)

gulp.task('coffee-server', ->
  gulp.src([
    './src/**/*.coffee'
    '!./src/public/**/*.coffee'
    '!./src/views/**'
  ])
  .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('./dist/'))
)

gulp.task('copy-server', ->
  gulp.src([
    './src/config*/*.json'
    './src/database*/*.*'
  ])
  .pipe(gulp.dest('./dist/'))
)

gulp.task('copy-client', ->
  gulp.src([
    './src/public*/**/*'
    '!./src/public*/**/*.coffee'
  ])
  .pipe(gulp.dest('./dist/'))
)

gulp.task('coffee-client', ->
  gulp.src([
    './src/public*/**/*.coffee'
  ])
  .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('./dist/'))
)

gulp.task('copy-views', ->
  gulp.src('./src/views/**/*.html')
  .pipe(rename({extname: '.vash'}))
  .pipe(gulp.dest('./dist/views'))
)


# --啟動程式,開啟瀏覽器任務----------------------------------------------------
nodemon_instance = undefined
gulp.task('serve', (callback)->
  called = false
  if not nodemon_instance
    nodemon_instance = nodemon({
      script: './dist/index.js'
      ext: 'none'
    })
    .on('restart', ->
      console.log('restart server......................')
    )
    .on('start', ->
      if not called
        called = true
        callback()
    )
  else
    nodemon_instance.emit("restart")
    callback()
  nodemon_instance
)

gulp.task('browserSync', ->
  browserSync({
    proxy: 'localhost:3000'
    port: 8888
  #files: ['./src/public/**/*']
    open: true
    notify: true
    reloadDelay: 500 # 延遲重新整理
  })
)



# --監視任務------------------------------------------------
gulp.task('watch', ->
  gulp.watch([
    './src/**/*.*'
    '!./src/**/*.coffee'
  ], ['reload-client'])
  gulp.watch('./src/**/*.coffee', ['reload-server'])
)

gulp.task('reload-client', (callback) ->
  runSequence(
    ['copy-client', 'coffee-client', 'copy-views']
    'bs-reload'
    callback
  )
)

gulp.task('reload-server', (callback) ->
  runSequence(
    ['copy-server', 'coffee-server']
    'serve'
    'bs-reload'
    callback
  )
)

gulp.task('bs-reload', ->
  browserSync.reload()
)

接下來是前端網站：

gulp = require('gulp')
gutil = require('gulp-util')
coffee = require('gulp-coffee')
del = require('del')
runSequence = require('run-sequence')
browserSync = require('browser-sync')
historyApiFallback = require('connect-history-api-fallback')
# 入口點
gulp.task('default', ->
  runSequence(
    ['clean']
    ['copy']
    ['serve']
  )
)

gulp.task('copy', ->
  gulp.src([
    './src/**/*.*'
    '!./src/**/*.coffee'
    '!./src/**/*.less'
  ])
  .pipe(gulp.dest('./dist'))
)

gulp.task('clean', (callback)->
  del(['./dist/'], callback)
)

gulp.task('serve', ->
  browserSync({
    server: {
      baseDir: "./dist"
      middleware: [historyApiFallback]
    }
    port: 2222
  })
)

gulp.task('watch', ->
  # do something...
)

注意：由於connect-history-api-fallback這個包的用法改變，所以在browserSync中使用的時候，請使用middleware: [historyApiFallback()]