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


参考资料:如何使用 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的前缀


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>