使用 gulp 缩小和连接（角度）Web 应用程序的完整工作流程答案

【问题标题】：Complette workflow for minifying and concatenating (angular) web apps with gulp使用 gulp 缩小和连接（角度）Web 应用程序的完整工作流程
【发布时间】：2014-10-16 07:21:53
【问题描述】：

感觉 99% 的教程都是关于使用 gulp.js 和正确的工作流程，只显示 js / css 文件（例如）被缩小和连接的部分。

但我还没有找到下一步该做什么来获得正确的index.html 文件，其中正确引用了新处理的文件，而无需手动编辑文件。

例如index.html:

<head>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  [...]
  <script src="javascript/angular.min.js"></script>
  <script src="javascript/angular-animate.min.js"></script>
  <script src="javascript/ui-bootstrap-tpls-0.11.0.min.js"></script>
  <script src="javascript/app/app.js"></script>
  <script src="javascript/app/controllers/controller.js"></script>
  <script src="javascript/app/services/factory.js"></script>
</body>

结果应该是这样的：

<head>
  <link rel="stylesheet" href="css/combined.css">
</head>
<body>
  [...]
  <script src="javascript/combined.js"></script>
</body>

combined.* 文件中的所有 css/js 文件都连接在一起但只有这些文件用 gulp 缩小，不以 *.min.js 或 *.min.css 结尾。

Gulp-usemin 和 gulp-useref 不适合，因为它们将构建块中的所有文件连接起来，然后你可以缩小（组合）结果（什么会再次缩小已经缩小的文件 - 我不想要那个） .

缺少的最后一步如何使工作流程完整？

【问题讨论】：

标签： javascript build concatenation minify gulp

【解决方案1】：

如上所述，由于它似乎不是对我的问题的任何令人满意的答案/解决方案，因此我最终使用了另一种方法，该方法在生产方面表现良好，并且在开发过程中也有好处。

我总是使用供应商库的未缩小版本（如 AngularJS、jQuery 等），HTML 看起来像这样（带有 useref 的特殊 cmets）：

<head>
  <!-- build:css css/styles.css -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <!-- endbuild -->
</head>
<body>
  [...]
  <!-- build:js js/scripts.js -->
  <script src="javascript/angular.js"></script>
  <script src="javascript/angular-animate.js"></script>
  <script src="javascript/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="javascript/app/app.js"></script>
  <script src="javascript/app/controllers/controller.js"></script>
  <script src="javascript/app/services/factory.js"></script>
  <!-- endbuild -->
</body>

gulpfile.js:

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    rev = require('gulp-rev'),
    revReplace = require('gulp-rev-replace');

gulp.task('default', ['combineminify']);

gulp.task('combineminify', function () {
    return gulp.src('index.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify({
            preserveComments: 'license'
        })))
        .pipe(gulpif('*.css', cleanCSS({
            keepSpecialComments: '*'
        })))
        .pipe(gulpif('*.js', rev()))
        .pipe(gulpif('*.css', rev()))
        .pipe(revReplace())        
        .pipe(gulp.dest('/path/to/destination/folder/'));
});

这个 gulp 脚本会在目标文件夹中创建一个新的 index.html 文件：

<head>
  <link rel="stylesheet" href="css/styles-1627b7eb0c.css">
</head>
<body>
  [...]
  <script src="js/scripts-595ed88b32.js"></script>
</body>

在文件夹 ./css 和 ./js 中创建了预期的两个 uglified 和缩小的 *.css 和 *.js 文件（带有附加到文件名的计算字符串以避免在某些浏览器中出现缓存问题）。

【讨论】：

【解决方案2】：

试试gulp-html-replace，包装你的脚本或css：

<!-- build:test-js -->
stuff to be replaced
<!-- endbuild -->

在你的 gulpfile 中：

.pipe(htmlreplace({
    'test-js': 'myfile.min.js'
}))

【讨论】：