日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

Grunt 是一個(gè)基于任務(wù)的 JavaScript 項(xiàng)目命令行構(gòu)建工具，運(yùn)行于 Node.js 平臺(tái)。Grunt 能夠從模板快速創(chuàng)建項(xiàng)目，合并、壓縮和校驗(yàn) CSS & JS 文件，運(yùn)行單元測(cè)試以及啟動(dòng)靜態(tài)服務(wù)器。上一篇文章《Grunt：基于任務(wù)的 JavaScript 項(xiàng)目構(gòu)建工具》介紹了 Grunt 安裝和創(chuàng)建項(xiàng)目框架步驟，這篇文章介紹如何使用 Grunt 合并文件。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為汾西企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都做網(wǎng)站，汾西網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

Grunt 內(nèi)置 concat（文件合并）、lint（代碼校驗(yàn)） 和 min（代碼壓縮） 任務(wù)，在 grunt.js 文件配置好任務(wù)后，運(yùn)行 grunt 命令就可以自動(dòng)完成一系列的項(xiàng)目構(gòu)建操作了，如圖示：

對(duì)應(yīng)的 Grunt 配置文件代碼如下：

 
 
 
 

  
  
  
  
/*global module:false*/ 
  
  
  
  
module.exports = function(grunt) { 
  
  
  
  
  // Project configuration. 
  
  
  
  
  grunt.initConfig({ 
  
  
  
  
    pkg: '', 
  
  
  
  
    meta: { 
  
  
  
  
      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + 
  
  
  
  
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 
  
  
  
  
        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' + 
  
  
  
  
        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 
  
  
  
  
        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */' 
  
  
  
  
    }, 
  
  
  
  
    concat: { 
  
  
  
  
      dist: { 
  
  
  
  
        src: ['', '.js>'], 
  
  
  
  
        dest: 'dist/<%= pkg.name %>.js' 
  
  
  
  
      } 
  
  
  
  
    }, 
  
  
  
  
    min: { 
  
  
  
  
      dist: { 
  
  
  
  
        src: ['', ''], 
  
  
  
  
        dest: 'dist/<%= pkg.name %>.min.js' 
  
  
  
  
      } 
  
  
  
  
    }, 
  
  
  
  
    qunit: { 
  
  
  
  
      files: ['test/**/*.html'] 
  
  
  
  
    }, 
  
  
  
  
    lint: { 
  
  
  
  
      files: ['grunt.js', 'src/**/*.js', 'test/**/*.js'] 
  
  
  
  
    }, 
  
  
  
  
    watch: { 
  
  
  
  
      files: '', 
  
  
  
  
      tasks: 'lint qunit' 
  
  
  
  
    }, 
  
  
  
  
    jshint: { 
  
  
  
  
      options: { 
  
  
  
  
        curly: true, 
  
  
  
  
        eqeqeq: true, 
  
  
  
  
        immed: true, 
  
  
  
  
        latedef: true, 
  
  
  
  
        newcap: true, 
  
  
  
  
        noarg: true, 
  
  
  
  
        sub: true, 
  
  
  
  
        undef: true, 
  
  
  
  
        boss: true, 
  
  
  
  
        eqnull: true, 
  
  
  
  
        browser: true 
  
  
  
  
      }, 
  
  
  
  
      globals: { 
  
  
  
  
        jQuery: true 
  
  
  
  
      } 
  
  
  
  
    }, 
  
  
  
  
    uglify: {} 
  
  
  
  
  }); 
  
  
  
  
  // Default task. 
  
  
  
  
  grunt.registerTask('default', 'lint qunit concat min'); 
  
  
  
  
}; 
 
 
 
 

這篇文章先介紹 concat 任務(wù)，后面幾個(gè)任務(wù)將會(huì)在隨后的文章陸續(xù)介紹。

Grunt 合并文件

Grunt 內(nèi)置的 concat 任務(wù)用于合并一個(gè)或者多個(gè)文件（或者指令，例如指令）到一個(gè)文件。concat 任務(wù)的項(xiàng)目配置框架：

 
 
 
 

  
  
  
  
// 項(xiàng)目配置 
  
  
  
  
grunt.initConfig({ 
  
  
  
  
  // 項(xiàng)目元數(shù)據(jù)，用于  指令 
  
  
  
  
  meta: {}, 
  
  
  
  
  // 將要被合并的文件列表 
  
  
  
  
  concat: {} 
  
  
  
  
}); 
 
 
 
 

基本用法

