JS项目构建工具Grunt实践：合并文件

Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。上一篇文章《Grunt：基于任务的 JavaScript 项目构建工具》介绍了 Grunt 安装和创建项目框架步骤，这篇文章介绍如何使用 Grunt 合并文件。

成都创新互联公司长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为汾西企业提供专业的成都网站制作、成都做网站，汾西网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

Grunt 内置 concat（文件合并）、lint（代码校验） 和 min（代码压缩） 任务，在 grunt.js 文件配置好任务后，运行 grunt 命令就可以自动完成一系列的项目构建操作了，如图示：

对应的 Grunt 配置文件代码如下：

 
 
 
 
    
  
  
  
  
  1. /*global module:false*/ 
    2. 
  
  
  
  
  2. module.exports = function(grunt) { 
    3. 
  
  
  
  
  3.   // Project configuration. 
    4. 
  
  
  
  
  4.   grunt.initConfig({ 
    5. 
  
  
  
  
  5.     pkg: '', 
    6. 
  
  
  
  
  6.     meta: { 
    7. 
  
  
  
  
  7.       banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + 
    8. 
  
  
  
  
  8.         '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 
    9. 
  
  
  
  
  9.         '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' + 
    10. 
  
  
  
  
  10.         '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 
    11. 
  
  
  
  
  11.         ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */' 
    12. 
  
  
  
  
  12.     }, 
    13. 
  
  
  
  
  13.     concat: { 
    14. 
  
  
  
  
  14.       dist: { 
    15. 
  
  
  
  
  15.         src: ['', '.js>'], 
    16. 
  
  
  
  
  16.         dest: 'dist/<%= pkg.name %>.js' 
    17. 
  
  
  
  
  17.       } 
    18. 
  
  
  
  
  18.     }, 
    19. 
  
  
  
  
  19.     min: { 
    20. 
  
  
  
  
  20.       dist: { 
    21. 
  
  
  
  
  21.         src: ['', ''], 
    22. 
  
  
  
  
  22.         dest: 'dist/<%= pkg.name %>.min.js' 
    23. 
  
  
  
  
  23.       } 
    24. 
  
  
  
  
  24.     }, 
    25. 
  
  
  
  
  25.     qunit: { 
    26. 
  
  
  
  
  26.       files: ['test/**/*.html'] 
    27. 
  
  
  
  
  27.     }, 
    28. 
  
  
  
  
  28.     lint: { 
    29. 
  
  
  
  
  29.       files: ['grunt.js', 'src/**/*.js', 'test/**/*.js'] 
    30. 
  
  
  
  
  30.     }, 
    31. 
  
  
  
  
  31.     watch: { 
    32. 
  
  
  
  
  32.       files: '', 
    33. 
  
  
  
  
  33.       tasks: 'lint qunit' 
    34. 
  
  
  
  
  34.     }, 
    35. 
  
  
  
  
  35.     jshint: { 
    36. 
  
  
  
  
  36.       options: { 
    37. 
  
  
  
  
  37.         curly: true, 
    38. 
  
  
  
  
  38.         eqeqeq: true, 
    39. 
  
  
  
  
  39.         immed: true, 
    40. 
  
  
  
  
  40.         latedef: true, 
    41. 
  
  
  
  
  41.         newcap: true, 
    42. 
  
  
  
  
  42.         noarg: true, 
    43. 
  
  
  
  
  43.         sub: true, 
    44. 
  
  
  
  
  44.         undef: true, 
    45. 
  
  
  
  
  45.         boss: true, 
    46. 
  
  
  
  
  46.         eqnull: true, 
    47. 
  
  
  
  
  47.         browser: true 
    48. 
  
  
  
  
  48.       }, 
    49. 
  
  
  
  
  49.       globals: { 
    50. 
  
  
  
  
  50.         jQuery: true 
    51. 
  
  
  
  
  51.       } 
    52. 
  
  
  
  
  52.     }, 
    53. 
  
  
  
  
  53.     uglify: {} 
    54. 
  
  
  
  
  54.   }); 
    55. 
  
  
  
  
  55.   // Default task. 
    56. 
  
  
  
  
  56.   grunt.registerTask('default', 'lint qunit concat min'); 
    57. 
  
  
  
  
  57. }; 
    58.

这篇文章先介绍 concat 任务，后面几个任务将会在随后的文章陆续介绍。

Grunt 合并文件

Grunt 内置的 concat 任务用于合并一个或者多个文件（或者指令，例如指令）到一个文件。concat 任务的项目配置框架：

 
 
 
 
    
  
  
  
  
  1. // 项目配置 
    2. 
  
  
  
  
  2. grunt.initConfig({ 
    3. 
  
  
  
  
  3.   // 项目元数据，用于  指令 
    4. 
  
  
  
  
  4.   meta: {}, 
    5. 
  
  
  
  
  5.   // 将要被合并的文件列表 
    6. 
  
  
  
  
  6.   concat: {} 
    7. 
  
  
  
  
  7. }); 
    8.

基本用法

把 src 目录下的 intro.js、projject.js、outro.js 三个文件合并到 built.js 文件并存放在 dist 目录，配置示例：

 
 
 
 
    
  
  
  
  
  1. grunt.initConfig({  
    2. 
  
  
  
  
  2.   concat: {  
    3. 
  
  
  
  
  3.     dist: {  
    4. 
  
  
  
  
  4.       src: ['src/intro.js', 'src/project.js', 'src/outro.js'],  
    5. 
  
  
  
  
  5.       dest: 'dist/built.js' 
    6. 
  
  
  
  
  6.     }  
    7. 
  
  
  
  
  7.   }  
    8. 
  
  
  
  
  8. }); 
    9.

