如何用Gulp自动管理AngularJS项目不同环境的文件引用？

我之前也碰到过类似的麻烦，每次改完生产版的index.html还要回退成开发版，来回折腾太浪费时间了。下面给你几个靠谱的方案，完全不用修改原文件，Gulp会自动帮你生成对应环境的版本：

方案一：用gulp-preprocess基于环境变量做条件替换 #

这个插件允许你在HTML里写环境条件标记，Gulp会根据你指定的环境（开发/生产）自动生成对应的index.html，原文件始终保持开发状态。

步骤1：安装依赖 #

npm install gulp-preprocess --save-dev

步骤2：给原index.html添加环境条件标记 #

把原来的文件引用改成带条件判断的格式，比如：

<!-- @if NODE_ENV='production' -->
<link rel="stylesheet" href="css/style.min.css">
<script src="js/app.min.js"></script>
<!-- @endif -->
<!-- @if NODE_ENV='development' -->
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<!-- @endif -->

步骤3：编写Gulp任务 #

在gulpfile.js里添加两个任务，分别对应开发和生产环境：

const gulp = require('gulp');
const preprocess = require('gulp-preprocess');

// 生成开发用的index.html
gulp.task('dev-index', function() {
  return gulp.src('src/index.html')
    .pipe(preprocess({context: { NODE_ENV: 'development' }}))
    .pipe(gulp.dest('dev/')); // 输出到开发专属目录
});

// 生成生产用的index.html
gulp.task('prod-index', function() {
  return gulp.src('src/index.html')
    .pipe(preprocess({context: { NODE_ENV: 'production' }}))
    .pipe(gulp.dest('dist/')); // 输出到生产打包目录
});

之后执行gulp dev-index就能拿到开发版的index，执行gulp prod-index直接生成生产版，原文件完全不用动。

方案二：用gulp-useref自动合并+替换路径（适合需要合并压缩的场景） #

如果你的项目还需要把零散的JS/CSS合并压缩成单个文件，gulp-useref可以一步搞定：自动识别HTML里的标记，合并文件、压缩代码，同时替换成压缩后的路径，非常省心。

步骤1：安装依赖 #

npm install gulp-useref gulp-if gulp-uglify gulp-clean-css --save-dev

步骤2：给原index.html添加合并标记 #

用<!-- build:type 目标路径 -->和<!-- endbuild -->包裹需要合并的文件：

<!-- build:css css/style.min.css -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- endbuild -->

<!-- build:js js/app.min.js -->
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<!-- endbuild -->

步骤3：编写Gulp打包任务 #

const gulp = require('gulp');
const useref = require('gulp-useref');
const gulpIf = require('gulp-if');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');

gulp.task('build', function() {
  return gulp.src('src/index.html')
    .pipe(useref()) // 解析标记，合并对应文件
    .pipe(gulpIf('*.js', uglify())) // 只压缩JS文件
    .pipe(gulpIf('*.css', cleanCSS())) // 只压缩CSS文件
    .pipe(gulp.dest('dist/')); // 输出到生产打包目录
});

执行gulp build后，dist目录里会自动生成合并压缩好的JS/CSS，以及替换完路径的生产版index.html，原文件依然保持开发时的零散引用状态。

额外小技巧：用命令行参数快速切换环境 #

你可以在gulpfile里加个默认任务，通过命令行参数自动判断要跑哪个环境的流程：

const argv = require('yargs').argv;

gulp.task('default', function() {
  const env = argv.env || 'development';
  if (env === 'production') {
    gulp.series('build')(); // 这里可以替换成你的生产任务链
  } else {
    gulp.series('dev-index')();
  }
});

之后执行gulp --env production就跑生产打包流程，直接执行gulp默认跑开发流程，不用再手动切换任务。

内容的提问来源于stack exchange，提问作者Pinal