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

知道為什么我的文件沒有被縮小嗎？

---

參考

• 吞
• 一飲而盡，useref
• 吞掉，如果
• 一飲而盡，丑化
• lazypipe

Answer 1

對於其他遇到此問題的人：我發現一旦我開始將我的globs放在gulpif的condition參數中的數組內，我必須使用**/ wildcard模式，例如

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與uglify隔離：

.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));
});