gulp-preprocess 让你的项目只需要一个配置文件

[youngwind]

问题由来

对于静态资源的路径，本地开发和正式线上是不同的，比如像这样。

<!-- 本地开发 -->
<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>

具体怎么做？

1. 首先是配置全局的config.js

module.exports = {
  // 静态资源cdn地址
  cdnUpload: "",
};

1. 然后是写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跟配置相关的全局变量已经没有存在的必要了。

参考资料：

1. https://github.com/jsoverson/preprocess
2. https://www.npmjs.com/package/gulp-preprocess