Использование gulp-if с gulp-useref и gulp-uglify

Question

Я хочу использовать gulp-useref для объединения всех моих файлов JavaScript в один.

В моих файлах JavaScript у меня есть смесь предварительно минимизированных и не минимизированных файлов.

Я хотел бы только удалить файлы, которые еще не были уменьшены (по соображениям производительности сборки), и https://github.com/jonkemp/gulp-useref предполагает, что это возможно (на самом деле, это выглядит просто). Вот мое определение задачи 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

Для всех, кто столкнулся с этой проблемой: я обнаружил, что должен был использовать **/ шаблон подстановки, как только я начал помещать свои глобусы внутри массива в параметре условия 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 для 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));
});