##此版本只适用于智讯科技内部开发
使用 grunt-init创建基于seajs和less的前端开发工作流程.
随着web的日益发展，前端的工作越来越繁多，使用的工具也越来越多
目前一个基本的web开发流程类似下面的结构
1、建立项目，梳理目录结构
2、coding...
3、发布
看起来很简单的流程，但是如果仔细考虑，就会碰到很多问题
1、线上资源和开发资源的更新问题，如何保证客户端载入的永远是线上最新的版本，而不使用缓存。
2、前端资源的压缩和打包，太繁杂，又要压缩js，又要压缩css，还要压缩图片。
3、如果项目太大，如何形成良好的团队开发模式。
seajs遵循CMD规范，书写规则类似与nodejs，关于seajs的东西，这里不阐述，有兴趣的可以去seajs的官网查询
less是一款css的预处理语言，他有独立的运算能力，而且具有混合，变量等动态语言的特性，使用less可以快速开发css
######点击去查看less文档
以上这些就解决了模块化的问题，但这些只是开发时的规范，下面看工作流能够做什么。
seajs开发的都是模块化的东西，如果一个网页的功能很多，那么就可能出现需要加入大量js的问题，为了解决这个问题，我们可以将seajs的模块打包，减少对服务器的请求
less文件开发的东西不能直接在线上使用，所以需要将less文件打包成css文件使用
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，浏览器将会把Base64编码解析为图片，这一切都在客户端进行，将图片保存到css中，一是能进行缓存，第二也可以减少网页对服务器的请求
什么是内嵌资源，内嵌资源就是将一些css文件、js文件、图片嵌入到html页面中，去避免为了一些可能只有一两句的文件去请求服务器资源，将小文件嵌入到html中，看示例就能很清楚：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="../css/style.css?__inline=true" />
</head>
<body>
<div id="logo"></div>
<div>
<img src="../img/house_01.png?__inline=true" alt="" />
</div>
<script src="../js/sea.js"></script>
<script src="../js/rootConfig.js?__inline=true"></script>
<script>
seajs.use('app');
</script>
</body>
</html>
使用工作流打包后：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
html,body{margin:0;padding:0}div#logo{background:url(data:image/png;base64,...) 0 0 no-repeat;background-color:#00f;height:60px}
</style>
</head>
<body>
<div id="logo"></div>
<div>
<img src="data:image/png;base64,..." alt="" />
</div>
<script src="../js/sea.js"></script>
<script>
seajs.config({alias:{jquery:"lib/jquery",app:"dist/app/app",requires:"dist/requires/requires",include:"dist/include/include",plugins:"dist/plugins/plugins"},charset:"utf-8",map:[[/^(.*\.(?:css|js))(.*)$/i,"$1?v=0.1.0"]]});
</script>
<script>
seajs.use('app');
</script>
</body>
</html>
可以看到，将一些小资源内嵌到html中，可以减少很多服务器的请求操作
在我们上线的时候可能有很多问题，新的资源需要更新，那么html页面中就需要手动更新文件的缓存，一般的方法是给更新的资源添加时间戳。
<img src="logo.png?t=7defa41">
但是这样也有问题，当你更新了html模版，而没有更新资源文件，那么新的用户在访问网站时，就会形成缓存，而如果你先更新了资源文件，没有更新html模版，那么老用户在此期间访问网站，还是会加入缓存，所以一般大型网站在更新时，都加班到半夜，挑相对人少的时候去更新。
那么我们看看工作流是怎么解决的，计算出文件的hash值，将新文件重命名，在文件名中加入hash值，这样你更新资源时，不会覆盖原来的旧文件，然后将html中对资源的引用地址改为新的地址，这样就可以防止新用户产生缓存。
看示例：
<img src="logo.png">
<img src="7defa41.logo.png">
ok,现在大家应该能知道，工作流是怎么处理前端的工作的了，下面就看看怎么开始搭建你的工作流
###配置环境
首先你需要一个node.js的环境
1、安装nodejswindow 安装地址，mac 推荐通过brew安装brew install node
2、安装 grunt-cli npm install -g grunt-cli
3、安装 grunt-init npm install -g grunt-init
4、克隆本仓库到本地, windows克隆到：%USERPROFILE%\.grunt-init\ mac克隆到~/.grunt-init/ 如果没有.grunt-init目录可用mkdir .grunt-init命令创建
5、打开命令行，新建你的项目文件夹mkdir yourProject
6、进入文件夹，在命令行输入，grunt-init wit_workflow
7、回答相对的问题后，你的工作流就创建完成了
初始化完成后你将获得下面这样结构的项目
└── dev
├── img
| └── logo.png
├── js
│ └──sea.js
│ └──rootConfig.js
│ └──yourProjectName.cmd.json
│ └── src
│ └── app
│ └── app.js
│ └── include
│ └── include.js
│ └── plugins
│ └── plugins.js
│ └── requires
│ └── requires.js
├── less
| └── frameworks
| └── frameworks.less
| └── style.less
├── html
| └── index.html
└── Gruntfile.js
└── package.json
└── yourProjectName.wit.json
如果不使用less,将生成这样的目录
└── dev
├── img
| └── logo.png
├── js
│ └──sea.js
│ └──rootConfig.js
│ └──yourProjectName.cmd.json
│ └── src
│ └── app
│ └── app.js
│ └── include
│ └── include.js
│ └── plugins
│ └── plugins.js
│ └── requires
│ └── requires.js
├── css
| └──src
| └── frameworks
| └── frameworks.less
| └── style.less
├── html
| └── index.html
└── Gruntfile.js
└── package.json
└── yourProjectName.wit.json
1.html文件存放在html文件中。
2.seajs的模块存放在js/src目录中，app代表模块，html中可以use，不能require，include目录代表最基本的引用文件，比较底层的东西请写在这里，可以被require，plugins项目中自己开发的插件，可能被多此引用，此文件夹下的东西都不打包，requires表示app模块中所需的引用，只能被app中的模块require
3.less文件夹放less文件，打包后会自动生成css目录，和less目录同级
4.不使用less时,开发css时使用import将模块引入，在终端中输入grunt dev将会打开监听模式，将css->src目录下的所有css合并到css->dist->style.css中，在html中只引入此文件。
在package.json同级目录执行
npm install
完成后请修改根目录下node_modules->grunt-usemin->lib->fileprocessor.js
在
css: [
[
/(?:src=|url\(\s*)['"]?([^'"\)(\?|#)]+)['"]?\s*\)?/gm,
'Update the CSS to reference our revved images'
]
],
后添加
less: [
[
/(?:src=|url\(\s*)['"]?([^'"\)(\?|#)]+)['"]?\s*\)?/gm,
'Update the CSS to reference our revved images'
]
],
以开启对less文件的支持
开发时请注意：
所有seajs的模块都需要别名，别名配置在dev/js/rootConfig.js中配置，配置完成后请同步更新同目录下的json文件，这里配置的时打包发布时所需的模块别名，此文件只包含依赖的模块，不需要配置app文件夹中的模块
可以查看example，学习怎么配置这些文件
因为less不能直接使用，所以请在开发的时候打开less的编译开关，我们建议将所有css文件合并到style.css文件中，所以目前只会生成一个style.css文件，如果需要配置，请手动修改Gruntfile.js中针对less的配置
grunt watch
开启对less文件的监听
开发完成以后，需要发布项目，在Gruntfile.js的同级目录执行
grunt release
将在dev的同级目录生成release文件夹，里面包含所有线上的资源，目录结构类似于dev目录，js/src目录被删除，会多生成dist(线上js主目录)代替src，debug目录用来调试
完成后就可以将release目录中的东西，同步到服务器中了。