В проекте используются критические CSS-правила, получаемые с помощью модуля Critical . На данный момент он читает html из заранее сохраненных веб-страниц, имена маршрутов, которые потом составляют часть имени сгенерированного критического сss, вносятся вручную, что очень неудобно, если маршрутов(а значит и привязанных типовых страниц) много. А если меняются CSS, то нужно генерировать критический заново, опять вручную сохраняя страницы.
Поэтому возникла потребность, чтобы gulp брал из заранее подготовленного объекта маршрут, скачивал типовые страницы и генерировал CSS.
Как было раньше:
gulp.task("desktopCriticalCss", function() {
var critical = require('critical'),
object = "ProductProductCommon";
critical.generate({
base: 'uncss_ignore/',
src: object + '.html',
dest: 'css/critical/mobile' + object + '.css',
minify: true,
dimensions: [{
width: 1920,
height: 1080
}],
});
});
Как хочется теперь:
1. В отдельном файле храним маршруты и типовые страницы
var url2filenames =
{
"ProductProduct":
[
"https://***.ru/samsung-sm-a300f-galaxy-a3-white-133955.html",
"https://***.ru/huawei-g620s-lte-black-136150.html"
],
};
module.exports.url2filenames = url2filenames;
2. В отдельном модуле генерируем критический css
var gulp = require("gulp"),
critical = require('critical').stream,
download = require("gulp-download-stream"),
request = require('request'),
url2filenames = require("./url_to_critical_filenames.js").url2filenames;
gulp.task("mobileCriticalCss", function() {
for (route in url2filenames) {
var urls = url2filenames[route];
urls.forEach(function(url){
request(url)
.pipe(critical({
dest: 'css/critical/mobile/mobile' + route + '.css',
minify: true,
dimensions: [{
width: 360,
height: 640
}]
}));
});
}
});
Последнее - нерабочий код, просто попытки. Подскажите, как можно получить html через URL?