Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

The JavaScript Task Runner

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

END One more code … DAUX