我有一个Gulp 4 + Webpack 4样板,其中Webpack负责捆绑我的ES6 Javascript,而Gulp则在做其他事情。
这是我的脚本任务:
gulp.task('scripts', (cb) => {
gulp.src(paths.js.app)
.pipe(webpackStream(webpackConfig), webpack)
.on('error', handleErrors)
.pipe(gulp.dest(paths.js.dest))
.on('error', handleErrors)
.pipe(development(browserSync.reload({ stream: true })));
cb()
})
还有我的webpack配置:
const config = {
mode: env,
entry: {
app: paths.js.app,
},
output: {
path: path.resolve(__dirname, 'app'),
filename: 'bundle.js',
},
externals: {
jquery: 'jQuery'
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
],
},
optimization: {
minimizer: [new UglifyJsPlugin()],
}
}
这是我的构建任务:
gulp.task('build', gulp.series(
gulp.parallel(
'clean-assets',
'styles',
'scripts',
'move-favicons',
'move-scripts',
'move-fonts',
'move-videos',
'images',
'svg',
'nunjucks'
),
'revision'
))
您会注意到,除修订任务外,我已将所有内容并行设置。这会用gulp-rev哈希我的styles.css和bundle.js文件,并且html中的链接也会更新为匹配。
我的问题是我的脚本任务在webpack捆绑程序完成之前就已完成,因此在我的修订任务启动时还没有生成bundle.js。
欢迎任何指针。谢谢