Запустите плагин gulp, который требует текущий путь к файлу и имя

Я использую purgeCSS для удаления неиспользуемого CSS. Моя задача заключается в том, что мне нужно делать это динамически. В зависимости от текущего файла .css, который обрабатывается, мне нужно получить его путь и имя файла, чтобы я мог динамически вставить путь HTML-содержимого для запуска Purge.

Вот как выглядит мой код:

const gulp = require("gulp"),
    appRoot = require("app-root-path"),
    sass = require("gulp-sass"),
    purgecss = require("gulp-purgecss"),
    tap = require("gulp-tap"),
    path = require("path"),
    utilities = require(appRoot + "/Tools/Utilities-Functions/utilities-functions.js");

gulp.task("sass", () => {
    let htmlContentPath = "";

    return (
        gulp
            .src("./Pages/**/*.scss")
            // Compile .scss into .css
            .pipe(sass())
            // Get path for HTML file (dynamic)
            .pipe(
                tap(function (file, t) {
                    let fileName = path.basename(file.path);
                    // This is a simple function that returns the file name without extension (homepage.css >> homepage)
                    fileName = utilities.getFileNameWithoutExtension(fileName);

                    htmlContentPath = "/fullPath/Pages/" + fileName + "/compiled/html/" + fileName + ".html";
                })
            )
            // Remove unused CSS
            .pipe(
                purgecss({
                    content: [htmlContentPath]
                })
            )
            // Set the destination folder (main css)
            .pipe(gulp.dest("./dist/css"))
    );
})

По какой-то причине случается, что «htmlContentPath» для Purge пуст. Даже если бы я ожидал, что плагин «tap» всегда будет устанавливать для него значение. В результате это вызывает ошибку на purgecss:

введите описание изображения здесь

Как указано выше, эта ошибка происходит из-за того, что htmlContentPath пуст.

Другая попытка, которую я попробовал, состояла в том, чтобы сделать Очистку в плагине Tap, как это:

const gulp = require("gulp"),
    appRoot = require("app-root-path"),
    sass = require("gulp-sass"),
    purgecss = require("gulp-purgecss"),
    tap = require("gulp-tap"),
    path = require("path"),
    utilities = require(appRoot + "/Tools/Utilities-Functions/utilities-functions.js");

gulp.task("sass", () => {
    return (
        gulp
            .src("./Pages/**/*.scss")
            // Compile .scss into .css
            .pipe(sass())
            // Get path for HTML file (dynamic)
            .pipe(
                tap(function (file, t) {
                    let fileName = path.basename(file.path);
                    // This is a simple function that returns the file name without extension (homepage.css >> homepage)
                    fileName = utilities.getFileNameWithoutExtension(fileName);

                    let htmlContentPath = "/fullPath/Pages/" + fileName + "/compiled/html/" + fileName + ".html";

                    // Remove unused CSS
                    purgecss({
                        content: [htmlContentPath]
                    })
                })
            )
            // Set the destination folder (main css)
            .pipe(gulp.dest("./dist/css"))
    );
})

На этот раз это не дает ошибки, но Purge полностью игнорируется ...

Любое решение о том, как я мог решить это?

Всего 1 ответ


После попытки десятков подходов вот тот, который работал для меня, и подумал, что стоит поделиться с другими, которые могут столкнуться с аналогичной проблемой:

const gulp = require("gulp"),
    appRoot = require("app-root-path"),
    sass = require("gulp-sass"),
    path = require("path"),
    utilities = require(appRoot + "/Tools/Utilities-Functions/utilities-functions.js"),
    fs = require("fs"),
    through = require("through2"),
    uncss = require("uncss");

gulp.task("sass", () => {
    return (
        gulp
            .src("./Pages/**/*.scss")
            // Compile .scss into .css
            .pipe(sass())
            // Remove unused CSS
            .pipe(
                through.obj(function(file, encoding, callback) {
                    try {
                        const cssFileContent = file.contents.toString(); // Get the css file contents
                        let transformedFile = file.clone(), // Clone new  file for manipulation
                            fileName = path.basename(file.path),
                            htmlFilePath;

                        // This is a simple function that returns the file name without extension (homepage.css >> homepage)
                        fileName = utilities.getFileNameWithoutExtension(fileName);

                        // File path for the .html file
                        htmlFilePath = "/fullPath/Pages/" + fileName + "/compiled/html/" + fileName + ".html";

                        // Check if there is any css to be checked and if .html file exists
                        if (cssFileContent.length && fs.existsSync(htmlFilePath)) {
                            // Call uncss to remove unused css
                            uncss([htmlFilePath], { raw: cssFileContent }, function(error, output) {
                                if (error) {
                                    callback(null, transformedFile);
                                }

                                // Set new contents with the "used" css only (uncss' output)
                                transformedFile.contents = Buffer.from(output);

                                callback(null, transformedFile);
                            });
                        } else {
                            callback(null, transformedFile);
                        }
                    } catch (e) {
                        console.log("Gulp error - uncss: " + e.message);
                        callback(null, transformedFile);
                    }
                })
            )
            // Set the destination folder (main css)
            .pipe(gulp.dest("./dist/css"))
    );
});

По сути, я создал собственный поток gulp с помощью through . Это позволяет вам прочитать информацию о текущем обработанном файле, выполнить любую логику, которую вы хотите, а затем вызвать обратный вызов с новым преобразованным файлом.

Более подробно, что я сделал:

  1. Прочитать информацию о файле (имя файла и его местоположение)
  2. Получить местоположение для HTML, с которым я хочу проверить свой CSS
  3. Запустите uncss (вместо purgecss, который я использовал изначально), потому что с помощью этого инструмента я могу отправить необработанный CSS, что удобно в моем случае
  4. Из вывода uncss я влияю на содержимое файла CSS этим выводом
  5. Вызвать обратный вызов с этим новым преобразованным файлом

Есть идеи?

10000