前端自动化工具 grunt 插件 imagemin 的简单使用(六)
2017-08-17 00:36
399 查看
一、contrib-imagemin 插件的使用1、安装 “grunt-contrib-imagemin ”插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-imagemin --save-dev2、在项目根目录下提供 imagemin 插件任务配置需要的 src 目录和需要被压缩的图片文件(图片文件放置到 src 目录下) mkdir src3、在 Gruntfile.js 文件中对 imagemin 任务进行配置
PS:如果提示 "Done, without errors." 证明就没什么问题了,现在去项目根目录下看是否已经生成了存放压缩文件的目录和被压缩后的目标文件。
// 包装函数 module.exports = function (grunt) { // 任务配置,所有插件的配置信息 grunt.initConfig({ // 获取 package.json 的信息 pkg: grunt.file.readJSON('package.json'), // imagemin 插件的配置信息 imagemin: { // png 格式图片具体任务配置 png: { options: { optimizationLevel: 7 // 压缩比 }, files: [{ expand: true, cwd: 'src', src: ['**/*.png'], dest: 'dest', ext: '.png' }] }, // jpg 格式图片具体任务配置 jpg: { options: { progressive: true }, files: [{ expand: true, cwd: 'src', src: ['**/*.jpg'], dest: 'dest', ext: '.jpg' }] } } }); // 加载指定插件任务 grunt.loadNpmTasks('grunt-contrib-imagemin'); // 默认执行的任务 grunt.registerTask('default', ['imagemin']); };PS:imagemin 插件的配置有两项: “options”中通过使用各种属性来指定 imagemin 的压缩比。 “files”中指定哪些格式的文件需要进行压缩。4、最后在终端运行 grunt 命令
PS:如果提示 "Done, without errors." 证明就没什么问题了,现在去项目根目录下看是否已经生成了存放压缩文件的目录和被压缩后的目标文件。
相关文章推荐
- 前端自动化工具 grunt 插件 htmlmin 的简单使用(五)
- 前端自动化工具 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更易用的前端构建工具-前端自动化