wlwr/generator-lego

f2e workflow, base on yeoman & gulp

generator-lego

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

目录

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

主要功能 [⬆]

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

• webserver
• 保存文件时，自动刷新浏览器
• 初始化项目目录结构及文件
• 自动编译sass
• 自动补全css3浏览器前缀
• 支持ejs模板
• 多雪碧图合并、2x、3x拼图
• 压缩图片
• 发布到svn
• 打包

环境准备 [⬆]

1. Node 环境：默认此步骤已完成 （Mac用户建议使用 Brew 安装 Node.js）
2. Yeoman环境：npm install -g yo
3. Gulp 环境：npm install -g gulp
4. 图片编辑环境(Mac)：
   • brew install GraphicsMagick
   • brew install phantomjs
5. 图片编辑环境(Win)：
   • GraphicsMagick 下载地址 备胎：GraphicsMagick-1.3.20-Q8-win32/64-dll.zip
   • phantomjs 下载地址 备胎：phantomjs-1.9.7-windows.zip
   • 添加环境变量 设置环境变量后，重启系统。

快速开始 [⬆]

提供以下2种获取方式：

1. Clone the repo

   • git clone git@github.com:duowan/generator-lego.git
   • 在克隆目录执行 npm link 链接到全局模块的位置
   • 在任意空目录执行 yo lego 初始化项目

2. npm

   • npm install -g generator-lego
   • 在任意空目录执行 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 不做操作
│    ├── 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文件

雪碧图合并

* 移步至 [多雪碧图合并、2x、3x拼图][4]

任务说明 [⬆]

初始化项目

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

开发

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

构建

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

打包

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

其他命令参数

1. gulp [-p <port>] [-w]

   • -p port 的简写，给webserver指定端口号；此参数需要指定参数值作为端口号，如：8080
   • -w watch 的简写，检测slice文件夹，自动生成scss样式；此参数不需指定参数值

2. gulp build [-p <port>]

   • -p port 的简写，给webserver指定端口号；此参数需要指定参数值作为端口号，如：8080

Demo [⬆]

已知问题 [⬆]

License [⬆]

Released under MIT LICENSE

---