Gulp 如何连接插件'html-minifier?

5f0d552i  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(146)

下面的代码不起作用。我正在尝试通过'vinyl-source-stream'插件将'html-minifier'插件连接到“gulp”。
我为什么要这样做?我在this page上看到你可以连接插件“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)
ruyhziif

ruyhziif1#

我写了下面的代码,现在“html-minifier”插件可以直接在“gulp”中工作了。

const options变量是“html-minifier”插件设置。

然后我们创建一个函数gHtmlMinify,它可以通过gulp gHtmlMinify命令运行。

**return src(...)**是html文件的路径。
**.on('data',function(file){...}**每个线程都有一个“data”事件..

我们挂起“数据”事件的处理..
当“data”事件被调用时,“file”对象出现在我们面前,它包含信息:文件名、文件路径、工作目录和文件内容。
文件的内容表示为读取缓冲区file.isBuffer()

Buffer.from原始数据存储在Buffer类的示例中。

file.contents.toString()此文件内容为缓冲区。

**toString()**方法返回一个表示对象的函数。转换为字符串。
console.log({//输出文件的组成结构。
contents:file.contents,//文件BUFFER的内容,缓冲区不是字符串!
path:file.path,//文件的路径。
cwd:file.cwd,//当前目录。“运行gulp命令的目录”。
base:file.base,//星号前的值,即app/
relative:file.relative,//星号后面的值,例如filename.html
目录名:文件.目录名,//文件目录.
基本名称:file。基本名称,//文件名称。
stem:file.stem,//不带扩展名的文件名。
extname:文件.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)

相关问题