Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grunt

1,160 views

Published on

Introduction to grunt.js

Published in: Technology
  • Be the first to comment

Grunt

  1. 1. Grunt 基于任务的命令行构建工具
  2. 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. 3. 任务 • JSHint 检测代码质量 • Concat 合并 • Copy 复制 • Minify 压缩 • Qunit 单元测试 • Source map 调试
  4. 4. 准备 • Nodejs • NPM
  5. 5. 安装 • the CLI • grunt-init • grunt-plugins • templates
  6. 6. 安装全局命令 > npm install –g grunt-cli 作用:执行Grunt任务 将grunt命令添加到Path路径,在任何目录都可运行。
  7. 7. 安装 grunt-init > npm install –g grunt-init 作用:通过使用模板使项目创建实现自动化
  8. 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. 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. 10. 准备一个新项目 在项目根目录下创建两个文件 • Gruntfile Gruntfile.js 或者 Gruntfile.coffee • Package.json
  11. 11. Gruntfile > grunt-init gruntfile • 配置或定义任务 • 加载Grunt插件
  12. 12. Gruntfile 结构 Gruntfile一般包括以下部分: • 外层包装函数 module.exports = function(grunt) {}; • 项目和任务配置 grunt.initConfig(/* config */) • 加载插件和任务 grunt.loadNpmTasks(/* plugins */) • 自定义任务 grunt.registerTask(/* default tasks */)
  13. 13. package.json > npm init • 存放项目信息,作为NPM模块发布 • 被Gruntfile依赖,读取项目有关配置和信息
  14. 14. 使用Grunt • 切换至项目根目录 > cd • 安装依赖 > npm install • 运行Grunt > grunt
  15. 15. </thanks>

×