gulp是什么？
http://gulpjs.com/ 相信你會明白的！
與著名的構建工具grunt相比，有什么優勢呢？
- 易於使用，代碼優於配置
- 高效，不會產生過多的中間文件，減少I/O壓力
- 易於學習，API非常少，你能在很短的事件內學會gulp
那些常用的gulp插件
No.1、run-sequence
Links: https://www.npmjs.com/package/run-sequence
作用：讓gulp任務，可以相互獨立，解除任務間的依賴，增強task復用
推薦指數：★★★★★
No.2、browser-sync
Links: http://www.browsersync.io/
作用：靜態文件服務器，同時也支持瀏覽器自動刷新
推薦指數：★★★★★
No.3、del
Links：https://www.npmjs.com/package/del
作用：刪除文件/文件夾
推薦指數：★★★★★
No.4、gulp-coffee
Links: https://github.com/wearefractal/gulp-coffee
作用：編譯coffee代碼為Js代碼，使用coffeescript必備
推薦指數：★★★★
No.5、coffee-script
Links: https://www.npmjs.com/package/coffee-script
作用：gulpfile默認采用js后綴，如果要使用gulpfile.coffee來編寫，那么需要此模塊
推薦指數：★★★
No.6、gulp-nodemon
Links: https://www.npmjs.com/package/gulp-nodemon
作用：自動啟動/重啟你的node程序，開發node服務端程序必備
推薦指數：★★★★★
No.7、yargs
Links: https://www.npmjs.com/package/yargs
作用：用於獲取啟動參數，針對不同參數，切換任務執行過程時需要
推薦指數：★★★
No.8、gulp-util
Links: https://www.npmjs.com/package/gulp-util
作用：gulp常用的工具庫
推薦指數：★★★★★
No.9、gulp-uglify
Links: https://www.npmjs.com/package/gulp-uglify
作用：通過UglifyJS來壓縮JS文件
推薦指數：★★★★
No.9、gulp-concat
Links: https://www.npmjs.com/package/gulp-concat
作用：合並JS
推薦指數：★★★★
No.10、gulp-sourcemaps
Links: https://www.npmjs.com/package/gulp-sourcemaps
作用：處理JS時，生成SourceMap
推薦指數：★★★★
No.11、gulp-less
Links：https://www.npmjs.com/package/gulp-less
作用：將less預處理為css
推薦指數：★★★★
No.12、gulp-sass
Links：https://www.npmjs.com/package/gulp-sass
作用：將sass預處理為css
推薦指數：★★★★
No.13、gulp-autoprefixer
Links：https://www.npmjs.com/package/gulp-autoprefixer
作用：使用Autoprefixer來補全瀏覽器兼容的css。
推薦指數：★★★★
No.14、gulp-minify-css
Links：https://www.npmjs.com/package/gulp-minify-css
作用：壓縮css。
推薦指數：★★★★
No.15、connect-history-api-fallback
Links：https://www.npmjs.com/package/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...
)
2016-3-27 12:33:38補充：
由於connect-history-api-fallback這個包的用法改變，所以在browserSync中使用的時候，請使用middleware: [historyApiFallback()]