Задать вопрос
@amorphine

Как оформить задачу в gulp на генерацию критического CSS по заданным URL-адресам плагином critical?

Используется модуль npm critical для генерации критических CSS. Однако html-файлы для него скачиваются вручную:
gulp.task("criticalCss", function() {
    var critical = require('critical'),
        name = "ProductProductCommon";
    critical.generate({
        base: 'uncss_ignore/',
        src: object + '.html',
        dest: 'css/critical/mobile' + object + '.css',
        minify: true,
        dimensions: [{
            width: 360,
            height: 640
        }],
    });
});

Типов страниц много, автоматизации явно недостаточно.
С помощью чего можно автоматизировать процесс, чтобы, например, из массива:
[{name: "Product", url: "site.com/product/2345.html"},
{name: "Catalog", url: "site.com/catalog.html"}]

cкрипт скачивал нужные страницы и отдавал critical? Какие дополнительные модули можно использовать и как это можно оформить?

UPD. Пока других мнений нет, выяснил, что модуль critical поддерживает загрузку по url:
module.exports = function(gulp, plugins) {
    return function () {
        var critical = require('critical'),
            object = "ProductProductCommon",
            settings = require("./settings.js");

        critical.generate({
            src: settings.base_url,
            dest: './' + object + '.css',
            minify: true,
            dimensions: [{
                width: 360,
                height: 640
            }],
        });
    };
}


Здесь base-url - всего-лишь один урл. Как сделать, красиво и асинхронно с итерацией по массиву с урлами вместо html-файлов?

UPD 2. На данный момент пришел к такому решению

module.exports = function(gulp, plugins) {
    return function () {
        var critical = require('critical'),
            settings = require("./settings.js"),
            urls = [
                {name: "home", url:""},
                {name: "product", url:"palatki/34174.html"},
                {name: "catalog", url:"palatki.html"},
                {name: "o_nas", url:"o_nas.html"},
                {name: "dostavka", url:"dostavka.html"},
                {name: "oplata", url:"oplata.html"},
                {name: "basket", url:"basket.html"},
                {name: "contacts", url:"contacts.html"}
            ];

        urls.forEach(function(entry){
            critical.generate({
                src: settings.base_url + entry.url,
                dest: settings.dest_folder + entry.name + '.css',
                minify: true,
                dimensions: settings.dimensions
            });
        });
    };
}


Я не спец по гульпу и особенно по ноде, но мало где видел итерацию в пользовательских решениях. Если есть рекомендации, буду рад.
  • Вопрос задан
  • 592 просмотра
Подписаться 3 Сложный 3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы