为什么会有这样的愿景(gulp+webpack合并使用)
在实际项目中我们是多页面开发,我希望对应的文件打包后可以直接自动化构建,
于是开始使用webpack来实现,但是遇到的问题是每增加一个新html文件对应的
就需要添加一个入口js文件(可能是我对webpack理解不深),我希望做的是像gulp
那样直接运行gulp剩下的事情就不需要我去做了,那有人会问,那你直接用gulp不就行了,
但是接下来的问题又出现了,我希望js中的依赖文件可以打包成一个js文件,于是找了各种途径
还是觉得webpack比较好(释:Webpack 在依赖的模块化构建上是无人能够替代的),
于是接下来的探索就顺理成章了。 Webpack 将模块的、互相依赖的分散的代码打包成数个文件,然后再使用 gulp 任务去做压缩,加版本号,替换等等其他工作。
gulp+webpack构建要点
1、gulp和webpack结合(入口文件配置 + webpack流)
vinyl-named作用:给gulp匹配的js文件重命名并返回做为webpack中entry的入口文件
webpack-stream作用:将webpack作为流运行,以方便地与gulp集成。
在这里我只是用到了webpack的基本用法,仅仅用到了js模块的依赖打包,js的压缩我也是通过gulp的gulp-uglify完成的。
代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16gulp.task('webpack-watch', () => {
return gulp.src('./source/js/**/*.js', {base: 'src'})
// 使用webpack配置文件,详细见下
.pipe(vinylNamed((file) => {
var dir = path.dirname(file.path);
// 替换掉 source 目录路径
dir = dir.replace(/^.*source(\\|\/)/, '');
console.log(path.join(dir, path.basename(file.path, path.extname(file.path))));
// 将文件路径及 basename 作为 name
return path.join(dir, path.basename(file.path, path.extname(file.path)));
}))
//防止文件在编译时报错而退出监听
.pipe(plumber())
.pipe(webpackStream(config))
.pipe(gulp.dest('./src'))
});
2、src下文件的监听
在构建的过程中发现,文件对应打包发布没问题了,可是开发环境却出问题了,问题点主要在对应的html文件中引入的还是less文件(很是尴尬)、对应拥有依赖的js文件直接报错(浏览器不认识require和import)
怎么解决这样的问题呢?细心地小伙伴会发现上面的代码gulp.dest(‘./src’)为啥会发布到src下而不是dist下呢?
如下图:
其实你会发现src平级对应还有个source目录这是对应的less、有依赖的js文件(使用了require或import语法)。为了实现在src开发,在dist下发布上线
代码如下:1
2
3
4
5
6
7
8//less watch
gulp.task('less-watch', () => {
return gulp.src('./source/**/*.less', {base: 'source'})
.pipe(less())
.pipe(plumber())
.pipe(gulp.dest('./src'))
});
// js(es6) watch如上
3、如何把带有md5戳的js、css、img文件映射到html中
gulp-rev作用:其中rev()用于给文件名扩展名前增加一个md5后缀
gulp-rev-replace作用:用于替换html中对应manifest.json中的映射
代码如下:1
2
3
4
5
6
7/*替换html中对应资源文件路径*/
gulp.task("htmlrevreplace", function () {
var manifest = gulp.src("./dist/manifest/**/rev-manifest.json");
return gulp.src('./dist/app/*.html')
.pipe(replace({manifest: manifest}))
.pipe(gulp.dest('./dist/app'));
});
4、如何让htmlrevreplace异步执行
htmlrevreplace作用:他是gulp的一个task任务,他是在对应所有的资源文件压缩打包添加md5戳后再去替换html文件中的资源文件路径(映射相应的资源文件)
主要依赖于run-sequence这个模块
代码如下:1
2
3
4
5
6
7//['html', 'less', 'images', 'webpack']构建完成后再执行队列中的htmlrevreplace任务
gulp.task('prod', function () {
runSequence('clean:dist',
['html', 'less', 'images', 'webpack'],
'htmlrevreplace'
)
});
完整代码请移步github{:target=”_blank”}