node.js - 如何连接插件'html-minifier？

Question

以下代码不起作用。我正在尝试通过“vinyl-source-stream”插件将“html-minifier”插件连接到“gulp” 。

我为什么要这样做？我在此页面上读到您可以连接插件“browserify”。我写了这段代码，但它给出了一个错误。我该如何解决？

'use strict';
const { src, dest, series } = require('gulp')
const htmlMinify = require('html-minifier').minify;
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

const options = {
    includeAutoGeneratedTags: true,
    removeAttributeQuotes: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    sortClassName: true,
    useShortDoctype: true
};
const result = htmlMinify('frontend/*.html', options)

function test() {
    return result.bundle()
        .pipe(source('frontend/**/*.html'))
        .pipe(buffer())
        .pipe(dest('public'))
}

exports.build = series(test)

Answer 1

我编写了以下代码，现在'html-minifier'插件可以直接在'gulp'中工作。const 选项变量是“html-minifier”插件设置
。 然后我们创建一个可以使用gulp gHtmlMinify命令运行的函数 gHtmlMinify 。return src(...)是您的 html 文件路径。.on('data', function(file) {...}每个线程都有一个“data”事件。 我们挂起对“data”事件的处理。 当调用“data”事件时，“file " 对象来到我们这里，其中包含信息：文件名、文件路径、工作目录和文件内容。






Buffer.from原始数据存储在Buffer类的实例中。
( file.contents .toString() 此文件内容为BUFFER。toString ()方法返回一个表示对象的函数。转换为字符串
。

console.log ({ // 输出文件的结构
。contents: file.contents, // 文件BUFFER的内容。缓冲区不是字符串！
path: file.path, // 文件的路径.
cwd: file.cwd, // 当前目录。“运行 gulp 命令的目录”.
base: file.base, // 星号之前的值，即 app/
relative: file.relative, // 星号之后的值，即filename.html
dirname: file.dirname, // 文件目录
.basename: file.basename, // 文件名
.stem: file.stem, // 不带扩展名的文件名.extname
: file.extname // 文件扩展名.
})

const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');

const options = {
    includeAutoGeneratedTags: true,
    removeAttributeQuotes: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    sortClassName: true,
    useShortDoctype: true,
    collapseWhitespace: true
};

function gHtmlMinify() {
    return src('app/**/*.html')
        .on('data', function(file) {
            const buferFile = Buffer.from(htmlMinify.minify(file.contents.toString(), options))
            file.contents = buferFile;
            console.log(file);
            return;
        })
        .pipe(dest('build'))
}


exports.gHtmlMinify = series(gHtmlMinify)