前端自动化工具 grunt 插件 htmlmin 的简单使用(五)
2017-08-17 00:05
465 查看
一、contrib-htmlmin 插件的使用1、安装 “grunt-contrib-htmlmin ”插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-htmlmin --save-dev2、在项目根目录下提供 htmlmin 插件任务配置需要的 src 目录和需要被压缩的源文件(html 源文件放置到 src 目录下) mkdir src3、在 Gruntfile.js 文件中对 htmlmin 任务进行配置
PS:如果提示 "Done, without errors." 证明就没什么问题了,现在去项目根目录下看是否已经生成了存放压缩文件的目录和被压缩后的目标文件。
// 包装函数 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." 证明就没什么问题了,现在去项目根目录下看是否已经生成了存放压缩文件的目录和被压缩后的目标文件。
相关文章推荐
- 前端自动化工具 grunt 插件 imagemin 的简单使用(六)
- 前端自动化工具 grunt 插件 concat 的简单使用(二)
- 前端自动化工具 grunt 插件 uglify 的简单使用(一)
- 前端自动化工具 grunt 插件 watch 的简单使用(七)
- 前端自动化工具 grunt 插件 jshint 的简单使用(四)
- 前端自动化工具 grunt 插件之 concat 和 uglify 的联合使用(三)
- 前端自动化工具:Grunt使用教程
- 前端自动化工具 -- Grunt 使用简介
- 前端自动化工具 -- grunt 使用简介
- gulp前端自动化构建工具:常用插件介绍及使用
- 前端自动化工具grunt的使用
- 前端自动化工具Grunt的使用
- Gulp前端自动化之 ejs插件使用
- 安装并配置前端自动化工具——grunt
- 前端自动化构建工具gulp的使用介绍
- Grunt-beginner前端自动化工具-高清视频
- 使用Grunt搭建自动化的web前端开发环境-完整教程
- 有关html5、javascript工具、css框架以及jquery插件的前端专题,收藏以供今后使用
- Gulp.js—比Grunt更易用的前端构建工具-前端自动化