generator-mod-browserify

基于 mod.js 和 browserify 的Yeoman生成器。

准备

你需要事先了解这几样东西

1. Yeoman
2. CommonJs
3. browserify
4. generator-webapp

项目基于generator-webapp做了很多扩展。

简单介绍下browserify：

将符合CommonJs规范的js代码生成浏览器可以直接执行的js代码。

比如：

// a.js
module.exports = "this is a.js"

// b.js
var a = require(./a.js);
console.log(a); // "this is a.js"

通过browserify，会将a.js和b.js合并成浏览器执行的js代码。

安装

安装Yo

你需要安装Yo，具体安装方法可以看看这里。

安装Generator

npm install generator-mod-browserify -g

使用

Yo一下

yo mod-browserify

目录结构

app
 |-- components bower或者components外部依赖
 |-- images
 |-- styles
   |-- app.scss 主入口css文件
 |-- scripts
   |-- app.js 主入口js文件
   |-- imports 待导入到app.js的所有js文件
   |-- modules 本地模块
tasks grunt拆分任务目录

说明

app/components

使用bower或者component安装的目录，不一定都是符合CommonJs规范。

建议对于外部依赖提供的方法，都写在app/scripts/imports/define.js里：

var $ = window("$");
var Broadcast = require("binnng/broadcast");

注意

这里的require是mod.js(app/components/mod.js/mod.js)提供的方法，便于引入app/components里符合CommonJs规范的js文件，这也是我引入mod.js的主要原因。

当然，如果符合CommonJs规范，你也可以写在app/scripts/modules里：

var domify = require("../components/domify/domify.js");

如果多个模块都要使用domify这个方法，那就得在modules文件里写很多遍上面的代码，所以还是建议写在app/scripts/imports/define.js里

var domify = require("domify");

modules里直接使用domify这个方法就行。

tasks

这是拆分了的grunt任务目录

具体可以看看我这个项目：grunt-task-module

主要作用是：

拆分grunt任务，免得gruntfile.js越来越长，越来越难以维护。

功能

除了基本的generator-webapp提供的grunt服务，还做了些扩展。

grunt publish

发布 build后如果要做些特殊处理，可以写在tasks/publish.js里。

grunt doc

生成js(Coffee)文档。 可以看看docco。

grunt serve:doc

访问文档。