原博主:幻天芒 原文地址:http://www.cnblogs.com/humin/p/4337442.html
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应用程序:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | 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() ) |
接下来是前端网站:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 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()]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理