gulp插件大全

原文：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... )