Javascript 使用gulp缩小和连接（角度）web应用的完整工作流_Javascript_Build_Concatenation_Minify_Gulp

Javascript 使用gulp缩小和连接（角度）web应用的完整工作流

javascript build gulp

Javascript 使用gulp缩小和连接（角度）web应用的完整工作流,javascript,build,concatenation,minify,gulp,Javascript,Build,Concatenation,Minify,Gulp,在所有关于使用gulp.js和正确工作流的教程中，有99%的教程只显示了js/css文件（例如）缩小和连接的部分但是我没有找到下一步要做什么，以获得正确的index.html文件，其中正确引用了新处理的文件，而无需手动编辑该文件示例index.html： <head> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/app.css"

在所有关于使用gulp.js和正确工作流的教程中，有99%的教程只显示了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>


[...]

其中，

组合。*

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

*.min.css结尾
和不适用于，因为它们将构建块内的所有文件连接起来，然后可以缩小（组合）结果（将再次缩小已缩小的文件-我不希望这样）
要使工作流完整，缺少的最后一步是什么样子的？
尝试包装脚本或css：
<!-- build:test-js -->
stuff to be replaced
<!-- endbuild -->

正如上面所说，对于我的问题，没有任何令人满意的答案/解决方案，因此我最终使用了另一种方法，这种方法在生产方面效果良好，在开发过程中也有好处
我总是使用未统一版本的供应商LIB（如AngularJS、jQuery等），HTML看起来是这样的（带有对useref
的特殊注释）：

[...]

gulpfile.js
：
var gulp=require（'gulp'），
useref=require（'gulp-useref'），
gulpif=require（'gulp-if'），
uglify=需要（'gulp-uglify'），
cleanCSS=require（'gulp-clean-css'），
rev=需要（'gulp-rev'），
revReplace=require（'gulp-rev-replace'）；
任务（'default'，['combineminify']）；
吞咽任务（'combineminify'，函数（）{
return gulp.src（'index.html'）
.pipe（useref（））
.管道（gulpif（'*.js'，丑陋({
保留评论：“许可证”
})))
.pipe（gulpif（'*.css'，cleanCSS({
KeepsSpecialComments:“*”
})))
.pipe（gulpif（'*.js'，rev（））
.pipe（gulpif（'*.css'，rev（））
.pipe（revReplace（））
.pipe（gulp.dest（'/path/to/destination/folder/'）；
});

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

[...]

在文件夹/css
和/js
中创建了预期的两个经过简化和缩小的*.css
和*.js
文件（在文件名上附加了计算字符串，以避免在某些浏览器中出现缓存问题）
.pipe(htmlreplace({
    'test-js': 'myfile.min.js'
}))