发布于 2016-01-15 21:55:59 | 2683 次阅读 | 评论: 0 | 来源: PHPERZ

GulpJS 流构建系统

从头编写HTML\CSS\Javascript是上个世纪的事情了，如今的JavaScript都是通过CoffeeScript这样的支持句法缩写的编辑器写成的。如果你希望写完JavaScript能够一个工具完成代码清理优化工作，Gulp 就是你的不二之选，GulpJS类似Ant或Maven之于Java。

出发点

通常我们在测试开发，正式运行等不同环境中，代码所使用的某些配置，如请求的api地址，文件存放位置等是不同的，实现这些配置信息的统一管理和快速配置可以减少我们手动更改的麻烦。

解决方案

将不同环境下的配置信息以json形式统一存储在config.json文件中
添加constants的gulp任务，在运行其他task如serve,build前执行，主要负责根据命令行传入的environment参数，取出json文件中对应的环境配置信息，生成config.js导入到被引用的文件目录下。
相应的js文件可以通过引用全局变量的方式使用配置信息。

配置步骤

创建config.json文件

{
  "development": {
    "apiUrl": "http://dev.applicationName.com/api/projectName/"
  },
  "production": {
    "apiUrl": "http://applicationName.com/api/projectName/"
  }
}

在gulpfile.js中添加constants任务

constants任务主要解决两个问题

获取命令行中的env参数，从而取出对应的json配置
将配置信息生成js文件

//npm install --save-dev minimist gulp-util

import minimist from 'minimist';
import gutil from 'gulp-util';

//默认development环境
var knowOptions = {
  string: 'env',
  default: {
    env: process.env.NODE_ENV || 'development'
  }
};

var options = minimist(process.argv.slice(2), knowOptions);

//生成filename文件，存入string内容
function string_src(filename, string) {
  var src = require('stream').Readable({ objectMode: true })
  src._read = function () {
    this.push(new gutil.File({ cwd: "", base: "", path: filename, contents: new Buffer(string) }))
    this.push(null)
  }
  return src
}

gulp.task('constants', function() {
  //读入config.json文件
  var myConfig = require('./config.json');
  //取出对应的配置信息
  var envConfig = myConfig[options.env];
  var conConfig = 'appconfig = ' + JSON.stringify(envConfig);
  //生成config.js文件
  return string_src("config.js", conConfig)
      .pipe(gulp.dest('app/scripts/'))
});

在其他任务前执行前执行constants 任务

gulp.task('serve', ['constants','styles', 'fonts'], () => {});

使用步骤

传入env参数

如下（默认是development环境下）

gulp serve --env production

生成的config.js文件内容

appconfig = {"apiUrl":"http://applicationName.com/api/projectName/"}

在js中使用配置信息

var share = function() {
  $.ajax({
    url: appconfig.apiUrl,
    data: {
      url: window.location.href
    }
  }).done(function(data) {
    //code ....
  });
};

其他

如果使用了angularJS，可以通过gulp-ng-constants插件进行分环境配置的实现

只是提供一个思路和实现的方法，可自行扩展优化

最新网友评论 共有(0)条评论发布评论返回顶部

使用gulp进行简单的分环境配置