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