原文：http://www.mamicode.com/info-detail-517085.html
No.1、run-sequence 作用：让gulp任务，可以相互独立，解除任务间的依赖，增强task复用
Links: https://www.npmjs.com/package/run-sequence 推荐指数：★★★★★
No.2、browser-sync 作用：静态文件服务器，同时也支持浏览器自动刷新
Links: http://www.browsersync.io/ 推荐指数：★★★★★
No.3、del 作用：删除文件/文件夹
Links：https://www.npmjs.com/package/del 推荐指数：★★★★★
No.4、gulp-coffee 作用：编译coffee代码为Js代码，使用coffeescript必备
Links: https://github.com/wearefractal/gulp-coffee 推荐指数：★★★★
No.5、coffee-script 作用：gulpfile默认采用js后缀，如果要使用gulpfile.coffee来编写，那么需要此模块
Links: https://www.npmjs.com/package/coffee-script 推荐指数：★★★
No.6、gulp-nodemon 作用：自动启动/重启你的node程序，开发node服务端程序必备
Links: https://www.npmjs.com/package/gulp-nodemon 推荐指数：★★★★★
No.7、yargs 作用：用于获取启动参数，针对不同参数，切换任务执行过程时需要
Links: https://www.npmjs.com/package/yargs 推荐指数：★★★
No.8、gulp-util 作用：gulp常用的工具库
Links: https://www.npmjs.com/package/gulp-util 推荐指数：★★★★★
No.9、gulp-uglify 作用：通过UglifyJS来压缩JS文件
Links: https://www.npmjs.com/package/gulp-uglify 推荐指数：★★★★
No.9、gulp-concat 作用：合并JS
Links: https://www.npmjs.com/package/gulp-concat 推荐指数：★★★★
No.10、gulp-sourcemaps 作用：处理JS时，生成SourceMap
Links: https://www.npmjs.com/package/gulp-sourcemaps 推荐指数：★★★★
No.11、gulp-less 作用：将less预处理为css
Links：https://www.npmjs.com/package/gulp-less 推荐指数：★★★★
No.12、gulp-sass 作用：将sass预处理为css
Links：https://www.npmjs.com/package/gulp-sass 推荐指数：★★★★
No.13、gulp-autoprefixer 作用：使用Autoprefixer来补全浏览器兼容的css。
Links：https://www.npmjs.com/package/gulp-autoprefixer 推荐指数：★★★★
No.14、gulp-minify-css 作用：压缩css。
Links：https://www.npmjs.com/package/gulp-minify-css 推荐指数：★★★★
No.15、connect-history-api-fallback 作用：开发angular应用必须，用于支持HTML5 history API.
Links：https://www.npmjs.com/package/connect-history-api-fallback 推荐指数：★★★
一般的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... )