Как правильно внедрить пересмотренные активы с gulp-inject в шаблоны Jade?

Question

У меня есть node.js приложение с express промежуточное программное обеспечение. Статические страницы сделаны с использованием jade шаблонный движок и получить по запросу с res.render("template-name.jade");

ФайлыSASS и javascript минимизируются и помещаются в /build/js а также /build/css папки соответственно.

Кроме того, используя gulp с gulp-rev каждый файл получает строку ревизии, прикрепленную к его имени с созданным файлом манифеста. Следующий код задачи используется для файлов javascript:

gulp.task( "prepare_js", function() {
    gulp.src( "./js/*.js" )
    .pipe( annotate() )
    .pipe( gulp_if( isDev, uglify() ) )
    .pipe( rev() )
    .pipe( gulp.dest('build/js') )  // write rev'd assets to build dir
    .pipe( rev.manifest() )
    .pipe( gulp.dest('build/js') ) // write manifest to build dir
    .pipe( gulp.dest( "./build/js") )
});

Задача генерирует файл-манифест, например:

{
    "index.js": "index-d41d8cd9.js"
}

Аналогичная задача должна быть для компиляции sass в css.

Вопрос в том, как использовать gulp-inject правильно (в этой задаче или как отдельный) найти и заменить в каждом файле.jade только активы, определенные в этом файле.jade на активы со строкой ревизии?

Я вижу 2 основных подхода, как это решить.

Подход 1

Работайте с одними и теми же шаблонами jade каждый раз и каким-то образом определяйте в каждом файле.jade, какой файл (на основе оригинала, без присоединенной строки ревизии, имя файла) должен быть введен. Затем выполните поиск строк, оставшихся от предыдущего задания, и замените их новыми, имеющими новую строку ревизии.

Например, допустим, у нас есть 2 файла. Каждый из них может использовать как общие активы, так и некоторые конкретные.

// index.jade
script(src="/js/index-xxxxxx.js", type="text/javascript")
script(src="/js/more-js-xxxxxx.js", type="text/javascript")
link(rel="stylesheet", href="/css/index-xxxxxx.css")


// product.jade
script(src="/js/index-xxxxxx.js", type="text/javascript") // <-- here we use index-xxxxxx.js also 
link(rel="stylesheet", href="/css/file1-xxxxxx.css")
link(rel="stylesheet", href="/css/file2-xxxxxx.css")

Давайте предположим, что здесь xxxxxx определяет строки ревизии, оставленные от предыдущей задачи gulp. В нашем случае приведенные выше файлы можно изменить, добавив комментарии для инъекции, например:

// index.jade
<!-- index.js -->
script(src="/js/index-xxxxxx.js", type="text/javascript")
<!-- one-more-js-file.js -->
script(src="/js/one-more-js-file-xxxxxx.js", type="text/javascript")
<!-- styles.css -->
link(rel="stylesheet", href="/css/styles-xxxxxx.css")
<!-- endinject -->


// product.jade
<!-- product.js -->
script(src="/js/index-xxxxxx.js", type="text/javascript")
<!-- file1.css -->
link(rel="stylesheet", href="/css/file1-xxxxxx.css")
<!-- file2.css -->
link(rel="stylesheet", href="/css/file2-xxxxxx.css")
<!-- endinject -->

Это должно сказать gulp-inject, что конкретная строка должна быть изменена на новую, содержащую файлы с новой строкой ревизии.

Подход 2

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

Во всех шаблонах в первой папке просто добавьте комментарии, какой файл должен быть добавлен, например:

// index.jade
<!-- index.js -->
<!-- one-more-js-file.js -->
<!-- styles.css -->
<!-- endinject -->


// product.jade
<!-- index.js -->
<!-- file1.css -->
<!-- file2.css -->
<!-- endinject -->

Каково было бы правильное решение здесь? И как написать / изменить задачу gulp, чтобы правильно добавить ресурсы с теми, у которых есть строка ревизии (на основе сгенерированного файла манифеста или как-то без него)?

Спасибо.

Answer 1

Что касается синтаксиса инъекций, я думаю, это должна быть одна пара для одного файла, например

<!-- index.js -->
<script src="index-xxxxxx.js"></script>
<!-- endinject -->

А что касается того, почему он не вводится правильно, то я думаю, вам нужно предварительно обработать файл Jade. Попробуйте тот же подход с вашим тестовым HTML-файлом, и он будет работать. Но Gulpjs нужно предварительно обработать Jade, чтобы сделать инъекцию, и до собственного Jade-компилятора Expressjs. Глоток-нефрит