grunt-veronica

一个 grunt 插件，用于构建 veronica 搭建的项目

入门

该插件需要 Grunt ~0.4.5

如果你没使用过 Grunt , 请查阅 Grunt 入门指南 ， 了解如何创建一个 Gruntfile，以及怎样安装并使用 Grunt 插件。

完成上面的工作后，你可以通过以下命令安装这个插件：

npm install grunt-veronica --save-dev

安装完毕后，在你的 Gruntfile 文件里，加入如下 JavaScript 代码：

grunt.loadNpmTasks('grunt-veronica');

"veronica" 任务

概览

在 Gruntfile 里, 添加一个 veronica 数据对象，传入到 grunt.initConfig() 里。

grunt.initConfig({
  veronica: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  }
});

配置项

appDir

类型：String 默认值：''

应用程序根路径

baseUrl

类型：String 默认值：''

应用程序基路径，即主文件：main.js 所在的相对路径

dir

类型：String 默认值：''

打包后的应用程序根路径

appDir: './app',
baseUrl: './',
dir: './app-release',

reqConfig

类型：Object 默认值：''

用于 RequireJS 的配置项，包括：paths、shim、packages

optimize

类型：Object 默认值：{ paths: [] }

是否压缩代码，如果不压缩代码，则传入false，这个属性接受一个对象，通过 paths 属性，可 设置哪些路径不需要被压缩，例如：

{
    paths: ['!**/*.min.js']
}

notMerge

类型：Array 默认值：[]

从文件打包中排除的路径，不合并到任意文件中

notMerge: ['jquery'],

copy

类型 ：Array 默认值：[]

使用 grunt-contrib-copy 插件拷贝文件，通常用于将包管理器维护的第三方库拷贝到指定的目录

clean

类型：Array 默认值：[]

合并后清理的文件（夹），配置的路径相对于当前 Grunt 的执行路径

clean: [
  './app-release/widgets/**/*.css',
  './app-release/widgets/**/*.html',
  './app-release/modules',
  './app-release/**/require-conf.js'
],

moduleMerge

类型：Array 默认值：[]

打包 module 中的 package 时，要合并的第三方库。

默认不会合并出现在module中的任何第三方库，这里的配置可让某些只在一个地方出现的第三方库合并到jsPack的Package主文件中

entryPack

类型：Array 默认值：[]

对入口文件进行打包，这里的配置是标准 RequireJS 的 modules 配置

示例：

entryPack: [{
    name: './main',
    include: ['./require-conf', 'veronica', 'jquery', 'underscore',
        'text', 'css', './modules/dashboard/main', './modules/user-control/main']
}]

jsPack

类型：Object 默认值：{}

配置package的路径，进行package打包

jsPack.defaults

每个配置项的默认参数设置，可以更改此配置

默认的参数：

{
    name: '',
    origin: function(){
    	return './modules/' + this.name;
    },
    target: './widgets',
    unique: false
}

jsPack.paths

类型：Array 默认值：[]

要打包的路径配置，每个数组项包括以下几个配置：

• name: 必填项 路径的名称，这个通常与项目中的 module 名称相同
• origin：Function or String 要查找package的路径，相对于 baseUrl
• target：所有package打包后放置的路径，相对于 dir 和 baseUrl
• unique：是否将所有package文件夹名称更改为唯一命名（适用于多层级放置的package）

配置项也支持String的方式设置，这样它设置的是配置项中的name属性

jsPack: {
    defaults: {
        target: './widgets2'
    },
    paths: [{
        name: 'dashboard'
    }, 'user-control', {
        name: 'others',
        origin: './modules/others',
        target: './widgets',
        unique: true
    }]
},

cssPack

类型：Object 默认值：'[]'

css 打包的策略，指定不同的文件夹合并其内的所有 CSS 文件

为什么要合并

由于IE6 - IE9 CSS样式的限制，如果CSS分散在不同的Package中，可能会触发这个限制，因此在打包应考虑到在样式文件个数和样式选择器个数之间找到平衡关系。

配置项：

• mode: 合并模式，默认值：'all' 未启用
• name: 最终合并后的CSS文件名，默认值：'module.css'
• src：查找待合并CSS的路径，默认值：['./widgets']
• target：合并后文件的放置路径，默认值：options.dir + '/styles'

示例：

cssPack: {
    mode: 'all',
    name: 'module.css',
    src: ['./widgets'],
    target: './app-release/styles'
}

remote

远程目录打包，如果不启用该特性，传入 false

remote.vendor

类型：Array 默认值：[]

项目使用的远程第三方库压缩包配置，在打包时会下载这个压缩包并解压到本地文件夹 __local__

vendor: [{
    path: 'http://xxx.xx/',
    name: 'bower_components.zip'
}]

remote.modules

类型：Array 默认值：[]

项目使用的远程 Package 配置，在打包时会下载这个压缩包并解压到本地文件夹 __local__/modules

modules: [{
    name: 'basic.zip',
    path: 'http://xxxxx/'
}]

remote.copy

在项目打包结束后，需要进行拷贝的文件（夹），这里使用 grunt.contrib.copy 的配置

示例

稍小型项目

• 目录结构

── app
   ├── widgets
   |   ├── base
   |   │   ├── header/
   |   │   └── portal/
   |   ├── music
   |   │   ├── widget1/
   |   │   └── widget2/
   |   └── account
   |       └── widget3/
   ├── main.js
   └── require-conf.js
── release/
── Gruntfile.js

• 打包配置

Gruntfile.js

options: {
    appDir: './app',
    baseUrl: '.',
    dir: './release',
    reqConfig: require('./app/require-conf.js')(),
    entryPack: [{
    	name: './main',
        include: ['./require-conf']
    }],
    jsPack: [{
    	name: '',
        origin: './widgets',
        unique: true
    }]
}

稍大型项目

• 目录结构

── root
   ├── modules-A
   |   └── music
   |     ├── widgets/
   |     ├── plugins/
   |     └── main.js 
   ├── modules-B
   |   ├── account
   |   |   ├── widgets/
   |   |   ├── plugins/
   |   |   └─ main.js
   |   └── group
   |       ├── widgets/
   |       ├── plugins/
   |       └── main.js 
   |── project-main
   |  ├── modules-core
   |  |   └── base
   |  |     └── widgets
   |  |       ├── header/
   |  |       └── portal/
   |  ├── main.js
   |  └── require-conf.js
   ├── release
   └── Gruntfile.js

• 打包配置

Gruntfile.js

options: {
    appDir: './proj-main',
    baseUrl: '.',
    dir: './release',
    reqConfig: require('./project-main/modules-core/require-conf.js')(),
    entryPack: [{
    	name: './main'
    }],
    jsPack: [{
    	name: 'base',
        origin: './modules-core/base/widgets'
    },{
    	name: 'music',
        origin: '../modules-A/music/widgets'
    },{
    	name: 'music',
        origin: './modules-A/music/plugins'
    },{
    	name: 'account',
        origin: './modules-B/account/widgets'
    }],
    cssPack: {
        mode: 'all',
        name: 'module.css',
        src: ['./widgets'],
        target: './release/styles'
    }
}

Release History