2014-05-13

Grunt 图形管理工具

文章目录

1. 1. 1. grunt-peon-gui
   1. 1.1. 1.1 安装和使用
      1. 1.1.1. 1.1.1 安装
      2. 1.1.2. 1.1.2 配置
      3. 1.1.3. 1.1.3 运行
2. 2. 2. GRUNT DEVTOOLS
   1. 2.1. 2.1 安装Chrome Grunt扩展
   2. 2.2. 2.1 安装和配置

1. grunt-peon-gui

https://www.npmjs.org/package/grunt-peon-gui

grunt-peon-gui是一个grunt插件,基于Web,运行grunt-peon-gui的时候会自动启动一个监听在8080端口的Node.jsWeb服务器,并自动打开浏览器显示当前项

1.1 安装和使用

1.1.1 安装

npm install grunt-peon-gui --save-dev

1.1.2 配置

添加如下代码到Gruntfile.js

grunt.loadNpmTasks('grunt-peon-gui');

1.1.3 运行

grunt gui

2. GRUNT DEVTOOLS

https://github.com/vladikoff/grunt-devtools

GRUNT DEVTOOLS是一个Chrome浏览器扩展

Chrome Developer Tools和Adobe Brackets的Grunt任务运行器扩展

Grunt插件和Chrome浏览器扩展的组合使开发者能够快速的运行Grunt任务.此扩展支持后台任务,比如运行watch任务和服务器任务. 还支持多项目,开发者可以在Chrome developer tools标签运行多个项目的Grunt任务.

2.1 安装Chrome Grunt扩展

• 从Chrome Web Store下载 Grunt Devtools extension for Chrome Developer Tools
• 安装grunt插件
  • npm install -g grunt-devtools
  • 在Gruntfile.js所在的项目目录运行grunt-devtools
• 打开Chrome Dev tools, 找到Grunt标签. 这样你就可以使用Grunt扩展来运行Grunt任务了

2.1 安装和配置

• 在Gruntfile.js所在的项目目录执行npm install grunt-devtools安装grunt-devtools
• 添加 grunt.loadNpmTasks('grunt-devtools')到Gruntfile.js
• 运行grunt devtools
• 打开Chrome Dev tools, 找到Grunt标签. 这样你就可以使用Grunt扩展来运行Grunt任务了

Node.js

grunt