javascriptnode.jsgulphtml-minifier

How to connect "html-minifier" to gulp?


I am using gulp and I get an error on startup...
How do I fix this?
The returned value is not a function.
I've been trying to fix this for hours now, but I don't understand what's wrong.

Maybe this is somehow possible using this plugin? 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)

Solution

  • If using plugin "vinyl-source-stream".
    The solution to this question would be the following code.
    In this code, I used plugins that work with streams.
    But this code only converts one file!
    You can read more details about each plugin on 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 was the answer to this particular question.
    There is a more elegant solution to this problem.
    No third party plugins required. I described it in this post.