gulp useref не работает с несколькими файлами html

У меня есть 5 файлов HTML в моем проекте, и у каждого есть блок useref внизу, например:

<!-- build:js static/js/main.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

Общий файл JS во всех 5 файлах — plugins.js. Мне нужен этот файл JS в каждом файле HTML, и он повторяется во всех моих файлах. В моем втором файле HTML есть этот блок (опять же там есть plugins.js):

<!-- build:js static/js/main.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

И мой пятый файл HTML имеет этот блок:

<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

Итак, в каждом файле я использую plugins.js, а в некоторых файлах использую другие библиотеки. Но когда я запускаю задачу, эти три файла не объединяются в main.js. Единственное, что есть в main.js — это контент из plugins.js. Другие библиотеки в main.js не входят. Почему это так? Могу ли я вообще использовать этот плагин таким образом?

Моя задача глотка:

gulp.task('compress:js:html', ['clear:dist'], function () {
    return gulp.src('./*.html')
        .pipe(useref())
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('./dist/'))
});

node.js javascript html gulp gulp-useref
person riogrande    schedule 23.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Во всех ваших HTML-файлах указано одно и то же место для объединенного файла (static/js/main.js), но все они указывают разные исходные файлы, которые должны быть объединены. В зависимости от порядка, в котором обрабатываются ваши HTML-файлы, вы получите разные static/js/main.js. В вашем случае тот, что из вашего первого примера.

У вас есть два варианта:

  1. Для каждого HTML-файла укажите другое место для объединенного файла:

    HTML-файл 1:

    <!-- build:js static/js/main1.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

    HTML-файл 2:

    <!-- build:js static/js/main2.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

    HTML-файл 3:

    <!-- build:js static/js/main3.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

    Это уменьшит количество запросов, которые браузер должен делать для каждой страницы, но не использует кэширование браузера.

  2. Обратитесь к всем файлам JS в каждом файле HTML, независимо от того, нужен ли вам файл JS для этой конкретной страницы или нет. Это означает, что во всех трех ваших HTML-файлах есть следующее:

    <!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

    Поскольку браузеры будут кэшировать результирующий файл main.js, его нужно будет загрузить только один раз.

person Sven Schoenung    schedule 23.03.2016
comment
поэтому такие плагины, как useref и usemin, не могут объединять js из всех файлов .html в один и тот же main.js в одном и том же месте? - person riogrande; 23.03.2016
comment
Я так не думаю, нет. Каждый HTML-файл обрабатывается сам по себе, независимо от того, что определено в других HTML-файлах. - person Sven Schoenung; 23.03.2016
comment
мое решение -> gulp-replace-html, который заменяет только html без объединения или копирования файлов + gulp-concat с uglify и sourcemaps. Спасибо за все дружище! - person riogrande; 23.03.2016
comment
@riogrande - не могли бы вы объяснить свое решение, у меня такая же проблема. - person Gerfried; 02.12.2017