romber123 / generator-lego

F2E workflow, base on yeoman & gulp

generator-lego

generator-lego 基于gulp的前端工作流

目录

• 主要功能
• 环境准备
• 快速开始
• 文件结构
• 功能说明
• 任务说明
• Demo
• 已知问题
• License

主要功能 [⬆]

这是一个帮助前端开发工程师简化工作的工具，它的主要功能是：

• WebServer
• 监听匹配文件的变化自动刷新浏览器
• 初始化项目目录结构及文件
• 自动编译SASS
• 自动补全CSS3浏览器前缀
• 支持ejs模板
• 多雪碧图合并、2x、3x拼图
• 压缩图片
• 发布到svn
• zip打包

环境准备 [⬆]

1. Node 环境：支持到 Node v0.12.9；若已安装高版本的Node，请使用 nvm 切换至 0.10.x 或 0.12.x 再执行下面步骤
2. Yo、Gulp 环境 ：npm install -g yo gulp
3. Subversion Command-Line (Mac已自带，Win如未安装可点击下载)

快速开始 [⬆]

提供以下2种获取方式：

1. npm

   • npm install -g generator-lego
   • 在空目录执行 yo lego 初始化项目

2. Clone the repo

   • 点击右边【clone in desktop】克隆到本地
   • 在克隆目录执行 npm link 链接到全局模块的位置
   • 在空目录执行 yo lego 初始化项目

文件结构 [⬆]

generator-lego 初始化和执行任务涉及的文件结构：

yourProj/
│
├── package.json                // 项目依赖定义
├── gulp.js                     // gulp配置任务入口
├── tasks/ 						// gulp任务流，开发、构建、发布等
│
├── node_modules    			  // `npm install` 拉取依赖包
│
├── src/                        // 开发目录
│    ├── css/                   
│    │   └── global.css         // 经过sass编译后的出口css文件
│    ├── sass/                  // sass源文件
│    ├── img/                   // 仅 Copy 不做操作
│    │   └── slice/             // 切片文件夹，拼雪碧图用
│    ├── js/                    // 仅 Copy 不做操作
│    ├── tpl/                   // 仅 Copy 不做操作，用来存放ejs模板
│    └── _index.html             
│    
└── dest/                       // 发布目录，执行 `gulp build` 生成
    ├── css/                    
    │   └── global.css
    ├── img/                   
    ├── js/                     
    └── index.html               

功能说明 [⬆]

ejs模板

• 参与ejs编译的文件匹配路径src/tpl/*.ejs
• 文件夹src/tpl可内建子文件夹，存放被引用的代码片段；子文件夹不会编译出html文件
• 开发阶段，编译后生成的html文件，位于src/；如已有同名html文件，覆盖之
• 构建阶段，编译后生成的html文件，位于dest/；同样覆盖同名html文件

雪碧图合并

• 切片放在文件夹src/slice/，该文件夹可继续创建子文件夹存放切片
• 需要合并的切片，使用background-image:url()引入切片样式，不要使用background属性的缩写
• 详细说明移步 多雪碧图合并、2x、3x拼图

任务说明 [⬆]

初始化项目

• 执行yo lego，按如下规则初始化
  • 如当前文件夹没有node_modules，则创建软连接
  • 如当前文件夹存在src，则退出
  • 否则，继续执行初始化过程

开发

• gulp 创建一个链接，自动检测src文件夹下的静态文件，自动刷新。支持sass、ejs编译。

构建

• gulp build 将静态文件压缩到 dest/，该阶段会执行雪碧图合并、ejs编译。

发布

• gulp publish 将 dest/静态文件上传到svn。

打包

• gulp zip 将源码和构建后代码压缩成一个zip包。

检测

• gulp hint 检测src/文件下的语法。

其他命令参数

1. gulp [-p <port>] [-q] [-w <width-of-design-page>]

   • -p port 的简写，给webserver指定端口号；此参数需要指定参数值作为端口号，如：8080
   • -q qrcode 的简写，指定该参数生成 url的二维码
   • -w 指设计稿像素宽度，默认值 750，用来生成生成rem单位的切片语法；如不指定-w将生成px单位的语法

2. gulp build [-p <port>] [-b] [-q] [-w <width-of-design-page>]

   • -p 指port，给webserver指定端口号；此参数需要指定参数值作为端口号，如：8080
   • -b 移除 HTMl 的注释
   • -q 指qrcode，指定该参数生成 url的二维码
   • -w 指设计稿像素宽度，默认值 750，将使用rem单位更新定位数据；如不指定-w将使用px单位更新定位数据

3. gulp publish [-m <message>]

   • -m svn提交日记

Demo [⬆]

已知问题 [⬆]

1. 管理 node版本
   • mac用户使用nvm
     • 安装nvm：curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash
     • 激活nvm：[[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh，并加到 ~/.bashrc、~/.profile或~/.zshrc配置中
     • node的安装和切换见官方文档
   • win 用户使用nvm-windows

请使用Mac请使用[nvm] 默认此步骤已完成 （Mac建议使用 Brew 安装 Node.js）

License [⬆]

Released under MIT LICENSE

---