gulp-preprocess 让你的项目只需要一个配置文件
youngwind opened this issue · 0 comments
youngwind commented
问题由来
对于静态资源的路径，本地开发和正式线上是不同的，比如像这样。
<!-- 本地开发 -->
<script src="/bundle.vendor.js"></script>
<script src="/bundle.js"></script>
<!-- 线上 -->
<script src="http://media8.smartstudy.com/bundle.vendor.js"></script>
<script src="http://media8.smartstudy.com/bundle.js"></script>
以前的做法
通过ejs等模板渲染的时候完成替换，因为本地开发和线上的config.js是不一样的。但是，自从不使用开始使用react以及前后端分离之后，这种方法就不试用了。
新的方法
通过gulp-preprocess 插件在copy文件的时候进行替换。比如像这个
index.html (before)
<script src="<!-- @echo cdnUpload -->/bundle.vendor.js"></script>
<script src="<!-- @echo cdnUpload -->/bundle.js"></script>
index.html (after)
<script src="/bundle.vendor.js"></script>
<script src="/bundle.js"></script>
具体怎么做？
- 首先是配置全局的config.js
module.exports = {
// 静态资源cdn地址
cdnUpload: "",
};
- 然后是写gulpfile文件
// 配置变量替换
var preprocess = require('gulp-preprocess');
// 引入配置文件
var config = require('./src/config.js');
// 复制文件
gulp.task('copy', function () {
return merge(
gulp.src('src/index.html')
.pipe(preprocess({
context: config
}))
.pipe(gulp.dest('public'))
);
});
这样就大功告成了！
关于js和css的替换
当然，这种替换可以用于然后文件的替换，只要符合preprocess定义的语法就能从config中读取变量进行替换。
但是，js通过import或者require直接引config.js就可以解决。本来写scss的时候也打算用它来配置一些全局的cdnUpload路径，但是后来发现完全没有这个必要！！因为在**_组件化开发**_的前提之下，scss跟配置相关的全局变量已经没有存在的必要了。