我想使用gulp-useref将我的所有JavaScript文件连接成一个。
在我的JavaScript文件中,我混合使用预缩小和非缩小文件。
我只想对尚未缩小的文件进行uglify(出于构建性能原因),https://github.com/jonkemp/gulp-useref#transform-streams表明这是可能的(事实上,它看起来很简单)。以下是我的Gulp任务定义:
gulp.task('compile', function () {
return gulp.src('index.html')
.pipe(useref({}, lazypipe().pipe(function() {
return gulpif(['*.js', '!*.min.js'], uglify());
})))
.pipe(gulp.dest(paths.build));
});
这是有效的,因为我得到了一个连接文件,但未缩小的文件仍然没有被清除(预先缩小的文件仍然缩小 - 正如预期的那样)。
我的代码部分基于此:https://github.com/craigjennings11/gulp-uglifyjs
知道为什么我的文件没有被缩小?
参考
答案 0 :(得分:2)
对于遇到此问题的其他人:我发现一旦我开始将我的globs放在**/
的条件参数中的数组中,我必须使用gulpif
通配符模式。
gulp.task('compile', function () {
return gulp.src('index.html')
.pipe(useref({}, lazypipe().pipe(function() {
return gulpif(['**/*.js', '!**/*.min.js'], uglify());
})))
.pipe(gulp.dest(paths.build));
});
然后它对我来说很完美。
答案 1 :(得分:1)
这里的问题是useref只传递连接的文件名,而不是连接的单个文件名。
//in html
<!-- build:js assets/scripts/concat.js --> // <-- this one
<script src="assets/scripts/jquery.min.js"></script> // <-- not this one
<script src="assets/scripts/gsap.min.js"></script> // <-- not this one
<script src="assets/scripts/script1.js"></script> // <-- not this one
<script src="assets/scripts/script2.js"></script> // <-- not this one
<!-- endbuild -->
因此,你需要管道的东西必须应用于整个连接文件。
但是稍微重新安排就可以做到这样的事情:
//in html
<!-- build:js assets/scripts/libs.js -->
<script src="assets/scripts/jquery.min.js"></script>
<script src="assets/scripts/gsap.min.js"></script>
<!-- endbuild -->
<!-- build:js assets/scripts/main.js -->
<script src="assets/scripts/script1.js"></script>
<script src="assets/scripts/script2.js"></script>
<!-- endbuild -->
这样你可以使用gulp-if将main.js隔离到uglify:
.pipe(gulpif('main.js', uglify()))
答案 2 :(得分:0)
你试过这个吗?
gulp.task('compile', function () {
return gulp.src('index.html')
.pipe(useref())
.pipe(gulpif(['*.js', '!*.min.js'], uglify()))
.pipe(gulp.dest(paths.build));
});