Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
运行需要当前文件路径和名称的gulp插件_Gulp_Css Purge - Fatal编程技术网

运行需要当前文件路径和名称的gulp插件

运行需要当前文件路径和名称的gulp插件,gulp,css-purge,Gulp,Css Purge,我正在使用purgeCSS删除未使用的CSS。我的挑战是,我需要动态地完成这项工作。根据当前正在处理的.css文件,我需要获取其路径和文件名,以便动态插入内容HTML路径以运行清除 下面是我的代码的样子: const gulp = require("gulp"), appRoot = require("app-root-path"), sass = require("gulp-sass"), purgecss = require("gulp-purgecss"),

我正在使用purgeCSS删除未使用的CSS。我的挑战是,我需要动态地完成这项工作。根据当前正在处理的.css文件,我需要获取其路径和文件名,以便动态插入内容HTML路径以运行清除

下面是我的代码的样子:

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”为空。即使我希望“点击”插件总是为它设置一个值。因此,这会在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"))
    );
})
这次它没有给出错误,但是清除被完全忽略


在尝试了几十种方法之后,有没有关于如何解决这个问题的解决方案?

这里是一个对我有效的解决方案,我认为值得与其他可能面临类似挑战的人分享:

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"))
    );
});
基本上,我使用创建了一个自定义的吞咽流。这允许您读取有关当前处理文件的信息,执行所需的任何逻辑,然后使用新转换的文件调用回调

关于我所做的更多细节:

  • 读取文件信息(文件名及其位置)
  • 获取要检查CSS的HTML的位置
  • 运行(而不是我最初使用的purgecss),因为在这个工具上,我可以发送原始CSS,这在我的情况下非常方便
  • 从uncss的输出中,我使用此输出影响CSS文件的内容
  • 使用此新转换的文件调用回调