Grunt 構建SeaJS

時間 2019-11-11

標籤 grunt 構建 seajs 欄目 Node.js 简体版

原文原文鏈接

GitHub地址：https://github.com/MrLeo/SeaJS

目錄結構

目錄結構說明
web存放HTML文件
static存放全部HTML須要用到靜態資源文件（css、js、img…）css

module存放HTML對應的業務模塊

common存放與業務無關的模塊

Get Start

準備工做

安裝 Node.js 及 npm
安裝 grunt-cli （容許安裝多版本grunt）html
```
$ npm install -g grunt-cli
```
用命令行進入到項目所在目錄jquery
```
$ cd /d F:\WWW\SeaJS\static\
```

安裝 grunt 及插件到項目所在目錄（--save-dev）git

$ npm install grunt --save-dev //grunt
$ npm install grunt-cmd-transport --save-dev //提取模塊ID
$ npm install grunt-cmd-concat --save-dev //合併文件
$ npm install grunt-contrib-uglify --save-dev //壓縮文件
$ npm install grunt-contrib-clean --save-dev //清理臨時目錄

構建項目

建立package.jsongithub

此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。你能夠在此文件中列出項目依賴的grunt和Grunt插件，放置於devDependencies配置段內。web

{
  "name": "SeaJS",
  "version": "1.0.0",
  "author": "Leo",
  "spm": {
    "alias": { //同 seajs.config 中設置的別名
        "base": "module/base/base", 
        "jquery": "libs/jquery/jquery-1.8.3.min"
    }
  },
  "devDependencies": { //grunt 構建用到的依賴包
    "grunt": "*", //"*"表明最新版本;"~0.4.1"表明指定版本
    "grunt-cmd-transport": "*",
    "grunt-cmd-concat": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-clean": "*"
  }
}

建立Gruntfile.jsnpm

此文件用來配置或定義任務（task）並加載Grunt插件的。Gruntfile.js 是有效的 JavaScript 文件，和package.json文件在同一目錄層級。json

module.exports = function(grunt) {
    require('time-grunt')(grunt);//Time how long tasks take
    //require('load-grunt-tasks')(grunt);//Load grunt tasks automatically

    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"), //引入package.json的JSON元數據
        /**
         * step 1:
         * 建立一個臨時目錄
         * 將須要合併的js文件轉爲具名函數，並保持獨立地保存在這個臨時目錄
         */
        transport: {//task任務
            options: { 
                paths: ['.'], //模塊的路徑，'.'表明相對路徑，默認的是 sea-modules
                alias: '<%= pkg.spm.alias %>' //模板字符串語法來從package.json引入模塊別名
            },
            common: {//target
                options: {
                    idleading: 'common-dist/', //構建後的模塊ID的前綴
                },
                files: [{
                    expand: true, //開啓處理動態的src-dest文件映射
                    filter: 'isFile', //匹配過濾src文件路徑
                    cwd: 'common', //全部src指定的匹配都將相對於此處指定的路徑（但不包括此路徑）
                    src: '**/*.js', //相對於cwd路徑的匹配模式(**表明當前路徑以及子路徑)
                    dest: '.build/common' //目標文件路徑前綴
                }]
            },
            base: {
                options: {
                    idleading: 'module/base-dist/',
                },
                files: [{
                    expand: true,
                    filter: 'isFile',
                    cwd: 'module/base',
                    src: '**/*.js',
                    dest: '.build/module/base'
                }]
            },
            demo: {
                options: {
                    idleading: 'module/page-dist/demo/',
                },
                files: [{
                    expand: true,
                    filter: 'isFile',
                    cwd: 'module/page/demo',
                    src: '**/*.js',
                    dest: '.build/module/page/demo'
                }]
            }
        },
        /**
         * step 2:
         * 將臨時目錄下獨立的具名函數文件 合併爲 1個 js 文件
         * 將這個合併的 js 文件 拷貝到 咱們的輸出目錄
         */
        concat: {
            options: {
                separator: ';', // 定義一個用於插入合併輸出文件之間的字符
                include: 'relative' //relative（默認）只會合併相對標識的依賴；；all會合並全部依賴
            },
            common: {
                files: [{
                    expand: true,
                    ext: '.js',
                    cwd: '.build/common/',
                    src: ['**/*.js'],
                    dest: 'common-dist/'
                }]
            },
            demo: {
                files: {
                    'module/page-dist/demo/index.js': ['.build/module/page/demo/index.js'],
                    'module/page-dist/demo/index-debug.js': ['.build/module/page/demo/index-debug.js']
                }
            }
        },
        /**
         * step 3:
         * 壓縮 這個 合併後的 文件
         */
        uglify: {
            common: {
                options: {
                    // 此處定義的banner註釋將插入到輸出文件的頂部
                    banner: '/*! <%= pkg.author %>  @  <%= grunt.template.today("dd-mm-yyyy") %> */\n'
                },
                files: [{
                    expand: true,
                    ext: '.js',
                    cwd: 'common-dist/',
                    src: ['**/*.js', '!**/*-debug.js'],
                    dest: 'common-dist/'
                }]
            },
            main: {
                options: {
                    // 此處定義的banner註釋將插入到輸出文件的頂部
                    banner: '/*! <%= pkg.author %>  @  <%= grunt.template.today("dd-mm-yyyy") %> */\n'
                },
                files: {
                    'module/page-dist/demo/index.js': ['module/page-dist/demo/index.js']
                }
            }
        },
        /**
         * step 4:
         * 將這個臨時目錄刪除
         */
        clean: {
            spm: ['.build']
        }
    });

    grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('build', ['transport', 'concat', 'uglify', 'clean']);
};