**安裝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