generator-lego - 前端工作流


MIT
跨平台
JavaScript

软件简介

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

快速开始

提供以下2种获取方式:

  1. Clone the repo

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

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

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

  5. npm

  6. npm install -g generator-lego

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

[](https://github.com/duowan/generator-

lego#%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84-)文件结构

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

[](https://github.com/duowan/generator-

lego#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87-)环境准备

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

  2. Yeoman环境:npm install -g yo

  3. Gulp 环境:npm install -g gulp

[](https://github.com/duowan/generator-

lego#%E4%BB%BB%E5%8A%A1%E8%AF%B4%E6%98%8E-)任务说明

[](https://github.com/duowan/generator-

lego#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE)初始化项目

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

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

开发

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

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

发布

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