JavaScript 項目構建工具 Grunt 實踐：合并檔案

　　 Grunt 是一個基於任務的 JavaScript 項目命令列構建工具，運行於 Node.js 平台。Grunt 能夠從模板快速建立項目，合并、壓縮和校正 CSS & JS 檔案，運行單元測試以及啟動靜態伺服器。上一篇文章《Grunt：基於任務的 JavaScript 項目構建工具》介紹了 Grunt 安裝和建立項目架構步驟，這篇文章介紹如何使用 Grunt 合并檔案。

 

　　

 

　　Grunt 內建 concat（檔案合并）、lint（代碼校正） 和 min（代碼壓縮） 任務，在 grunt.js 檔案配置好任務後，運行 grunt 命令就可以自動完成一系列的項目構建操作了，示：

 

　　

 

　　對應的 Grunt 設定檔代碼如下：

/*global module:false*/module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    pkg: '<json:GruntDemo.jquery.json>',    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: ['<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>'],        dest: 'dist/<%= pkg.name %>.js'      }    },    min: {      dist: {        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],        dest: 'dist/<%= pkg.name %>.min.js'      }    },    qunit: {      files: ['test/**/*.html']    },    lint: {      files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']    },    watch: {      files: '<config:lint.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 任務，後面幾個任務將會在隨後的文章陸續介紹。

Grunt 合并檔案

　　Grunt 內建的 concat 任務用於合并一個或者多個檔案（或者指令，例如<banner>指令）到一個檔案。concat 任務的項目組態架構：

// 項目配置grunt.initConfig({  // 項目中繼資料，用於 <banner> 指令  meta: {},  // 將要被合并的檔案清單  concat: {}});

　　基本用法

　　把 src 目錄下的 intro.js、projject.js、outro.js 三個檔案合并到 built.js 檔案並存放在 dist 目錄，配置樣本：

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

　　添加註釋

　　還可以通過 <banner> 指令在合并檔案中添加註釋，例如包名、版本、產生時間等，範例程式碼：

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

　　多個構建目標

 　　在實際項目中，往往需要根據模組產生多個目標檔案，例如基礎模組和外掛程式模板分開打包，配置樣本：

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'    }  }});

　　動態檔案名稱

　　Grunt 合并任務還可以產生動態檔案名稱，

grunt.initConfig({  pkg: '<json:package.json>',  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'    }  }});

　　配置好以後，運行下面的命令就可以進行檔案合併作業了：

grunt concat

　　合并後的程式碼範例如下：

/*! 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));

您可能感興趣的相關文章

• 經典的白富美型 jQuery 圖片輪播外掛程式
• 精心挑選的優秀 jQuery Ajax 分頁外掛程式
• 十款精心挑選的線上CSS3代碼產生工具
• 讓人愛不釋手的13套精美網頁表徵圖素材
• 10套精美的免費網站後台管理系統模板

 

本文連結：Grunt:基於任務的 JavaScript 項目命令列構建工具

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源