摘要: 必要性: 在我們的web應用中，往往有很多的js，少一點也有幾個幾十個，我們通常的做法是在1個界面中引入這些這些資源，然后其他界面都include這個界面，那么問題來了，你要復制很多的代碼，不斷的寫<script>之類的標簽，可能你覺得沒什么，多復制一下又不是多累的事情，但是你要明白，你每復制一次就等于多了一次http請求，在用戶量較大的項目里面，這就成為了性能問題，那么我們應該怎么處理多個js的問題呢，其實grunt中提供了插件，能夠將多個js壓縮合并為一個文件，去除了空格以及一替換了一些長的變量，下面介紹如果使用這些插件。

1、使用grunt-contrib-concat插件，對多個js進行合并，在package.json中配置插件信息，代碼如下

{"name":"xuewenyu-ui","version":"0.0.1","dependencies":?{"grunt":?"~0.4.5","grunt-cli":?"~0.1.13","grunt-contrib-concat":?"~0.5.1"},"devDependencies":?{} }

2、在src目錄下創建inc目錄，并創建兩個js文件。

3、編寫GruntFile.js文件

module.exports?=?function(grunt)?{grunt.initConfig({pkg?:?grunt.file.readJSON('package.json'),//?js?合并concat?:?{demo?:?{src?:?[?'src/inc/*.js'?],dest?:?'src/dest/<%=?pkg.name?%>.js'}}//可以增加多個任務，用于發布到不同環境});//?加載插件grunt.loadNpmTasks('grunt-contrib-concat');//?注冊任務grunt.registerTask('default',?[?'concat'?]); };

4、mvn clean install一下，會在src/dest目錄下多了一個文件

這個文件就是我們合并多個js后得到的一個新的js，測試成功。

5、使用grunt-contrib-uglify插件，對js進行壓縮，在package.json中增加插件配置?

{"name":"xuewenyu-ui","version":"0.0.1","dependencies":?{"grunt":?"~0.4.5","grunt-cli":?"~0.1.13","grunt-contrib-concat":?"~0.5.1","grunt-contrib-uglify":?"~0.11.0"},"devDependencies":?{} }

6、在GruntFile.js中配置壓縮js信息

module.exports?=?function(grunt)?{grunt.initConfig({pkg?:?grunt.file.readJSON('package.json'),//?js?合并concat?:?{demo?:?{src?:?[?'src/inc/*.js'?],dest?:?'src/dest/<%=?pkg.name?%>.js'}},uglify?:?{options?:?{banner?:?'/*!?<%=?pkg.name?%><%=?grunt.template.today("dd-mm-yyyy")?%>*/\n'},dist?:?{files?:?{'src/dest/<%=?pkg.name?%>.min.js'?:?[?'src/dest/<%=?pkg.name?%>.js'?],}}}});//?加載插件grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');//?注冊任務grunt.registerTask('default',?[?'concat',?'uglify'?]); };

7.mvn clean install,查看dest目錄下，多出一個min.js的文件，查看下

此時，這個文件就是我們多個js合并壓縮后的產物，web引入這個文件，就可以了。

總結

以上是生活随笔為你收集整理的maven项目中整合grunt构建工具（二）-js合并、压缩技术的全部內容，希望文章能夠幫你解決所遇到的問題。

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