如何将“html-minifier”连接到 gulp？答案

【问题标题】：How to connect "html-minifier" to gulp?如何将“html-minifier”连接到 gulp？
【发布时间】：2021-06-11 23:27:05
【问题描述】：

我正在使用 gulp，但在启动时出现错误...
我该如何解决这个问题？
返回的值不是函数。
我已经尝试解决这个问题好几个小时了，但我不明白出了什么问题。

也许使用这个插件可以做到这一点？ vinyl-source-stream

const htmlMinify = require('html-minifier').minify

function html() {
    const postcssPlugins = [
        autoprefixer({
            overrideBrowserslist: [
                '>0.25%',
                'not ie 11',
                'not op_mini all'
            ]
        }),
        pxtorem({
            rootValue: 16,
            unitPrecision: 5,
            propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
            replace: false,
            mediaQuery: false,
            minPixelValue: 0,
        })
    ];
    const postcssOptions = { from: undefined }
    const filterType = /^text\/css$/
    const plugins = [
        posthtmlPostcss(postcssPlugins, postcssOptions, filterType)
    ];
    const options = {
        includeAutoGeneratedTags: true,
        removeAttributeQuotes: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        sortClassName: true,
        useShortDoctype: true
    }
    return src(config.app.html)
        .pipe(include({ prefix: '@@' }))
        .pipe(posthtml(plugins))
        .pipe(htmlMinify(options))
    .pipe(dest(config.build.html))
}

exports.stream = series(clear, html, stream)

【问题讨论】：

标签： javascript node.js gulp html-minifier

【解决方案1】：

如果使用插件“vinyl-source-stream”。
这个问题的解决方案是下面的代码。
在这段代码中，我使用了与流一起使用的插件。
但是这段代码只转换一个文件！
您可以在 npmjs 上阅读有关每个插件的更多详细信息。
html-minifier、vinyl-fs、vinyl-source-stream、map-stream

const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');
const vfs = require('vinyl-fs');
const source = require('vinyl-source-stream');
const map = require('map-stream');

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

function sol() {
    let minify = function(file, cb) {
        cb(null, htmlMinify.minify(file.contents.toString(), options));
    };

    return vfs
        .src(['app/index.html'])
        .pipe(map(minify))
        .pipe(source('index.html'))
        .pipe(vfs.dest('build'));
}

exports.sol = series(sol);

这是这个特定问题的答案。
这个问题有一个更优雅的解决方案。
无需第三方插件。我在this post中描述了它。

【讨论】：