Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Best workflow with grunt

keelii
August 14, 2013

Best workflow with grunt

基于 Grunt 构建最好的工作流

keelii

August 14, 2013
Tweet

More Decks by keelii

Other Decks in Programming

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