generator-lego前端工作流

联合创作 · 2023-09-30 05:56

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

快速开始

提供以下2种获取方式:

  1. Clone the repo

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

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

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

  • npm

    • 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/

    浏览 17
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    编辑 分享
    举报
    评论
    图片
    表情
    推荐
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    编辑 分享
    举报