Open youngwind opened 8 years ago
对于静态资源的路径,本地开发和正式线上是不同的,比如像这样。
<!-- 本地开发 --> <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>
module.exports = { // 静态资源cdn地址 cdnUpload: "", };
// 配置变量替换 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')) ); });
这样就大功告成了!
当然,这种替换可以用于然后文件的替换,只要符合preprocess定义的语法就能从config中读取变量进行替换。 但是,js通过import或者require直接引config.js就可以解决。本来写scss的时候也打算用它来配置一些全局的cdnUpload路径,但是后来发现完全没有这个必要!!因为在_组件化开发_的前提之下,scss跟配置相关的全局变量已经没有存在的必要了。
问题由来
对于静态资源的路径,本地开发和正式线上是不同的,比如像这样。
以前的做法
通过ejs等模板渲染的时候完成替换,因为本地开发和线上的config.js是不一样的。但是,自从不使用开始使用react以及前后端分离之后,这种方法就不试用了。
新的方法
通过gulp-preprocess 插件在copy文件的时候进行替换。比如像这个
具体怎么做?
这样就大功告成了!
关于js和css的替换
当然,这种替换可以用于然后文件的替换,只要符合preprocess定义的语法就能从config中读取变量进行替换。 但是,js通过import或者require直接引config.js就可以解决。本来写scss的时候也打算用它来配置一些全局的cdnUpload路径,但是后来发现完全没有这个必要!!因为在_组件化开发_的前提之下,scss跟配置相关的全局变量已经没有存在的必要了。
参考资料: