前端构建之gulp与常用插件
2016-01-09 21:49
543 查看
gulp是什么?
http://gulpjs.com/ 相信你会明白的!
与著名的构建工具grunt相比,有什么优势呢?
易于使用,代码优于配置
高效,不会产生过多的中间文件,减少I/O压力
易于学习,API非常少,你能在很短的事件内学会gulp
作用:让gulp任务,可以相互独立,解除任务间的依赖,增强task复用
推荐指数:★★★★★
作用:静态文件服务器,同时也支持浏览器自动刷新
推荐指数:★★★★★
作用:删除文件/文件夹
推荐指数:★★★★★
作用:编译coffee代码为Js代码,使用coffeescript必备
推荐指数:★★★★
作用:gulpfile默认采用js后缀,如果要使用gulpfile.coffee来编写,那么需要此模块
推荐指数:★★★
作用:自动启动/重启你的node程序,开发node服务端程序必备
推荐指数:★★★★★
作用:用于获取启动参数,针对不同参数,切换任务执行过程时需要
推荐指数:★★★
作用:gulp常用的工具库
推荐指数:★★★★★
作用:通过UglifyJS来压缩JS文件
推荐指数:★★★★
作用:合并JS
推荐指数:★★★★
作用:处理JS时,生成SourceMap
推荐指数:★★★★
作用:将less预处理为css
推荐指数:★★★★
作用:将sass预处理为css
推荐指数:★★★★
作用:使用Autoprefixer来补全浏览器兼容的css。
推荐指数:★★★★
作用:压缩css。
推荐指数:★★★★
作用:开发angular应用必须,用于支持HTML5 history API.
推荐指数:★★★
接下来是前端网站:
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... )
相关文章推荐
- 用Javascript判断访问来源操作系统, 设备, 浏览器类型
- [Pomelo]安装与部署Helloworld
- vs2015打开cshtml文件失败的解决方法
- JSP的学习(8)——JSP标签
- js笔记——js里的null和undefined
- m个元素的数组,随机选择n个不重复元素(js实现)
- JSP的学习(7)——九大隐式对象之pageContext对象
- json chart 整合,JQERY发异步请求,json chart使用等
- js笔记——js里var与变量提升
- javascript--"Null"与"undefined"
- jquery学习随笔(动画效果)
- javascript之类型陷阱
- hdu 1146 UVa10901 Ferry Loading III
- javascript--"=="与"==="
- JavaScript计算器
- 引擎设计跟踪(九.14.3.1) deferred shading: Depthstencil as GBuffer depth
- HTML5 <label> 标签
- JavaScript对象(document对象 图片轮播)
- JSP复习----html部分
- Json解析小案例