基于node+npm+grunt构建一个中型项目

作者：zccst

参考资料：如何使用 Grunt 构建一个中型项目 #672
https://github.com/seajs/seajs/issues/672


1，构建

（1）package.json

{
    "family": "test",
    "version": "0.0.1",
    "name": "gruntTest",
    "spm": {
        "alias": {
            "jquery": "gallery/jquery/1.8.2/jquery",
            "dialog": "dist/styles/component/dialog/src/dialog"
        }
    },
    "devDependencies": {
        "grunt": "~0.4.1"
    }
}

（2）Gruntfile.js

接下来该grunt介入了，先写下通用式：

module.exports = function (grunt) {
};

由于该示例有模块依赖了css，估计你的项目现在或以后也有这种情况。
所以需要在transport的过程中对所依赖的css进行转换，以便seajs能加载一个类似这样的标签到页面中：

<link charset="utf-8" rel="stylesheet" href="../styles/component/dialog/src/dialog_css.css">

seajs在1.3.1的版本中是将css文件也包装成一个js模块，以seajs.importStyle函数包裹原css内容。
这样在执行importStyle函数时，向页面添加一个上面的link标签。

ps：在新的2.0版本中，貌似该函数已从sea.js中剥离出来，形成一个单独的插件style

为了实现上述的转换需要引入这样的代码：

var transport = require('grunt-cmd-transport');
var style = transport.style.init(grunt);
var text = transport.text.init(grunt);
var script = transport.script.init(grunt);

现在我们开始定义构建任务，先将package.json引入，后面的任务会用到其中的设置：

grunt.initConfig({
    pkg : grunt.file.readJSON("package.json"),
});

（3）自定义模块的transport任务：

transport : {
    options : {
        paths : ['.'],
        alias: '<%= pkg.spm.alias %>',
        parsers : {
            '.js' : [script.jsParser],
            '.css' : [style.css2jsParser],
            '.html' : [text.html2jsParser]
        }
    },
    styles : {
        options : {
            idleading : 'dist/styles/'
        },
        files : [
            {
                cwd : 'styles',
                src : '**/*',
                filter : 'isFile',
                dest : '.build/styles'
            }
        ]
    }
}

任务内容本身非常简单，就是将styles路径中的所有文件cwd : 'styles',src : '**/*'，也就是模块dialog，提取依赖并生成到.build/styles的临时目录中去。

这个任务包含了两级的options，Target的options会覆盖外层中Task的options，先说下Task的options中的含义：

paths：模块的路径，默认的是sea-modules，如果你构建的时候出现找不的模块的话，可能就是这里出了问题。

alias：定义模块别名，这里以grunt支持的一种模板语法来从package.json引入定义：<%= pkg.spm.alias %>

parsers：定义下针对不同格式文件的转换方式，这里的设置感觉以后很可能会在插件中内置，暂时先这么设置。

紧接着看下Task中的options：

idleading:模块ID的前缀


如果您觉得本文的内容对您的学习有所帮助，您可以微信：