轻量级混合前端工程模板
项目名称命名规则参阅 项目名称命名规则 & 描述
[演示]( '点击 · Click')
顺序安装；所有依赖均安装在全局环境下。
####Git
整个项目使用 Git 进行版本控制，并托管在 Github 上。 你可以通过下述命令检查 Git 在你的电脑上是否被安装成功：
git --version####Node
整个项目中的很多构建任务基于 Node.js 运行。 你可以通过下述命令检查 Node.js 在你的电脑上是否被安装成功：
node --version####Gulp.js
项目中的所有构建任务目前完全使用 Gulp.js 。 你可以通过下述命令检查 Gulp.js 在你的电脑上是否被安装成功：
gulp --version####UglifyJS 2
项目中的所有构建任务目前完全使用 UglifyJS 2 。 你可以通过下述命令检查 UglifyJS 2 在你的电脑上是否被安装成功：
uglifyjs --version####NPM
项目中的所有构建任务目前完全使用 NPM 。 你可以通过下述命令检查 NPM 在你的电脑上是否被安装成功：
npm --version####Bower
项目中的所有构建任务目前完全使用 Bower 。 你可以通过下述命令检查 Bower 在你的电脑上是否被安装成功：
bower --version-
[工程模板指南]( '点击 · Click')
-
[文件夹及其结构指南]( '点击 · Click')
-
[HTML 指南]( '点击 · Click')
-
[Jade 指南]( '点击 · Click')
-
[CSS 指南]( '点击 · Click')
-
[Sass 指南]( '点击 · Click')
-
[JavaScript 指南]( '点击 · Click')
-
[CoffeeScript 指南]( '点击 · Click')
参阅 《 GitHub's CSS 》, 《 Refining The Way We Structure Our CSS At Trello 》, 《 Medium’s CSS is actually pretty f***ing good. 》, 《 CodePen's CSS 》, 《 CSS at Lonely Planet 》, 《 Buffer’s CSS 》, 《 CSS at Groupon 》, 《 CSS Guidelines 》, 《 How we do CSS at Ghost 》, 《 Website Style Guide Resources 》
-
在
WEB容器内实时开发； -
使用
Jade预处理HTML； -
压缩
HTML超文本标记文件； -
使用
Sass预处理CSS； -
生成
CSS Sprites及相关样式表文件； -
将
CSS中关的联图片的路径判断性替换成Data URI； -
合并公共 / 页面独有样式表文件；
-
针对
CSS样式表文件作语法、规范的检测； -
压缩
CSS样式表文件； -
使用
UNCSS移除页面相关样式表内未应用的CSS内容（选择器）; -
使用
CSSO优化CSS; -
使用
CoffeeScript预处理JavaScript； -
针对
JavaScript脚本文件作语法、规范的检测； -
压缩
JavaScript脚本文件； -
合并公共 / 页面独有脚本文件；
-
压缩
SVG图片文件； -
将多个
SVG图标转换成SVG字体文件； -
生成、更新
HTML5应用缓存清单文件； -
在对
HTML,CSS,JavaScript等文件的修改保存时实时生成/更新上次更新日期、时间； -
发布项目时自动更新
语义版本号； -
检测网页性能；
-
检测网页真实加载速度；
- 使用 Bower 包管理器管理浏览器端静态资源。
- 允许存在自定义的浏览器端静态资源目录。
- 确保开发活动中在无论线上亦或线下的
HTML,CSS,JavaScript,字体,图片等资源环境下都可以有效进行。
- 确保某些任务可以按指定序列同步执行。
- 只处理被修改过的
Jade,Sass,CoffeeScript文件。
- 使用外部配置文件（
config.json）。
- 从命令行传输参数。
- 使得在一个任务中可以使用复合源。
- 将每一个任务的多个管道按相关规则独立出来，注重管道的重用。
gulp可以通过这个命令开始编辑模式。
gulp -p先对所有相关预处理文件预处理，然后进入编辑模式。
可在上述 两项 命令后添加
--minhtml参数，实时输出被压缩的HTML文件
使用
SASS预处理输出的CSS文件为被压缩的状态，可在上述 两项 命令后添加--csso参数， 实时输出再被优化（CSSO）后的CSS文件。 （参阅：《 Description of CSSO 》）
gulp cmprs对所有非第三方 HTML, CSS, JavaScript 静态资源优化、压缩。
上述 仨 命令均可添加
--size,--notify参数，以输出处理好的文件的容量（体积） & 输出相关操作成功的提示消息。
如果你已经在自己的电脑上安装并配置了上述 开发依赖， 你可以克隆一份 "web.starter.kit-war.machine" 主要镜像 副本至指定文件目录：
git clone https://github.com/iTonyYo/web.starter.kit-war.machine.git你也可以使用 Github for Windows 或者 GitHub for Mac 客户端从 "web.starter.kit-war.machine" 主要镜像 位置克隆一份副本。
克隆完全后，进入 web.starter.kit-war.machine 文件夹，安装所有基于 Gulp 的开发依赖：
npm install如果你是在 Mac 等系统上操作，需要提升操作权限：
sudo npm install如果你所处网络环境访问外网存在不稳定的情况且没法儿使用 VPN 访问相关国外代理服务器，那么你可以通过国内 TAONPM 安装所有模块：
npm install --registry=https://registry.npm.taobao.org如果你需要在安装的过程中输出相关安装日志，可在上述命令后添加 -d 或 -dd 或 -ddd。
安装完所有基于 Gulp 的开发依赖后，从 Bower 安装相关静态资源依赖：
bower install如果你是在 Mac 等系统上操作，需要提升操作权限：
sudo bower install至此，所有开发依赖就安装完了。运行
./tool/build.gulpfile.bat
生成 gulpfile.js 文件，不要关闭打开的命令行界面，这样的话你每次对 gulpfile.coffee 的修改都会被实时生成至 gulpfile.js。
新打开一个命令行界面，输入下述命令
（具体参阅 **）
开始编辑这个工程：
gulp接下来也许（或不）你会需要阅读 《 [如何协作 & 贡献]( '点击 · Click') 》 ！^_^
你不一定会在这儿找到令你惊讶的东西，但是 WSK-War Machine 需要你的热情！^_^
你可以在 Trello 和
Github Wiki
上查看 WSK-War Machine 的开发、计划等动态，我们在 Trello
上头更多地会进行各种讨论、信息收集等活动。
如果你发现一些总是出现的问题，无论是在访问网站时发现，亦或是在查看我们的代码时发现，可以在
Github Issues
上查看是否存在相关特征描述的条目，如果不存在，我们欢迎你提出问题，并与我们展开讨论。[这儿]( '点击 · Click')
是相关 BUG 的定义规范、创建流程及方式等。
那真的是太棒了！！！请查看 《如何创建独属于你的拷贝》！
如果你在功能上或者其他方面有些自己的想法，请查阅 Trello 上的面板是否已经存在相关的卡片。如果你的想法非常棒，面板上却没有相关明确内容，欢迎你通过各种例举、论证的方式阐述自己的想法， 我们看到后会通知你、将你的提议加入功能储备，并竭尽可能尽快去实现它！
...