grunt-contrib-uglify

uglify是一個文件壓縮插件，項目地址：https://github.com/gruntjs/grunt-contrib-uglify

本文將以一個DEMO來展示如何使用uglify插件。

DEMO環境

package.json:

{"name": "grunt-demo","version": "0.1.0","devDependencies": {"grunt": "~0.4.2","grunt-contrib-jshint": "~0.6.0","grunt-contrib-nodeunit": "~0.2.0","grunt-contrib-uglify": "~0.2.2"} }

DEMO文件結構：

?

其中js文件夾就是用來測試的，Gruntfile.js稍后介紹，其中a.js內容如下：

(function() {//output hello gruntvar helloGrunt = "Hello Grunt!(From a.js)";console.log(helloGrunt); })();

b.js內容如下：

(function() {//output hello worldvar helloWorld = "Hello World!(From b.js)";console.log(helloWorld); })();

下面我們來配置四個任務：

• 壓縮a.js，不混淆變量名，保留注釋，添加banner和footer
• 壓縮b.js，輸出壓縮信息
• 按原文件結構壓縮js文件夾內所有JS文件
• 合并壓縮a.js和b.js

Gruntfile.js

現在直接通過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'//添加banner },builda: {//任務一：壓縮a.js，不混淆變量名，保留注釋，添加banner和footer options: {mangle: false, //不混淆變量名preserveComments: 'all', //不刪除注釋，還可以為 false（刪除全部注釋），some（保留@preserve @license @cc_on等注釋）footer:'\n/*! <%= pkg.name %> 最后修改于： <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer },files: {'output/js/a.min.js': ['js/a.js']}},buildb:{//任務二：壓縮b.js，輸出壓縮信息 options: {report: "min"//輸出壓縮率，可選的值有 false(不輸出信息)，gzip },files: {'output/js/b.min.js': ['js/main/b.js']}},buildall: {//任務三：按原文件結構壓縮js文件夾內所有JS文件 files: [{expand:true,cwd:'js',//js目錄下src:'**/*.js',//所有js文件dest: 'output/js'//輸出到此目錄下 }]},release: {//任務四：合并壓縮a.js和b.js files: {'output/js/index.min.js': ['js/a.js', 'js/main/b.js']}}}});// 加載提供"uglify"任務的插件grunt.loadNpmTasks('grunt-contrib-uglify');// 默認任務grunt.registerTask('default', ['uglify:release']);grunt.registerTask('mina', ['uglify:builda']);grunt.registerTask('minb', ['uglify:buildb']);grunt.registerTask('minall', ['uglify:buildall']); }

通過上面的代碼，我們很容易就可以看到上面四個任務的配置方式。

運行結果

任務一：壓縮a.js，不混淆變量名，保留注釋，添加banner和footer

運行 grunt mina 命令，生成的a.min.js如下：

/*! grunt-demo 2013-11-29 */ !function(){//output hello grunt var helloGrunt="Hello Grunt!(From a.js)";console.log(helloGrunt)}(); /*! grunt-demo 最后修改于： 2013-11-29 */

跟我們的目標一致。

任務二：壓縮b.js，輸出壓縮信息

運行 grunt minb 命令，生成的b.min.js如下：

/*! grunt-demo 2013-11-29 */ !function(){var a="Hello World!(From b.js)";console.log(a)}();

命令執行情況：

我們可以看到輸出了壓縮信息

任務三：按原文件結構壓縮js文件夾內所有JS文件

運行 grunt minall 命令，生成目錄結構如下：

其中a.min.js和b.min.js是任務一和任務二生成的，壓縮后的output/js/a.js內容如下：

/*! grunt-demo 2013-11-29 */ !function(){var a="Hello Grunt!(From a.js)";console.log(a)}();

output/js/main/b.js內容如下：

/*! grunt-demo 2013-11-29 */ !function(){var a="Hello World!(From b.js)";console.log(a)}();

任務四：合并壓縮a.js和b.js

運行 grunt命令，生成的output/index.min.js內容如下：

/*! grunt-demo 2013-11-29 */ !function(){var a="Hello Grunt!(From a.js)";console.log(a)}(),function(){var a="Hello World!(From b.js)";console.log(a)}();

?

至此，本節uglify插件的介紹就結束了，對本文或使用過程中有任何問題，歡迎留言討論。

總結

以上是生活随笔為你收集整理的grunt使用小记之uglify：最全的uglify使用DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。