前端构建之gulp与常用插件

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').argvrename = 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 = undefinedgulp.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()]