胖蔡说技术通过Gulp可以对于前端代码进行一个代码的多页面构建，避免不必要的重复性工作，提高代码的可读性，为了实现通过参数控制不同环境的打包编译，我们引入了gulp-preprocess插件，该插件在gulp代码编译期间就实现了分环境配置的功能。
配置
- 安装gulp-preprocess插件
$ yarn add -D gulp-preprocess
# or
$ npm install --save-dev gulp-preprocess
- gulpfile.js配置
const preprocess = require('gulp-preprocess');
......
/* 打包babel的js文件 */
gulp.task('js:dev', async function () {
return await gulp.src(['src/js/**/*.js'])
.pipe(preprocess({
context: {
// 此处可接受来自调用命令的 NODE_ENV 参数，默认为 development 开发测试环境
NODE_ENV: process.env.NODE_ENV || 'development',
},
}))
.pipe(babel())
.pipe(uglifyJs())
.pipe(gulp.dest('dist/js'))
})
gulp.task('dev', gulp.series(gulp.parallel('js:dev', 'css:dev', 'img:dev', 'html:dev'), function (done) {
done()
}))
- package.json 添加脚本配置
...
"scripts": {
"dev": "gulp dev",
},
...
添加配置文件
//config.js gulp-preprocess 通过注解方式实现了编译配置
var config = {
// @if NODE_ENV = 'production'
apiUrl:'http://production.api.cn',
// @endif
// @if NODE_ENV = 'development'
apiUrl:'http://development.api.cn',
// @endif
}
window.config = config;
//request.js
$.ajax({
type: "POST",
dataType: "json",
url: config.apiUrl + url,
success: function (res) {
console.log('请求成功:',res)
},
error: function (error) {
console.log('请求失败：',error)
},
});
运行
$yarn run dev
#or
$npm run dev
