温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

前端自动化工具 grunt 插件 htmlmin 的简单使用(五)

发布时间:2020-07-30 22:09:24 阅读:1518 作者:珞辰 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

一、contrib-htmlmin 插件的使用

1、安装 “grunt-contrib-htmlmin ”插件命令(在终端进入到项目根目录执行)

            npm install grunt-contrib-htmlmin --save-dev

2、在项目根目录下提供 htmlmin 插件任务配置需要的 src 目录和需要被压缩的源文件(html 源文件放置到 src 目录下)

            mkdir src

3、在 Gruntfile.js 文件中对 htmlmin 任务进行配置

 // 包装函数module.exports = function (grunt) {         // 任务配置,所有插件的配置信息        grunt.initConfig({                // 获取 package.json 的信息                pkg: grunt.file.readJSON('package.json'),                // htmlmin 插件的配置信息                htmlmin: {                    options: {                            removeComments: true,                     // 去除注释信息                             collapseWhitespace: true,                   // 去除空白字符                              removeEmptyAttributes: true,            // 去除标签的空属性                            removeCommentsFromCDATA: true, // 去除 CDATA 的注释信息                            removeRedundantAttributes: true     // 去除标签的冗余属性                    },                    // 具体任务配置                    build: {                            files: [{                                    expand: true,                                    cwd: 'src',                                    src: '**/*.html',                                    dest: 'dest'                            }]                    }                }        });  // 加载指定插件任务grunt.loadNpmTasks('grunt-contrib-htmlmin');  // 默认执行的任务grunt.registerTask('default', ['htmlmin']);};

PS:htmlmin 插件的配置有两项:

            “options”中通过使用各种属性来指定 htmlmin 压缩时的操作。

            “build”中指定哪些 html 文件需要进行压缩。

4、最后在终端运行 grunt 命令

PS:如果提示 "Done, without errors."  证明就没什么问题了,现在去项目根目录下看是否已经生成了存放压缩文件的目录和被压缩后的目标文件。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×