| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
liaoby
9年前发布

maven项目中整合grunt构建工具(二)

来自: http://my.oschina.net/yxwblog/blog/607346


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引入这个文件,就可以了。

 本文由用户 liaoby 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1453428120308.html
Maven 项目构建