Grunt安装与环境配置

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt
实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身

项目的github地址：grunt_test

• 1.安装node

node.js安装教程

• 2.grunt命令行（CLI） 安装在全局环境下，所以命令是这么写滴！

npm install -g grunt-cli

• 3.新建一个项目，名字叫grunt_test：注意，千万不要叫grunt，后面运行grunt命令的时候会出错

下面是我的项目目录

QQ截图20161222155458.png

• 4.生成package.json，也可以手动生成这样一个文件

npm init

生成之后在里面填入以下内容

package.json.png

• 5.安装grunt

npm install grunt --save-dev 注意查看package.json文件

grunt安装成功.png

偶？自动把grunt的版本号加上啦。对啦，这就是--save-dev的作用

• 6.安装grunt插件

js语法检查:grunt-contrib-jshint
安装命令：npm install grunt-contrib-jshint --save-dev 下同
css语法检查：grunt-contrib-csslint
合并文件：grunt-contrib-concat
js压缩文件：grunt-contrib-uglify
css压缩文件：grunt-contrib-cssmin
image压缩文件：grunt-contrib-imagemin
html压缩文件：grunt-contrib-htmlmin
Sass\Scss 编译：grunt-contrib-sass
安装sass插件后，我运行grunt，发现报错，提示ruby没有安装，所以如果需要使用到这个插件的，要确保自己的电脑上是否有装ruby，没有的话要进行安装
sudo yum install ruby # CentOS, Fedora, 或 RHEL 系统
sudo apt-get install ruby-full # Debian 或 Ubuntu 系统
brew install ruby #苹果系统
Less 编译：grunt-contrib-less
监听文件变动：grunt-contrib-watch

建立本地服务器：grunt-contrib-connect

上面这些插件都安装好后，注意看package.json文件中的内容

grunt插件安装成功.png

• 7.配置Gruntfile.js

这里是对每个需要的插件进行配置

grunt.initConfig.png

插件太多了，挑其中一个(uglify，用于js压缩)进行详细说明

grunt-contrib-uglify.png

grunt是任务机制，我在这里给定了combine、compress、fileCompress三个任务，执行grunt时会按顺序执行三个任务

uglify:{    
    options:{        
        sourceMap: false,        
        stripBanners: true,        
        //压缩后的文件注释信息        
        banner :'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n',        
        footer:'\n/*!修改于<%= grunt.template.today("yyyy-mm-dd") %>  */'    
    },    
    combine: {        
        files: {           
             'build/static/js/compress-<%= pkg.name %>-<%= pkg.version %>.min.js': ['dev/static/js/*.common.js'],            
            'build/static/js/compress.common.min.js': ['dev/static/js/*/*.common.js']        
        }    
    },    
    compress:{        
        options:{            
            report:"min",
        },        
        files:[{                
                expand:true,                
                cwd:'dev/static/js',                
                src:['*.js','!*.min.js','!*.common.js'],                
                dest:'build/static/js',                
                ext:'.min.js'           
        }]    
    },    
    fileCompress:{        
        options:{                 
        },        
        files:[{                
            expand:true,                
            cwd:'dev/static/js',                
            src:['**/*.js','!**/*.min.js','!**/*.common.js'],                
            dest:'build/static/js/',                
            ext:'.min.js'            
        }]    
    }
},

uglify:combine 用来合并文件
uglify:compress用来压缩文件
uglify:fileCompress也是用来压缩文件
下面两个的区别在于 files中的src：*/.js用来匹配所有的js，注意，输出的时候会保留目录层次，如果是合并到一个文件中，就把dest写成

dest: 'build/static/js/common.js'，并且不写ext就可以

grunt配置总体图

grunt配置一览图.png

最后一行代码是注册任务，当然，除了default，我们也可以注册到别的Task上去，比如 grunt.registerTask('compress', ['uglify:build']);
如果想要执行这个 task，我们就不能只输入 grunt 命令了，我们需要输入 grunt compress命令来执行这条 task，而这条 task 的任务是 uglify 下面的 build 任务，也就是说，我们只会执行 uglify 里面 build 定义的任务，而不会执行 uglify 里面定义的其他任务。
这里需要注意的是，task 的命名不能与后面的任务配置同名，也就是说这里的 compress 不能命名成 uglify，这样会报错或者产生意外情况

• 8.运行查看效果

在grunt_test目录下，运行grunt，我现在是默认执行uncss和htmlmin

grunt_done.png

详细代码放在github上面了，链接地址：grunt_test