[英]Gulp useref concatenates js files twice
I have such gulp task 我有这样的任务
gulp.task('html', [], function() {
var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', {read: false});
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: options.tmp + '/partials',
addRootSlash: false
};
var htmlFilter = $.filter('*.html');
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
var assets;
return gulp.src(options.tmp + '/serve/*.html')
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe(assets = $.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngAnnotate())
.pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', options.errorHandler('Uglify'))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true,
conditionals: true
}))
.pipe(htmlFilter.restore())
.pipe(gulp.dest(options.dist + '/'))
.pipe($.size({title: options.dist + '/', showFiles: true}));
});
Generated by gulp angular yeoman, but I did some changes to isolate it from other tasks and localize problem. 由gulp angular yeoman生成,但我进行了一些更改以将其与其他任务隔离并定位问题。
The problem is, that after all concatenations produces app-%%%.js file contains dublicate code: original code eg and minified one 问题是,在所有串联后产生的app-%%%。js文件包含重复的代码:例如原始代码,并缩小了一个
function() {
"use strict";
function e(e, t) {
return e(t + "/something", {}, {get: {method: "get", isArray: !0}})
}
angular.module("app.mappings").factory("Something", e), e.$inject = ["$resource", "API_ROOT"]
}(),
angular.module("app.mappings").factory("Something", Something), Something.$inject = ["$resource", "API_ROOT"]
This breaks my application. 这破坏了我的应用程序。
Can someone help understand what's wrong with this build task? 有人可以帮助您了解此构建任务出了什么问题吗?
PS It seems that scripts injected in html look like PS似乎在HTML中注入脚本看起来像
<script src="app/mappings/mappings.module.js"></script>
and both .tmp/serve/ directory and src/ directory has the same structure. .tmp / serve /目录和src /目录具有相同的结构。 Useref searches both and duplicates happen Useref同时搜索和重复
I realize the question is kind of old, but I've just came across the same problem. 我意识到这个问题有点陈旧,但我遇到了同样的问题。
The reason for duplicates was the line in index.html: 重复的原因是index.html中的行:
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
...
<!-- endbuild -->
Gulp-useref looks for these lines and converts them like so: Gulp-useref查找这些行并将其转换为:
From: 从:
<html>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
To: 至:
<html>
<body>
<script src="scripts/combined.js"></script>
</body>
</html>
It looks for the script files in paths based on the comment 它根据注释在路径中查找脚本文件
build:js({.tmp/serve,.tmp/partials,src}) build:js({。tmp / serve,.tmp / partials,src})
So in this case in 3 locations: 因此,在这种情况下,位于3个位置:
If your build scripts copied the files from src
to .tmp/serve
in meantime, useref
found the files in both locations and so pasted them 2 times to the result file. 如果您的构建脚本同时将文件从src
复制到.tmp/serve
,则useref
在两个位置都找到了文件,因此将它们粘贴了两次到结果文件中。 So the fix is either to modify your build scripts not to copy the files or change that line in index.html to: 因此,解决方法是修改您的构建脚本而不复制文件,或者将index.html中的该行更改为:
<!-- build:js(.tmp/serve) scripts/app.js -->
I guess it might not be the help for you after 5 years, but hopefully someone else will find it useful. 我想5年后可能不会对您有所帮助,但希望其他人会发现它有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.