Как собрать все файлы в один?

Question

[zeuss56]

Вожусь с этим инструментом уже несколько дней, запарился.
Ресурсы:

res/
+img/
++favicon-16x16.png
++favicon-32x32.png
+index.pug
+index.js
+index.css

В index.css подключаются шрифты google fonts, normalize и skeleton с помощью @import из внешних CDN, в res/img/ возможно добавятся ещё файлы.
Как всё скачать, сжать и уместить инлайном и base64 с помощью Gulp или чем-либо другим в одном файле index.html?

Answer 1

[Сергей Горячев]

Ну так https://www.npmjs.com/package/gulp-base64
А инлайнить простым инклюдом можно https://pugjs.org/language/includes.html#including...

Comments

[zeuss56]

А как это всё соединить и что в gulpfile написать? Я не могу с ним разобраться, ничего не выходит.

[Сергей Горячев]

Вадим, только это судя по всему

gulp.task('build', function () {
    return gulp.src('./css/*.css')
        .pipe(base64())
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./public/css'));
});

а сам css и js через include вставить.

[zeuss56]

Я имел в виду все файлы из CDN скачать в проект и инлайнить не строчкой script src="...", а непосредственно весь код и абсолютно всё запихнуть в index.html. Чтоб при загрузке страницы браузер скачивал только один файл.

[Сергей Горячев]

Вадим, ну и конечно

.pipe(pug({
    pretty: '\t',
}))

чтобы вся эта конструкция была в одну строчку.

[Сергей Горячев]

Вадим, еще раз внимательно посмотри ссылку https://pugjs.org/language/includes.html#including...
как вставить css и js в html файл.

[Сергей Горячев]

Вадим, а чтобы скачивались нужны просто не cdn источники, например, гугл фонт можно качать через "gulp-google-fonts", нормалайс положить простым импортом в файл по соседсту, не такой он и большой.

[zeuss56]

Сергей Горячев, все gulp-плагины (аж три нашлось) для скачивания google шрифтов работают не совсем так, как необходимо, либо я не до конца разобрался. Есть ли плагин, превращающий любой URL в Base64 при компиляции? Зачем искать специально какой-то плагин для каждого css и ещё возиться с его конфигурацией, мне нужно чтоб css скачивался из источника во время билда.