Grunt 单独对css压缩并生成min.css文件

1.安装node.js

2.新建package.json文件

{
  "name": "demo",
  "version": "2.0.1",
  "author":"",
  "email":"",
  "webAddr":"",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-cmd-transport": "~0.3.0",  
    "grunt-cmd-concat": "~0.2.5",  
    "grunt-contrib-concat":"*",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-requirejs": "~0.4.1",  
    "grunt-contrib-copy":"*",
    "grunt-contrib-cssmin":"*",  
    "grunt-strip": "~0.2.1" 
  }
}

3.然后安装 grunt所需的包

cmd : npm install

4.创建Gruntfile.js

module.exports = function (grunt) {
    var version = 2.0;
    // 构建任务配置
    grunt.initConfig({
 
        //读取package.json的内容,形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        //压缩css
        cssmin: {
            //文件头部输出信息
		  main:{
            options: {
                 banner: '/*!webAddr:<%= pkg.webAddr %>, author:<%= pkg.author %>, email:<%= pkg.email %>, version:v-<%= grunt.template.today("yyyy-mm-dd") %>:'+version+' */\n',
                paths:["css"],
                //美化代码
                beautify: {
                    //中文ascii化,非常有用!防止中文乱码的神配置
                    ascii_only: true
                }
            },
          
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: 'css/',
                        src: ['*.css','!*.min.css'],
                        dest: 'css/',						
						ext:".min.css"
                    }
                ]      
         }
	  }
    });
 
    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-cssmin');
 
    // 默认执行的任务
    grunt.registerTask('default', ['cssmin']);
};

grunt.initConfig方法说明

用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
cwd:需要处理的文件(input)所在的目录。
src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
dest:表示处理后的文件名或所在目录。
ext:表示处理后的文件后缀名。 
grunt常用函数说明:

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。
grunt.loadNpmTasks:加载完成任务所需的模块。
grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块。 

grunt常用模块:

grunt-contrib-clean:删除文件。
grunt-contrib-compass:使用compass编译sass文件。
grunt-contrib-concat:合并文件。
grunt-contrib-copy:复制文件。
grunt-contrib-cssmin:压缩以及合并CSS文件。
grunt-contrib-imagemin:图像压缩模块。
grunt-contrib-jshint:检查JavaScript语法。
grunt-contrib-uglify:压缩以及合并JavaScript文件。

grunt-contrib-watch:监视文件变动,做出相应动作。

常用命令:

grunt cssmin  #Minify CSS *

留下评论