添加注释

还可以通过 指令在合并文件中添加注释，例如包名、版本、生成时间等，示例代码：

 
 
 
 
    
  
  
  
  
  1. grunt.initConfig({  
    2. 
  
  
  
  
  2.   pkg: '',  
    3. 
  
  
  
  
  3.   meta: {  
    4. 
  
  
  
  
  4.     banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +  
    5. 
  
  
  
  
  5.       '<%= grunt.template.today("yyyy-mm-dd") %> */' 
    6. 
  
  
  
  
  6.   },  
    7. 
  
  
  
  
  7.   concat: {  
    8. 
  
  
  
  
  8.     dist: {  
    9. 
  
  
  
  
  9.       src: ['', ''],  
    10. 
  
  
  
  
  10.       dest: 'dist/built.js' 
    11. 
  
  
  
  
  11.     }  
    12. 
  
  
  
  
  12.   }  
    13. 
  
  
  
  
  13. }); 
    14.

多个构建目标

在实际项目中，往往需要根据模块生成多个目标文件，例如基础模块和插件模板分开打包，配置示例：

 
 
 
 
    
  
  
  
  
  1. grunt.initConfig({  
    2. 
  
  
  
  
  2.   concat: {  
    3. 
  
  
  
  
  3.     basic: {  
    4. 
  
  
  
  
  4.       src: ['src/main.js'],  
    5. 
  
  
  
  
  5.       dest: 'dist/basic.js' 
    6. 
  
  
  
  
  6.     },  
    7. 
  
  
  
  
  7.     extras: {  
    8. 
  
  
  
  
  8.       src: ['src/main.js', 'src/extras.js'],  
    9. 
  
  
  
  
  9.       dest: 'dist/with_extras.js' 
    10. 
  
  
  
  
  10.     }  
    11. 
  
  
  
  
  11.   }  
    12. 
  
  
  
  
  12. }); 
    13.

动态文件名

Grunt 合并任务还可以生成动态的文件名，

 
 
 
 
    
  
  
  
  
  1. grunt.initConfig({  
    2. 
  
  
  
  
  2.   pkg: '',  
    3. 
  
  
  
  
  3.   dirs: {  
    4. 
  
  
  
  
  4.     src: 'src/files',  
    5. 
  
  
  
  
  5.     dest: 'dist/<%= pkg.name %>/<%= pkg.version %>' 
    6. 
  
  
  
  
  6.   },  
    7. 
  
  
  
  
  7.   concat: {  
    8. 
  
  
  
  
  8.     basic: {  
    9. 
  
  
  
  
  9.       src: ['<%= dirs.src %>/main.js'],  
    10. 
  
  
  
  
  10.       dest: '<%= dirs.dest %>/basic.js' 
    11. 
  
  
  
  
  11.     },  
    12. 
  
  
  
  
  12.     extras: {  
    13. 
  
  
  
  
  13.       src: ['<%= dirs.src %>/main.js', '<%= dirs.src %>/extras.js'],  
    14. 
  
  
  
  
  14.       dest: '<%= dirs.dest %>/with_extras.js' 
    15. 
  
  
  
  
  15.     }  
    16. 
  
  
  
  
  16.   }  
    17. 
  
  
  
  
  17. }); 
    18.

配置好以后，运行下面的命令就可以进行文件合并操作了：

合并后的代码示例如下：

 
 
 
 
    
  
  
  
  
  1. /*! Gruntdemo - v0.1.0 - 2013-01-22  
    2. 
  
  
  
  
  2. * https://github.com/dreamsky/grunt-demo  
    3. 
  
  
  
  
  3. * Copyright (c) 2013 Andy Li; Licensed MIT */ 
    4. 
  
  
  
  
  4. (function($) {  
    5. 
  
  
  
  
  5.   // Collection method.  
    6. 
  
  
  
  
  6.   $.fn.awesome = function() {  
    7. 
  
  
  
  
  7.     return this.each(function() {  
    8. 
  
  
  
  
  8.       $(this).html('awesome');  
    9. 
  
  
  
  
  9.     });  
    10. 
  
  
  
  
  10.   };  
    11. 
  
  
  
  
  11.   // Static method.  
    12. 
  
  
  
  
  12.   $.awesome = function() {  
    13. 
  
  
  
  
  13.     return 'awesome';  
    14. 
  
  
  
  
  14.   };  
    15. 
  
  
  
  
  15.    
    16. 
  
  
  
  
  16.   // Custom selector.  
    17. 
  
  
  
  
  17.   $.expr[':'].awesome = function(elem) {  
    18. 
  
  
  
  
  18.     return elem.textContent.indexOf('awesome') >= 0;  
    19. 
  
  
  
  
  19.   };  
    20. 
  
  
  
  
  20. }(jQuery)); 
    21.

原文链接：http://www.cnblogs.com/lhb25/archive/2013/01/31/grunt-for-javascript-project-b.html

当前标题：JS项目构建工具Grunt实践：合并文件
浏览地址：http://www.shufengxianlan.com/qtweb/news14/481214.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站排名知识

各行业网站

成都茶叶销售　　 　app网站建设　　 　绵竹网站建设　　 　兴久牧业　　 　服务器托管　　 　UI设计　　 　成都网站推广　　 　域名ssl证书　　 　郫县封阳台　　 　达州主机托管　　 　成都app制作　　 　网站免费收录　　 　手提袋印刷制作　　 　四川白乌鱼　　 　培训网站方案　　 　成都企业网站建设公司　　 　自适应网站设计　　 　免备案空间腾讯云　　 　网站推广优化　　 　成都木托盘