1、準備工作

1）首頁確保電腦上網(wǎng)，以及能夠訪問https://registry.npmjs.org/，因需從此網(wǎng)站中下載安裝相應的插件;

2）電腦安裝Node.js，Grunt及Grunt插件都是基于node.js運行的；如果你電腦上未裝node.js，到nodejs官網(wǎng)https://nodejs.org/下載相應版本安裝吧；

3）安裝grunt-CLI，要想使用grunt，需要將grunt-CLI安裝到全局環(huán)境中，使用nodejs的”npm install”進行安裝；

打開控制臺（windows系統(tǒng)下使用管理員權限打開），輸入：npm install –g grunt-cli，然后敲擊回車。

要檢查是否已經(jīng)安裝grunt-cli并生效，只需輸入grunt命令，敲擊回車，如果出現(xiàn)下圖結果，即表示你已成功安裝grunt-cli。

2、創(chuàng)建一個簡單的測試

在本機的項目目錄中創(chuàng)建GruntTest目錄（包括build，src，test，node_modules為安裝插件時自動生成），兩個文件（Gruntfile.js，package.json，注意第一個文件名首字母大寫）。

其中package.json格式如下：

3、安裝Grunt

從控制臺中進入到剛才創(chuàng)建的目錄中，輸入以下命令：npm install grunt --save-dev（注意save前是兩個-），其中--save-dev的意思是在安裝grunt的同時，把grunt保存為這個目錄的開發(fā)依賴項。這個依賴項的配置即為package.json中的devDependencies對應的配置。

grunt安裝成功之后，在package.json文件中的devDependencies屬性中會自動添加上"grunt": "^0.4.5"。目錄中會自動創(chuàng)建node_modules文件夾，其中會有一個grunt的文件夾。

4、配置Gruntfile.js文件

首先把Gruntfile.js配置成如下格式：

}, build:{ src:'src/test.js',//原文件路徑 dest:'build/js/<%=pkg.name%>-<%=pkg.version%>.min.js'//壓縮后文件路徑 } }, //CSS文件壓縮 cssmin: { options: { shorthandCompacting: false, roundingPrecision: -1 }, target: { /*files: { 'output.css': ['foo.css', 'bar.css']//合并兩個文件到一個文件 }*/ files: [{ expand: true, cwd: 'src/',//原文件目錄 src: ['*.css', '!*.min.css'], dest: 'build/css',//壓縮后文件目錄 ext: '.min.css' }] } }, //JS文件錯誤提示 jshint:{ build:['Gruntfile.js','src/*.js'], options:{ jshintrc:'g.jshintrc' } }, watch: { scripts: { files: ['src/*.js','src/*.css'], tasks: ['jshint','uglify','cssmin'], options: { spawn: false } } } }); //告訴grunt我們將要加載的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); //告訴grunt當我們在終端中輸入grunt時需要做哪些操作（注意先后順序） grunt.registerTask('default',['jshint','uglify','cssmin','watch']); };

5、Grunt插件安裝

進入grunt官網(wǎng)的插件列表頁面 http://www.gruntjs.net/plugins ，我們能看到grunt到目前為止的所有插件。

插件分為兩類。第一類是grunt團隊貢獻的插件，這些插件的名字前面都帶有“contrib-”前綴，而且在插件列表中有星號標注。第二類是第三方提供的插件，不帶有這兩個特征。

• Contrib-jshint——javascript語法錯誤檢查；
• Contrib-watch——實時監(jiān)控文件變化、調(diào)用相應的任務重新執(zhí)行；
• Contrib-clean——清空文件、文件夾；
• Contrib-uglify——壓縮javascript代碼
• Contrib-copy——復制文件、文件夾
• Contrib-concat——合并多個文件的代碼到一個文件中
• karma——前端自動化測試工具

安裝插件命令為：npm install grunt-contrib-uglify --save-dev格式。

6、使用uglify插件

Uglify插件的功能就是壓縮javascript代碼。安裝方式：npm install grunt-contrib-uglify --save-dev，安裝成功之后package.json文件會自動添加相應配置，node_modules目錄中也會創(chuàng)建相應的插件目錄。

使用uglify來壓縮javascript代碼，首先在src目錄中創(chuàng)建一個”test.js”

?

/** * Created by Jack on 2015-10-20. */ (function(window,undefined){ function add(a,b){ return a+b; } add(10,20); })(window); function test(a,b,c){ return a+b*c; }

第一步：在Gruntfile.js中進行配置。

}, build:{ src:'src/test.js',//原文件路徑 dest:'build/js/<%=pkg.name%>-<%=pkg.version%>.min.js'//壓縮后文件路徑 } }, //CSS文件壓縮 cssmin: { options: { shorthandCompacting: false, roundingPrecision: -1 }, target: { /*files: { 'output.css': ['foo.css', 'bar.css']//合并兩個文件到一個文件 }*/ files: [{ expand: true, cwd: 'src/',//原文件目錄 src: ['*.css', '!*.min.css'], dest: 'build/css',//壓縮后文件目錄 ext: '.min.css' }] } }, //JS文件錯誤提示 jshint:{ build:['Gruntfile.js','src/*.js'], options:{ jshintrc:'g.jshintrc' } }, watch: { scripts: { files: ['src/*.js','src/*.css'], tasks: ['jshint','uglify','cssmin'], options: { spawn: false } } } }); //告訴grunt我們將要加載的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); //告訴grunt當我們在終端中輸入grunt時需要做哪些操作（注意先后順序） grunt.registerTask('default',['jshint','uglify','cssmin','watch']); };

?

對uglify的配置有兩項：

　　“options”中規(guī)定允許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明。注意，其中使用到了pkg獲取package.json的內(nèi)容。

　　“build”中配置了源文件和目標文件。即規(guī)定了要壓縮誰？壓縮之后會生成誰？注意，我們這里將目標文件的文件名通過pkg的name和version來命名。

（PS：上文中說過的package.json的內(nèi)容終于找到了他被應用的地方了。這樣的好處是：例如，對文件版本的管理，你只需要在package.json中修改即可，grunt會自動根據(jù)最新的版本號生成相應版本的文件。你不用手動去修改文件的文件名。）

第二步：在 grunt.initConfig 方法之后，要讓grunt去加載這一個插件。光配置了，不加載上，如何用啊？

grunt.loadNpmTasks('grunt-contrib-uglify'); 第三步：在grunt命令執(zhí)行時，要不要立即執(zhí)行uglify插件？如果要，就寫上，否則不寫。我現(xiàn)在是需要的，所以我寫上。也有可能不需要，這種情況誰知道呢？ grunt.registerTask('default',['uglify']);

7、其它插件

如果使用其它插件，可先進行安裝，然后進行配置，加載插件，注冊任務插件。具體使用說明可進入http://www.gruntjs.net/plugins網(wǎng)站中點擊相應的插件查看相應的配置說明。

總結

以上是生活随笔為你收集整理的使用Grunt构建自动化开发环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。