**安装grunt** * * * * * Grunt和所有grunt插件都是基于nodejs来运行的，如果你的电脑上没有nodejs,请看教程:xxx先安装nodejs 安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，出现如下图所示,证明nodejs安装成功.  * * * * * **安装grunt-cli** * * * * * 在控制台输入以下命名: `npm install -g grunt-cli` 稍等片刻就会安装完毕.可在命令行输入grunt验证是否安装成功,如出现下图所示,证明安装成功!  * * * * * **使用grunt->初始化** * * * * * 在E盘新建文件夹,命名为test.然后命名行切换到这个目录下,如下图所示:  创建package.json文件,在命名行输入 npm init,然后回车,接下来提示你输入一些信息,这里不用理会,一路回车即可.如下图所示  * * * * * **使用grunt->安装模块** * * * * * 分别命令行执行以下命令: ~~~ npm install grunt --save-dev npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-watch --save-dev npm install grunt-contrib-csslint --save-dev ~~~ 检验是否安装成功,打开package.json,如出现下图所示,证明安装成功!  * * * * * **使用grunt->创建gruntfile.js,.jshintrc,.csslintrc及文件夹src,dist** * * * * * 在test文件目录下分别建立Gruntfile.js(首字母要注意,要大写),.jshintrc,.csslintrc,文件夹src和dist.gruntfile.js是配置文件,src文件夹用来存放未压缩的文件,dist文件夹用来存放压缩后的文件.在src分别建js,css文件夹,分别用来存放js,css文件 Gruntfile.js里的代码如下图所示: ~~~ module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { expand:true, cwd:'src/', src: 'js/*.js', dest: 'dist/', ext:'.min.js' } }, cssmin: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { expand:true, cwd:'src/', src: 'css/*.css', dest: 'dist/', ext:'.min.css' } }, jshint:{ build:['gruntfile.js','src/js/*.js'], options:{ jshintrc:'.jshintrc' } }, watch:{ build:{ files:['src/*.js','src/.css'], tasks:['jshint','uglify'], options:{spawn:false} } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); //grunt.loadNpmTasks('grunt-contrib-watch');//侦听 grunt.registerTask('default', ['jshint','uglify','cssmin']); //grunt.registerTask('default', ['jshint','uglify','watch']); }; ~~~ .jshintrc代码如下: ~~~ { "boss":false, "curly":true, "eqeqeq":true, "eqnull":true, "expr":true, "immed":true, "newcap":true, "noempty":true, "noarg":true, "undef":true, "regexp":true, "browser":true, "devel":true, "node":true } ~~~ .csslintrc代码如下: ~~~ { "adjoining":false, "box-sizing":false, "box-model":false, "compatible-vendor-prefixes":false, "floats":false, "font-sizes":false, "gradients":false, "important":false, "known-properties":false, "outline-none":false, "qualified-headings":false, "regex":false, "shorthand":false, "text-indent":false, "unique-headings":false, "universal-selector":false, "unqualified":false } ~~~ **使用grunt->测试使用** 分别在src里的js,css文件夹里添加js,css文件,然后在命名行输入:grunt,最后到dist文件夹里看压缩后的文件. grunt安装简单使用至此结束. 如果有了package.json,则直接npm install