运行 需要当前文件路径和名称的 gulp 插件
Run a gulp plugin that requires the current file path and name
我正在使用清除CSS 删除未使用的CSS。我的挑战是我需要动态地执行此操作。根据当前正在处理的 .css 文件,我需要获取它的路径和文件名,以便我可以动态插入 Purge 的内容 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" 是空的。尽管我希望 "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...
关于我如何解决这个问题的任何解决方案?
在尝试了数十种方法后,我认为这是一种对我有用的方法,值得与可能正在经历类似挑战的其他人分享:
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"))
);
});
基本上我使用 through 构建了自定义 gulp 流。这允许您读取有关当前处理的文件的信息,执行任何您想要的逻辑,然后使用新的转换文件调用 回调。
更详细的我做了什么:
- 读取文件信息(文件名及其位置)
- 获取 HTML 的位置 我想对照
检查我的 CSS
- 运行 uncss (而不是我最初使用的 purgecss)因为在这个工具上我可以发送原始 CSS 这对我来说很方便
- 根据 uncss 的输出,我用这个输出影响 CSS 文件的内容
- 使用这个新的转换文件调用回调
我正在使用清除CSS 删除未使用的CSS。我的挑战是我需要动态地执行此操作。根据当前正在处理的 .css 文件,我需要获取它的路径和文件名,以便我可以动态插入 Purge 的内容 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" 是空的。尽管我希望 "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...
关于我如何解决这个问题的任何解决方案?
在尝试了数十种方法后,我认为这是一种对我有用的方法,值得与可能正在经历类似挑战的其他人分享:
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"))
);
});
基本上我使用 through 构建了自定义 gulp 流。这允许您读取有关当前处理的文件的信息,执行任何您想要的逻辑,然后使用新的转换文件调用 回调。
更详细的我做了什么:
- 读取文件信息(文件名及其位置)
- 获取 HTML 的位置 我想对照 检查我的 CSS
- 运行 uncss (而不是我最初使用的 purgecss)因为在这个工具上我可以发送原始 CSS 这对我来说很方便
- 根据 uncss 的输出,我用这个输出影响 CSS 文件的内容
- 使用这个新的转换文件调用回调