Grunt

Introduction to grunt.js

Transcript

1. Grunt 基于任务的命令行构建工具
2. 开始 发音：[ɡrʌnt] 网站：http://gruntjs.com/ Github：https://github.com/gruntjs Wiki: https://github.com/gruntjs/grunt/wiki/Getting-started 使用：jQuery, bootstrap, yui, pure …
3. 任务 • JSHint 检测代码质量 • Concat 合并 • Copy 复制 • Minify 压缩 • Qunit 单元测试 • Source map 调试
4. 准备 • Nodejs • NPM
5. 安装 • the CLI • grunt-init • grunt-plugins • templates
6. 安装全局命令 > npm install –g grunt-cli 作用：执行Grunt任务 将grunt命令添加到PATH路径，在任何目录都可运行。
7. 安装 grunt-init > npm install –g grunt-init 作用：通过使用模板使项目创建实现自动化
8. 安装插件 > npm install grunt-contrib-jshint --save-dev > npm install grunt-contrib-qunit --save-dev > npm install grunt-contrib-concat --save-dev > npm install grunt-contrib-uglify --save-dev > npm install grunt-contrib-watch --save-dev
9. 安装模板 模板会依赖当前环境或使用一些提问来建立整个项目的目录结构 可以使用现有的模板或自定义模板 grunt-init-gruntfile, grunt-init-gruntplugin. 使用模板创建Grunt项目 > grunt-init [template] 模板存放在 home 目录的 .grunt-init 文件夹下，可以使用git来安装 > git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
10. 准备一个新项目 在项目根目录下创建两个文件 • Gruntfile Gruntfile.js 或者 Gruntfile.coffee • Package.json
11. Gruntfile > grunt-init gruntfile • 配置或定义任务 • 加载Grunt插件
12. Gruntfile 结构 Gruntfile一般包括以下部分： • 外层包装函数 module.exports = function(grunt) {}; • 项目和任务配置 grunt.initConfig(/* config */) • 加载插件和任务 grunt.loadNpmTasks(/* plugins */) • 自定义任务 grunt.registerTask(/* default tasks */)
13. package.json > npm init • 存放项目信息，作为NPM模块发布 • 被Gruntfile依赖，读取项目有关配置和信息
14. 使用Grunt • 切换至项目根目录 > cd • 安装依赖 > npm install • 运行Grunt > grunt
15. </thanks>