如何利用gulp构建前端自动化
2016-03-28 23:03
555 查看
1,使用 gulp.watch 来监听文件自动打包
在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若想让程序正常运行,必须webpack一次。这样会大大降低我们的工作效率。
网上找到说在 webpack.config.js 中添加 watch : true ,运行 webpack -w 即可?
然而,我发现并没有什么卵用??在此若有各位朋友知道怎么做的,在下面留言,谢谢。
既然,不能用,但是我不能就这样了,我一直听说 当做项目的时候,webpack + gulp 会更好哦。
自然,我就想到了 gulp。
2, gulp
http://www.gulpjs.com.cn/gulp特别简单,在此不做多介绍,看我在项目中实际应用。
var gulp = require('gulp') var webpack = require('gulp-webpack') var webpackConfig = require('./webpack.config.js') gulp.task('watch',function(){ gulp.src('./src/script/*.js') .pipe(webpack(webpackConfig)) .pipe(gulp.dest('built')) }) gulp.task('default', function(){ // console.log('23') gulp.watch('./src/script/*.js', ['watch']) })
整个思路很简单,利用 gulp 来建立任务,并监听项目中js文件是否有变动,若有变动,就利用 gulp-webpack 来运行 webpack 的配置文件。
其中 pipe 是通道的意思,也相当于回调函数,比如 watch 任务的逻辑就是 当js文件变动后,找到 所有的 js 文件,通过运行 webpack 后,再去写入到 built 文件中去。
相关文章推荐
- [JSTDG]JavaScript函数
- The important thing in life is to have a great aimand the determination to attain it.
- EXTJS之Ext.util.Observable自定义事件
- Velocity模板引擎的简单使用
- CSS
- 如何用CORS来解决JS中跨域的问题
- javascript 基础语法
- 对前端的一个H5项目的所思所想
- windows客户端开发--使用json11解析json
- css样式(一)
- windows客户端开发--使用json11解析json
- CSS选择器
- 面包屑 CSS(合并小图标,减少链接请求数量)
- 剑指offer——两个链表的第一个公共结点
- JQUERY
- CSS学习
- AngularJS Eclipse——新手入门【翻译+整理】
- ajax跨域系列--JSONP方式处理
- BufferedReader、FileReader、FileInputStream
- Server.Transfer 和 Response.Redirect 用法区别