gulp教程之gulp-htmlmin

Ooo_My_God发表于 分类:构建工具 阅读(16078) 评论(18)

简介:

使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。

1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

2、本地安装gulp-htmlmin

2.1、github:https://github.com/jonschlinkert/gulp-htmlmin

2.2、安装:命令提示符执行 cnpm install gulp-htmlmin --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-htmlmin --save-dev什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

3、配置gulpfile.js

3.1、基本使用

3.2、更多压缩【参数】请查看 https://github.com/kangax/html-minifier [html-minifer docs]

4、执行任务

4.1、命令提示符执行:gulp testHtmlmin

5、结束语

5.1、本文有任何错误,或有任何疑问,欢迎留言说明。

下载附件

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥
<< 上一篇:

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/20

相关推荐

评论

网友最新评论 (18)

  1. [11:39:07] Using gulpfile D:\下载文件\hexo\gulpfile.js
    [11:39:07] Starting ‘minify-html’…
    [11:39:07] Finished ‘minify-html’ after 42 ms
    [11:39:07] Starting ‘minify-css’…
    [11:39:07] Starting ‘minify-js’…
    [11:39:07] Starting ‘minify-images’…
    [11:39:07] Finished ‘minify-images’ after 11 ms
    [11:39:20] Finished ‘minify-js’ after 13 s
    [11:39:30] Finished ‘minify-css’ after 23 s
    [11:39:30] Starting ‘default’…
    [11:39:30] Finished ‘default’ after 5.92 μs

    events.js:160
    throw er; // Unhandled ‘error’ event
    ^
    Error: Parse Error:
    at new HTMLParser (D:\下载文件\hexo\node_modules\html-minifier\src\htmlparse r.js:235:13)
    at minify (D:\下载文件\hexo\node_modules\html-minifier\src\htmlminifier.js:9 46:3)
    at Object.exports.minify (D:\下载文件\hexo\node_modules\html-minifier\src\ht mlminifier.js:1299:10)
    at objectAssign.fileName (D:\下载文件\hexo\node_modules\gulp-htmlmin\index.j s:22:39)
    at module.exports (D:\下载文件\hexo\node_modules\tryit\tryit.js:8:9)
    at minifyHtml (D:\下载文件\hexo\node_modules\gulp-htmlmin\index.js:21:9)
    at Transform.htmlminTransform [as _transform] (D:\下载文件\hexo\node_modules \gulp-htmlmin\index.js:51:7)
    at Transform._read (D:\下载文件\hexo\node_modules\readable-stream\lib\_strea m_transform.js:159:10)
    at Transform.Readable.read (D:\下载文件\hexo\node_modules\readable-stream\li b\_stream_readable.js:360:10)
    at flow (D:\下载文件\hexo\node_modules\readable-stream\lib\_stream_readable. js:734:34)
    at DestroyableTransform. (D:\下载文件\hexo\node_modules\readable- stream\lib\_stream_readable.js:605:7)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at onwriteDrain (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readabl e-stream\lib\_stream_writable.js:300:12)
    at afterWrite (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readable- stream\lib\_stream_writable.js:288:5)
    at onwrite (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readable-str eam\lib\_stream_writable.js:281:7)

    LourisXu 08-26 11:48 回复
  2. gulp.task(‘minify-html’, function() {
    var options = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    collapseBooleanAttributes: true,//省略布尔属性的值 ==>
    removeEmptyAttributes: true,//删除所有空格作属性值 ==>
    removeScriptTypeAttributes: true,//删除的type=”text/javascript”
    removeStyleLinkTypeAttributes: true,//删除和的type=”text/css”
    minifyJS: true,//压缩页面JS
    minifyCSS: true,//压缩页面CSS
    minifyURLs: true
    };
    gulp.src(‘./public/**/*.html’)
    .pipe(htmlmin(options))
    .pipe(gulp.dest(‘./public’));
    });
    [11:39:07] Using gulpfile D:\下载文件\hexo\gulpfile.js
    [11:39:07] Starting ‘minify-html’…
    [11:39:07] Finished ‘minify-html’ after 42 ms
    [11:39:07] Starting ‘minify-css’…
    [11:39:07] Starting ‘minify-js’…
    [11:39:07] Starting ‘minify-images’…
    [11:39:07] Finished ‘minify-images’ after 11 ms
    [11:39:20] Finished ‘minify-js’ after 13 s
    [11:39:30] Finished ‘minify-css’ after 23 s
    [11:39:30] Starting ‘default’…
    [11:39:30] Finished ‘default’ after 5.92 μs

    events.js:160
    throw er; // Unhandled ‘error’ event
    ^
    Error: Parse Error:
    at new HTMLParser (D:\下载文件\hexo\node_modules\html-minifier\src\htmlparse r.js:235:13)
    at minify (D:\下载文件\hexo\node_modules\html-minifier\src\htmlminifier.js:9 46:3)
    at Object.exports.minify (D:\下载文件\hexo\node_modules\html-minifier\src\ht mlminifier.js:1299:10)
    at objectAssign.fileName (D:\下载文件\hexo\node_modules\gulp-htmlmin\index.j s:22:39)
    at module.exports (D:\下载文件\hexo\node_modules\tryit\tryit.js:8:9)
    at minifyHtml (D:\下载文件\hexo\node_modules\gulp-htmlmin\index.js:21:9)
    at Transform.htmlminTransform [as _transform] (D:\下载文件\hexo\node_modules \gulp-htmlmin\index.js:51:7)
    at Transform._read (D:\下载文件\hexo\node_modules\readable-stream\lib\_strea m_transform.js:159:10)
    at Transform.Readable.read (D:\下载文件\hexo\node_modules\readable-stream\li b\_stream_readable.js:360:10)
    at flow (D:\下载文件\hexo\node_modules\readable-stream\lib\_stream_readable. js:734:34)
    at DestroyableTransform. (D:\下载文件\hexo\node_modules\readable- stream\lib\_stream_readable.js:605:7)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at onwriteDrain (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readabl e-stream\lib\_stream_writable.js:300:12)
    at afterWrite (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readable- stream\lib\_stream_writable.js:288:5)
    at onwrite (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readable-str eam\lib\_stream_writable.js:281:7)

    LourisXu 08-26 11:49 回复
  3. [17:32:08] Using gulpfile D:\下载文件\hexo\gulpfile.js
    [17:32:08] Starting ‘minify-html’…
    [17:32:08] Finished ‘minify-html’ after 8.61 ms
    [17:32:08] Starting ‘minify-css’…
    [17:32:08] Starting ‘minify-js’…
    [17:32:08] Starting ‘minify-images’…
    [17:32:08] Finished ‘minify-images’ after 2.52 ms
    [17:32:11] Finished ‘minify-js’ after 2.87 s
    [17:32:13] Finished ‘minify-css’ after 5.29 s
    [17:32:13] Starting ‘default’…
    [17:32:13] Finished ‘default’ after 1.19 μs

    events.js:160
    throw er; // Unhandled ‘error’ event
    ^
    Error: Parse Error:
    at new HTMLParser (D:\下载文件\hexo\node_modules\html-minifier\src\htmlparse r.js:235:13)
    at minify (D:\下载文件\hexo\node_modules\html-minifier\src\htmlminifier.js:9 46:3)
    at Object.exports.minify (D:\下载文件\hexo\node_modules\html-minifier\src\ht mlminifier.js:1299:10)
    at objectAssign.fileName (D:\下载文件\hexo\node_modules\gulp-htmlmin\index.j s:22:39)
    at module.exports (D:\下载文件\hexo\node_modules\tryit\tryit.js:8:9)
    at minifyHtml (D:\下载文件\hexo\node_modules\gulp-htmlmin\index.js:21:9)
    at Transform.htmlminTransform [as _transform] (D:\下载文件\hexo\node_modules \gulp-htmlmin\index.js:51:7)
    at Transform._read (D:\下载文件\hexo\node_modules\readable-stream\lib\_strea m_transform.js:159:10)
    at Transform._write (D:\下载文件\hexo\node_modules\readable-stream\lib\_stre am_transform.js:147:83)
    at doWrite (D:\下载文件\hexo\node_modules\readable-stream\lib\_stream_writab le.js:338:64)
    at writeOrBuffer (D:\下载文件\hexo\node_modules\readable-stream\lib\_stream_ writable.js:327:5)
    at Transform.Writable.write (D:\下载文件\hexo\node_modules\readable-stream\l ib\_stream_writable.js:264:11)
    at write (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readable-strea m\lib\_stream_readable.js:623:24)
    at flow (D:\下载文件\hexo\node_modules\vinyl-fs\node_modules\readable-stream \lib\_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (D:\下载文件\hexo\node_modules\vinyl- fs\node_modules\readable-stream\lib\_stream_readable.js:664:5)
    at emitNone (events.js:86:13)

    LourisXu 08-26 17:33 回复
输入关键字