把 src 目錄下的 intro.js、projject.js、outro.js 三個(gè)文件合并到 built.js 文件并存放在 dist 目錄，配置示例：

 
 
 
 

  
  
  
  
grunt.initConfig({  
  
  
  
  
  concat: {  
  
  
  
  
    dist: {  
  
  
  
  
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],  
  
  
  
  
      dest: 'dist/built.js' 
  
  
  
  
    }  
  
  
  
  
  }  
  
  
  
  
}); 
 
 
 
 

添加注釋

還可以通過(guò) 指令在合并文件中添加注釋，例如包名、版本、生成時(shí)間等，示例代碼：

 
 
 
 

  
  
  
  
grunt.initConfig({  
  
  
  
  
  pkg: '',  
  
  
  
  
  meta: {  
  
  
  
  
    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +  
  
  
  
  
      '<%= grunt.template.today("yyyy-mm-dd") %> */' 
  
  
  
  
  },  
  
  
  
  
  concat: {  
  
  
  
  
    dist: {  
  
  
  
  
      src: ['', ''],  
  
  
  
  
      dest: 'dist/built.js' 
  
  
  
  
    }  
  
  
  
  
  }  
  
  
  
  
}); 
 
 
 
 

多個(gè)構(gòu)建目標(biāo)

在實(shí)際項(xiàng)目中，往往需要根據(jù)模塊生成多個(gè)目標(biāo)文件，例如基礎(chǔ)模塊和插件模板分開打包，配置示例：

 
 
 
 

  
  
  
  
grunt.initConfig({  
  
  
  
  
  concat: {  
  
  
  
  
    basic: {  
  
  
  
  
      src: ['src/main.js'],  
  
  
  
  
      dest: 'dist/basic.js' 
  
  
  
  
    },  
  
  
  
  
    extras: {  
  
  
  
  
      src: ['src/main.js', 'src/extras.js'],  
  
  
  
  
      dest: 'dist/with_extras.js' 
  
  
  
  
    }  
  
  
  
  
  }  
  
  
  
  
}); 
 
 
 
 

動(dòng)態(tài)文件名

Grunt 合并任務(wù)還可以生成動(dòng)態(tài)的文件名，

 
 
 
 

  
  
  
  
grunt.initConfig({  
  
  
  
  
  pkg: '',  
  
  
  
  
  dirs: {  
  
  
  
  
    src: 'src/files',  
  
  
  
  
    dest: 'dist/<%= pkg.name %>/<%= pkg.version %>' 
  
  
  
  
  },  
  
  
  
  
  concat: {  
  
  
  
  
    basic: {  
  
  
  
  
      src: ['<%= dirs.src %>/main.js'],  
  
  
  
  
      dest: '<%= dirs.dest %>/basic.js' 
  
  
  
  
    },  
  
  
  
  
    extras: {  
  
  
  
  
      src: ['<%= dirs.src %>/main.js', '<%= dirs.src %>/extras.js'],  
  
  
  
  
      dest: '<%= dirs.dest %>/with_extras.js' 
  
  
  
  
    }  
  
  
  
  
  }  
  
  
  
  
}); 
 
 
 
 

配置好以后，運(yùn)行下面的命令就可以進(jìn)行文件合并操作了：

合并后的代碼示例如下：

 
 
 
 

  
  
  
  
/*! Gruntdemo - v0.1.0 - 2013-01-22  
  
  
  
  
* https://github.com/dreamsky/grunt-demo  
  
  
  
  
* Copyright (c) 2013 Andy Li; Licensed MIT */ 
  
  
  
  
(function($) {  
  
  
  
  
  // Collection method.  
  
  
  
  
  $.fn.awesome = function() {  
  
  
  
  
    return this.each(function() {  
  
  
  
  
      $(this).html('awesome');  
  
  
  
  
    });  
  
  
  
  
  };  
  
  
  
  
  // Static method.  
  
  
  
  
  $.awesome = function() {  
  
  
  
  
    return 'awesome';  
  
  
  
  
  };  
  
  
  
  
   
  
  
  
  
  // Custom selector.  
  
  
  
  
  $.expr[':'].awesome = function(elem) {  
  
  
  
  
    return elem.textContent.indexOf('awesome') >= 0;  
  
  
  
  
  };  
  
  
  
  
}(jQuery)); 
 
 
 
 

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

本文題目：JS項(xiàng)目構(gòu)建工具Grunt實(shí)踐：合并文件
分享路徑：http://www.dlmjj.cn/article/cdhdgco.html