node.jsgulphtml-minifier

How to connect plugin 'html-minifier?


The following code does not work. I am trying to connect the 'html-minifier' plugin to 'gulp' via the 'vinyl-source-stream' plugin.

Why am I doing this? I read on this page that you can connect the plugin 'browserify'. I wrote this code but it gives an error. How can I resolve it?

enter image description here

'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)

Solution

  • I wrote the following code and now the 'html-minifier' plugin can work directly in 'gulp'.
    The const options variable is the 'html-minifier' plugin settings.
    Then we create a function gHtmlMinify that can be run with the gulp gHtmlMinify command.
    return src(...) is your html files path.
    .on('data', function(file) {...} Each thread has a "data" event..
    We hang the processing of the "data" event..
    When the "data" event is called, the "file" object comes to us, which contains information: file name, file path, working directory and file contents.
    The content of the file is represented as a read buffer file.isBuffer().
    Buffer.from The raw data is stored in instances of the Buffer class.
    (file.contents.toString() This file content is BUFFER.
    The toString() method returns a function that represents an object. Converts to a string.

    console.log ({ // Outputting the structure of what the file consists of.
    contents: file.contents, // Content of the file BUFFER. The buffer is not a string!
    path: file.path, // Path to the file.
    cwd: file.cwd, // Current directory. "The directory where the gulp command was run".
    base: file.base, // Value before asterisks i.e. app/
    relative: file.relative, // Value after the asterisks i.e. filename.html
    dirname: file.dirname, // File directory.
    basename: file.basename, // File name.
    stem: file.stem, // File name without extension.
    extname: file.extname // File extension.
    })

    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)