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... )

上一篇:ubuntu 下rar解压工具安装方法


下一篇:【Spring】SpringMVC非注解配置的两种方式