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

开发 前端
Grunt 内置 concat(文件合并)、lint(代码校验) 和 min(代码压缩) 任务,在 grunt.js 文件配置好任务后,运行 grunt 命令就可以自动完成一系列的项目构建操作了

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

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

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

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

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

Grunt 合并文件

Grunt 内置的 concat 任务用于合并一个或者多个文件(或者指令,例如<banner>指令)到一个文件。concat 任务的项目配置框架:

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

基本用法

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

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

添加注释

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

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

多个构建目标

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

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

动态文件名

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

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

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

合并后的代码示例如下:

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

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

 

责任编辑:张伟 来源: 博客园
相关推荐

2020-09-07 14:40:20

Vue.js构建工具前端

2011-12-30 09:23:25

JavaPhing

2023-08-22 10:13:53

模块工具JavaScrip

2023-03-15 23:59:13

前端构建工具

2021-11-10 09:30:11

Python工具命令

2022-08-12 07:56:41

Python项目管理构建工具

2021-08-30 06:27:21

工具容器Docker

2021-05-25 16:34:06

JavaScript前端

2010-02-03 15:09:13

Python 构建工具

2011-12-07 10:56:29

ApacheMakeJava

2021-05-31 17:37:26

ViteReactesbuild

2021-06-05 18:01:05

工具Rollup前端

2022-05-16 09:14:28

前端构建工具

2020-04-23 08:55:01

LinuxGradle工具

2022-02-23 10:48:52

TodoList应用项目Strve开发

2022-09-01 11:02:42

前端工具

2021-06-18 06:11:26

工具WebpackSnowpack

2016-01-31 09:47:13

Java程序员构建工具

2021-05-08 23:24:21

前端工具Web

2022-08-26 13:56:30

模块JavaScript
点赞
收藏

51CTO技术栈公众号