轻量级混合前端工程模板
项目名称命名规则参阅 项目名称命名规则 & 描述
[演示]( '点击 · 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 上的面板是否已经存在相关的卡片。如果你的想法非常棒,面板上却没有相关明确内容,欢迎你通过各种例举、论证的方式阐述自己的想法, 我们看到后会通知你、将你的提议加入功能储备,并竭尽可能尽快去实现它!
...