generator-lego前端工作流

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

快速开始

提供以下2种获取方式：

1. Clone the repo

• git clone git@github.com:duowan/generator-lego.git




• 在克隆目录执行 npm link 链接到全局模块的位置




• 在空目录执行 yo lego 初始化项目

• npm install -g generator-lego
  




• 在空目录执行 yo lego 初始化项目

文件结构

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

yourProj/

│

├── package.json                // 项目依赖定义

├── gulp.js                     // 配置任务

│

├── node_modules                // `npm install` 拉取依赖包

│

├── src/                        // 开发目录

│    ├── css/                   

│    │   └── global.css         // 经过sass编译后的出口css文件

│    ├── sass/                  // sass源文件

│    ├── img/                   // 仅 Copy 不做操作

│    ├── js/                    // 仅 Copy 不做操作

│    └── index.html             

│    

└── dest/                       // 发布目录，执行 `gulp release` 生成

    ├── css/                    

    │   └── global.css

    ├── img/                   

    ├── js/                     

    └── index.html

环境准备

1. Node 环境：默认此步骤已完成  （Mac用户建议使用 Brew 安装 Node.js）




2. Yeoman环境：npm install -g yo




3. Gulp 环境：npm install -g gulp

任务说明

初始化项目

• 执行yo lego，初始化PC类的项目。




• 或者，执行yo lego:mobi，初始化移动类型的项目。

开发

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




• gulp -p 8080 同上，-p参数指定特定端口。

发布

• gulp release 将静态文件压缩到 dest/。