Обращение к встроенным файлам в формате html с использованием модулей компоновки

Question

Я использую Gulp для создания ресурсов SCSS, Pug и ES6 для моего статического веб-сайта.Я знаю, что можно хэшировать имена файлов и выводить файлы в другой каталог.

Для моего конкретного примера:

• моя разметка мопса находится в каталоге ~/src/pages и собирается в каталог ~/public/.
• Мои таблицы стилей SCSS находятся в каталоге ~/src/stylesheets.Они собираются в директорию ~/public/style

Моя проблема заключается в том, что когда я ссылаюсь на файлы своих таблиц стилей из Pug, я должен ссылаться на уже созданную папку следующим образом:

link(rel='stylesheet', href='./style/example.css')

Для моей IDE это не имеет смысла, поскольку каталог style не существует в каталоге ~/src/pages.

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

link(rel='stylesheet', href='../stylesheets/example.scss')

Есть ли способ, которым это возможно, или я полностью ошибаюсьнаправление?Если нет, то где я ищу?

Answer 1

Вы можете использовать что-то вроде gulp-watch для компиляции ваших файлов .scss в реальном времени, тогда ваш файл /style/example.css будет существовать и будет автоматически перекомпилирован при изменении example.scss

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

По сути, вы делаетеизменение любого файла в вашем проекте и просмотр обновления в реальном времени.

Answer 2

Решение сделать имя файла похожим на хэш

• gulp, для автоматизации нашей задачи
• gulp-rev , для переименования наших файлов со случайными хэшами.
• gulp-rev-collector , для переключения нехешированных ссылок с помощью хеш-ссылок внутри наших файлов.
• rev-del , для удаленияфайлы без хэша в нашей папке / dist.

Пример кода:

gulpfile.js

gulp.task("revision:rename", ["serve"], () =>
  gulp.src(["dist/**/*.html",
            "dist/**/*.css",
            "dist/**/*.js",
            "dist/**/*.{jpg,png,jpeg,gif,svg}"])
  .pipe(rev())
  .pipe(revdel())
  .pipe(gulp.dest("dist"))
  .pipe(rev.manifest({ path: "manifest.json" }))
  .pipe(gulp.dest("dist"))
);

manifest.json

{
  style.css: style-ds9udjvci.css,
  main.js: main-dijds9xc9.min.js
}

Для создания нашего обновления ревизии в файле, например, переписать каждую ссылку для каждого ключа manifest.json на соответствующее значение в каждом файле html / json / css / js (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)

gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
  gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
 .pipe(collect())
 .pipe(gulp.dest("dist"))
);

Answer 3

Gulp не может автоматически изменять пути к файлам, используемым внутри htmls.Поэтому вам придется использовать сгенерированный путь к файлу для доступа к файлам стилей.

Хотя, если вы хотите, чтобы в качестве структуры папок вашего scss был указан путь к файлу, вам придется заменить содержимое pugфайл после того, как gulp завершил преобразование его в HTML.

Вы можете преобразовать html в String и использовать метод .replace для замены любого содержимого, которое хотите изменить, и, наконец, проанализировать строку в HTML-документе.

Надеюсь, это поможет !!