Best workflow with grunt

基于 Grunt 构建最好的工作流

Transcript

1. Best workflow with Grunt
   使用 Grunt 构建本地工作流
   @keelii
   

   View Slide

2. 目录
   • 开发工具
   • 系统软件
   • 硬件配置
   • 版本管理
   • 开发目录
   

   View Slide

3. View Slide

4. 目录
   • 开发工具
   • 系统软件
   • 硬件配置
   • 版本管理
   • 开发目录
   

   View Slide

5. 开发工具
   • 编辑器/IDE – sublime, Notepad++
   • 调试工具 – Fiddler, Developer Tools
   • 砖业工具 – Node.js, NPM
   (nodejs package manager)
   • 统筹自动化工具 – Grunt, yeoman, ant
   

   View Slide

6. The JavaScript Task Runner
   

   View Slide

7. Grunt 常用任务
   • grunt-contrib-copy // 备份文件
   • grunt-contrib-uglify // 压缩脚本
   • grunt-contrib-cssmin // 压缩样式
   • grunt-strip // 去除调试语句console
   • grunt-requirejs // 用于 requirejs 项目
   

   View Slide

8. • Gruntfile.js
   Grunt 执行配置文件，包括各种任务的参数
   路径等
   • package.json
   项目信息，包括项目依赖的一些 Grunt 插件
   版本等
   Grunt 项目配置文件
   

   View Slide

9. Grunt 使用方法步骤
   1. 安装 Node.js
   「安装」
   2. 撰写 package.json 与 Gruntfile.js 配置文件
   3. 首次须安装依赖执行 npm install 安装依赖包
   4. 切换到当前命令行路径执行 grunt 命令
   附件 中提供了一个测试用的 grunt 相关配置文件，可根据情况修改使用
   

   View Slide

10. 目录
    • 开发工具
    • 系统软件
    • 硬件配置
    • 版本管理
    • 开发目录
    

    View Slide

11. Find and Run Robot2
    Listary
    Todoist
    程序快速启动器
    ——妈妈再也不用担心我的桌面图标乱得一团糟了
    本地文件/夹、目录快速访问、切换、查找 + 实用小工具
    ——居家旅行躲猫猫必备神气
    工作事项、待办事情(上线)管理工具。支持在线、客户端、手机等
    —— 健忘症必备
    

    View Slide

12. 目录
    • 开发工具
    • 系统软件
    • 硬件配置
    • 版本管理
    • 开发目录
    

    View Slide

13. Macbook
    更大的显示器
    SSD固态硬盘
    更多的内存
    更好的键盘
    

    View Slide

14. 目录
    • 开发工具
    • 系统软件
    • 硬件配置
    • 版本管理
    • 开发目录
    

    View Slide

15. Subversion – 主流得像 jQuery 一样
    Git – 开源、前端首选
    CVS – C/S架构软件版本控制系统
    VSS – 微软出品
    版本控制
    版本比较
    自动/手动备份
    SVN diff, VIM diff
    SVN 自动备份版本，上线前半手动备份(grunt)
    

    View Slide

16. 目录
    • 开发工具
    • 系统软件
    • 硬件配置
    • 版本管理
    • 开发目录
    

    View Slide

17. Build
    app
    src
    vendor
    lib
    img
    doc
    assets
    dist
    test
    目录命名
    我的主干目录结构
    build – 打包完上线用
    app – 项目源码
    - css
    - js
    - img
    test – 测试页面
    

    View Slide

18. END
    One more code …
    DAUX
    

    View Slide