如何利用gulp构建前端自动化
2024-10-19 03:21:41
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 文件中去。
最新文章
- 获取app安装信息私有api
- Python学习【第二篇】Python入门
- 2. redis的数据类型
- paip.输入法编程---词频顺序order by py
- 【转】C++中的虚函数的实现
- node 与php整合
- ES6数组去重
- Update与Mysql、Sqlsever中的随机数
- TCP/IP-协议族----17、应用层简单
- css伪类的说明以及使用(css事件)
- CLR类型设计之泛型(二)
- bat脚本以管理员身份运行时,目录没有定位到当前目录问题的解决方法
- [区块链] 密码学中Hash算法(基础)
- file标签 - 图片上传前预览 - FileReader &; 网络图片转base64和文件流
- centos 7 配置hadoop与spark
- MongoDB--编译文件
- 第二阶段——个人工作总结DAY06
- 敏捷Scrum框架最全总结! [转载]
- windows与kali双系统安装基本教程
- java文件上传-使用apache-fileupload组件