你的位置:首页 > Java教程

[Java教程]grunt学习


有些时候,项目中的静态资源,比如图片占用的文件有点大,影响加载的速度,所以会选择grunt对其进行压缩打包。对于grunt其他的用法,还在继续学习中,先记录下关于grunt的一些学习。

grunt是一套基于Node.js的命令行工具,所以先确保环境中已安装好了Node环境。

接着安装grunt,如下:

1、安装CLI

CLI是grunt命令行,先将其安装到全局环境中。点击开始->运行->cmd,执行以下命令进行安装:

npm install -g grunt-cli

安装一次即可,以后就可以在任何项目的子目录下运行grunt,执行grunt命令。

2、配置package.json和Gruntfile文件  

这两份文件需要添加在项目里的,且要在同一个目录下。如tool文件所示。

以压缩css文件下的style.css、images文件、js文件下的flex.js为例:

① package.json

用于存储项目的元数据,在此文件中列出项目依赖的grunt和Grunt插件,即Gruntfile.js中定义的任务,放置于devDependencies配置段内。

{ "name": "demo", "version": "1.0.0", "description": "", "license": "ISC", "devDependencies": {  "grunt": "^0.4.5",  "grunt-autoprefixer": "^3.0.4",  "grunt-contrib-cssmin": "^1.0.1",  "grunt-contrib-imagemin": "^1.0.0",  "grunt-contrib-uglify": "^0.11.1" }}

② Gruntfile文件

Gruntfile.js或者Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

(1)''wrapper''函数

module.exports = function (grunt) {  // ...}

(2)项目/任务配置

用initConfig方法将存储在package.json文件中的JSON元数据读取引入到grunt config中。

grunt.initConfig({    // 从package.json读取配置信息    pkg: grunt.file.readJSON('package.json'),    ......})

为系统配置任务,如imagemin图片压缩,主要是找到要压缩的图片路径src,设置压缩后的存放路径dest。

imagemin: {      /* 压缩图片大小 */      dist: {        options: {          optimizationLevel: 3 //定义 PNG 图片优化水平        },        files: [            {            expand: true,            cwd: '../images/',            src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片            dest: '../static/images' // 优化后的图片保存位置,覆盖旧图片,并且不作提示            }          ]        }    }

(3)加载imagemin插件

grunt.loadNpmTasks('grunt-contrib-imagemin');

(4)执行imagemin任务

grunt.registerTask('images', ['imagemin']);

完整配置代码如下:

module.exports = function (grunt) {  'use strict';  grunt.initConfig({    // 从package.json读取配置信息    pkg: grunt.file.readJSON('package.json'),    imagemin: {      /* 压缩图片大小 */      dist: {        options: {          optimizationLevel: 3 //定义 PNG 图片优化水平        },        files: [            {            expand: true,            cwd: '../images/',            src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片            dest: '../static/images' // 优化后的图片保存位置,覆盖旧图片,并且不作提示            }          ]        }    },    uglify: {     options: {      sourceMap: false,       banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//压缩文件头部注释     },     dist: {      files: [{        expand:true,        cwd:'../js/',//js目录下        src:'**/flex.js',//js下的flex.js文件,若是所以js文件,则为**/*.js        dest: '../static/js'//压缩后的文件输出到此目录下      }      ]     }    },    autoprefixer: {    options: {     // Task-specific options go here.    },    dist: {       files: [{        expand:true,        src:['../css/style.css'],//css文件下的style.css        dest: '../static/css/'//输出到此目录下      }]     }    },    cssmin: {      dist: {       files: [       {        expand:true,        cwd:'../css/',//css目录下        src:['**/style.css'],//所有css文件        dest: '../static/css'//输出到此目录下      }      ]     }   }  });  // 加载包含类似"imagemin"任务名的插件  grunt.loadNpmTasks('grunt-contrib-imagemin');  grunt.loadNpmTasks('grunt-contrib-cssmin');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-autoprefixer');  // 默认被执行的任务列表  grunt.registerTask('default', ['uglify','autoprefixer','cssmin','imagemin']);  grunt.registerTask('autopre', ['autoprefixer']);  grunt.registerTask('css', ['autoprefixer','cssmin']);  grunt.registerTask('images', ['imagemin']);  grunt.registerTask('js', ['uglify']);};

3、执行命令

配置好package.json和Gruntfile.js后,在包含该文件的目录下,先执行npm install命令安装项目依赖的库,会生成tool文件下的node_modules文件。

npm install

其次,执行grunt命令

grunt

4、压缩完成,生成static文件夹存放压缩后的文件,如下