一、功能（解放生产力，提高团队开发效率）：
1、通过gulp命令行方式动态切换环境变量的值；
2、自动给html引入的css,js文件批量添加版本号；
二、操作流程：
该流程基于npm命令安装包，假设你的电脑环境已经安装了node环境。
1、切换到项目所在根目录，执行npm init 生成package.json文件；
2、执行 npm install -g gulp@3.9.1 全局安装gulp；
3、依次执行
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence
npm install --save-dev minimist
4、在根目录下创建gulpfile.js文件，该文件主要用于指定要执行什么任务以达到我们想要的效果；（具体逻辑参考下面的gulpfile.js）
5、执行gulp --env test --dir demo(--env【必填】 后面的参数表示要切换到哪个环境,--dir demo【非必填】后面的参数表示要以哪个目录下的同名文件为准)；
<link rel="stylesheet" href="../css/default-803a7fe4ae.css">
<script src="../js/app-3a0d844594.js"></script>
很显然这不是我们需要的效果；
修改插件配置，因插件版本更新，更改的行数可能会略有差异
1、路径 node_modules/gulp-rev/index.js
第135行 manifest[originalFile] = revisionedFile;
更改为 manifest[originalFile] = originalFile + '?v=' + file.revHash;
2、路径 node_modules/gulp-rev-collector/index.js
第40行 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更改为 var cleanReplacement=path.basename(json[key]).split('?')[0];
第173行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
更改为 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),
3、路径 node_modules/rev-path/index.js
第9行 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
更改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
6、操作实例：
纵向文件夹顺序：a ->b
a/css/index.css
b/css/index.css
--------------------
操作1：修改a/css/index.css文件后，执行 gulp --test 。
结果：a/css/index.html的引入a/css/index.css文件版本号不变。
------------------------------
操作2：修改a/css/index.css文件后，执行 gulp --test --dir a 。
结果：a、b文件下引用的index.css版本号都同步改变。
7、参考文档：https://www.jianshu.com/p/2e554161b930
gulpfile.js
//引入gulp和gulp插件，
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
minimist = require('minimist')
const fs = require('fs');
const path = require('path');
var env = ""; //环境变量
var dir = ""; //这个参数表示当不同目录下存在同名的js或者css(比如carnival/css/index.css,womensDay/css/index.css)文件时，最终以哪个目录下的为准；
var allDirs = getAllDirs(); // 获取当前所有的目录
var envs = ["dev", "test", "pre", "release"]; //对应的各个环境变量的值 (从env.js文件获取)
// 接受命令行参数
var knownOptions = {
string: 'env,dir', // 接收的命令行参数
default: { env: "release", dir: allDirs }
};
var options = minimist(process.argv.slice(2), knownOptions);
env = options.env;
// 由于活动目录下的js或者css文件夹下的某些js，css文件会有同名冲突，所以加了一个dir参数来表示以哪个为准；
// （例如，carnival/css/index.css，跟womensDay/css/index.css，在构建的时候最终以womensDay[按遍历顺序，最后push进数组]的为准，这时候你修改carnival/css/index.css这个文件，
// 之后进行构建，是不生效的，这个时候我们可以指定以carnival为准，那么修改carnival/css/index.css这个文件后重新构建是可以生效的）
dir = options.dir;
if (process.argv.indexOf("--env") < 0 || process.argv.indexOf("--env") > 0 && process.argv.length < 4) {
return console.error("请输入环境变量，例如：gulp --env test");
}
if (process.argv.indexOf("--dir") > 0 && process.argv.length < 6) {
return console.error("请正确的目录参数名，例如：gulp --dir demo");
}
if (envs.indexOf(env) < 0) {
return console.error("环境变量值不存在，请输入正确的环境变量的值！");
}
if (dir) {
if (typeof dir == "string") {
if (allDirs.indexOf(dir) >= 0) {
allDirs.splice(allDirs.indexOf(dir), 1)
allDirs.push(dir)
} else {
return console.error("目录名不存在，请输入正确的目录名");
}
}
}
var fileData = "";
// 读取env.js文件，动态修改env变量（这个修改方式只适用于环境变量那行只有类似这段文本var env ="test"，否则的话就按照你的算法自己处理它，修改下面的方法就可以了）
fs.readFile('js/env.js', function (err, data) {
if (err) {
return console.error(err);
}
var dataStr = data.toString();
dataStr.trim().split('\n').forEach(function (v, i) {
if (/varenv=/.test(v.replace(/\s*/g,""))) {// 这里切换环境变量的值，先去除所有空格，再进行正则表达式的比较
fileData += 'var env = "' + env + '";' + "\n"
} else {
fileData += v + "\n";
}
})
// 将文本内容重新写入env.js
fs.writeFile('js/env.js', fileData, (err) => {
if (err) throw err;
});
})
function getAllDirs(mypath = '.') {
var excluedeDirs = [".vscode", "js", "css", "node_modules", "rev"] //排除的文件夹(只保留每个活动目录对应的名字，这些文件夹下对应的html文件里的js，css才需要动态修改版本号)
const items = fs.readdirSync(mypath);
let result = [];
// 遍历当前目录中所有的文件和文件夹
items.map(item => {
let temp = path.join(mypath, item);
// 若当前的为文件夹
if (fs.statSync(temp).isDirectory()) {
if (excluedeDirs.indexOf(item) < 0) {
result.push(item); // 存储当前文件夹的名字
}
}
});
return result;
}
var revHtmls = [];
//定义css、js源文件路径
var cssSrc = ['css/*.css'];
var jsSrc = ['js/*.js'];
allDirs.forEach(function (item, index) {
//Html替换css、js文件版本
gulp.task('revHtml' + (index + 1), function () {
return gulp.src(['rev/**/*.json', item + '/*.html']) // 这里的View/*.html是项目html文件路径，如果gulpfile.js和html文件同在一级目录下，修改为return gulp.src(['rev/**/*.json', '*.html']);
.pipe(revCollector())
.pipe(gulp.dest(item));// 注意这里是生成的新的html文件，如果设置为你的项目html文件所在文件夹，会覆盖旧的html文件，若上面的View/*.html修改了，这里也要相应修改，如果gulpfile.js和html文件同在一级目录下，修改为 .pipe(gulp.dest(''));
});
revHtmls.push('revHtml' + (index + 1))
cssSrc.push(item + '/css/*.css')
jsSrc.push(item + '/js/*.js')
})
// //清空目标文件
// gulp.task('cleanDst', function () {
// return gulp.src(['rev'], { read: false })
// .pipe(clean());
// });
// //检查js语法
// gulp.task('jslint', function () {
// return gulp.src(jsSrc)
// .pipe(jshint())
// .pipe(jshint.reporter('default'));
// });
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function () {
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function () {
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//开发构建
gulp.task('default', function (done) {
condition = false;
runSequence(['revCss'], //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
['revJs'], revHtmls, done)
});