javascript - 将 gulp-if 与 gulp-useref 和 gulp-uglify 一起使用

Question

我想使用 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

知道为什么我的文件没有被缩小吗？

---

参考

• 吞咽
• gulp-useref
• gulp-if
• 吞咽丑化
• 懒人管

Answer 1

对于遇到此问题的其他任何人：我发现一旦开始将 glob 放入eg**/的条件参数中的数组中，就必须使用通配符模式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));
});

然后它对我来说非常有效。

Answer 2

这里的问题是 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 来丑化：

.pipe(gulpif('main.js', uglify()))

Answer 3

你试过这个吗？

gulp.task('compile', function () {
    return gulp.src('index.html')
        .pipe(useref())
        .pipe(gulpif(['*.js', '!*.min.js'], uglify()))
        .pipe(gulp.dest(paths.build));
});