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 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!