webpack和gulp组合使用,用gulp-sequence按顺序执行任务防止报错
最近弄了一个东西,需要gulp组合上webpack使用,然发现一个问题,两个webpack任务是无法同时进行的。
报错如下 :
You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
后来发现用上了gulp-sequence,解决了该问题,此前还想到一种别的方法,目的也是监听变化文件并及时打包。
方法1:只打包变动的文件
gulp.config.js
module.exports = {
entry:{
'index':'./public/javascripts/page/index/index.js',
'user':'./public/javascripts/page/user/index.js'
}
}
gulpfile.js
const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const gulpConfig = require('./gulp.config');
const gulpSequence = require('gulp-sequence');
let entry = gulpConfig.entry;
let packageTasks = [];
Object.keys(entry).forEach(function (key) {
gulp.task('webpack-'+key,function () {
return gulp.src(entry[key])
.pipe(webpackStream({
output:{
filename:'js/'+key+'.bundle.js'//打包后的名字
}
}))
.pipe(gulp.dest('./public/dist'));
});
packageTasks.push('webpack-'+key);
});
gulp.task('watch',function () {
Object.keys(entry).forEach(function (key) {
gulp.watch(entry[key],['webpack-'+key]);
});
});
方法2:监听到有变动全部重新打包(gulp-sequence)
gulpfile.js
const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const gulpConfig = require('./gulp.config');
const gulpSequence = require('gulp-sequence');
let entry = gulpConfig.entry;
let packageTasks = [];
Object.keys(entry).forEach(function (key) {
gulp.task('webpack-'+key,function () {
return gulp.src(entry[key])
.pipe(webpackStream({
output:{
filename:'js/'+key+'.bundle.js'//打包后的名字
}
}))
.pipe(gulp.dest('./public/dist'));
});
packageTasks.push('webpack-'+key);
});
gulp.task('js',gulpSequence(...packageTasks));
gulp.task('watch',function () {
gulp.watch('./public/javascripts/page/**/index.js',['js']);
});