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

@youngwind 2015-12-18 07:24:33发表于 youngwind/blog 工程化

问题由来

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

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