感觉 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不适合，因为它们将构建 block 内的所有文件连接在一起，然后您可以缩小(组合的)结果(什么会再次缩小已经缩小的文件 - 我不想要那样)。
这个缺失的最后一步看起来如何使工作流程完整？
最佳答案
由于它似乎不是我上述问题的任何令人满意的答案/解决方案，所以我最终使用了另一种方法，这种方法在生产方面按预期工作良好，并在开发过程中受益。
我一直在使用未缩小版本的 vendor 库(如 AngularJS、jQuery 等)，然后 HTML 看起来像这样(userref 有特殊注释):
<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 文件(在文件名后附有计算字符串以避免某些浏览器中的缓存问题)是在文件夹 ./css 和 ./js 中创建。
关于javascript - 使用 gulp 缩小和连接( Angular )网络应用程序的完整工作流程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25447001/