1 grunt是什么

官方网站解释的很清楚,http://gruntjs.com/ http://gruntjs.cn/

它是一种javascript任务运行器,对于需要反复重复的任务,例如压缩、编译、单元测试、代码检查等,自动化工具可以减轻你的劳动,简化你的工作。

grunt的安装请参考官方文档。

2 grunt 插件开发步骤

  1. Install grunt-init with npm install -g grunt-init
  2. Install the gruntplugin template with git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
  3. Run grunt-init gruntplugin in an empty directory.
  4. Run npm install to prepare the development environment.
  5. Author your plugin.
  6. Run npm publish to publish the Grunt plugin to npm!

3 使用webstorm调试

WebStrom是由jetbrains开发的javascript IDE,是付费的,功能非常强大。

1,首先要确定安装了nodejs

2,打开webstrom,并open上述构建好的项目目录

3,工具栏Run—> Edit configrations

4,点击绿色图标,选择Node.js

其中Javascript file: 要选择grunt程序,而不是Gruntfile.js

Application parameters: test,表示启动 grunt test 这个命令。

 

至此就可以对gurnt进行debug运行了。

Grunt 插件开发与调式的更多相关文章

  1. grunt 插件开发注意事项

    grunt的插件机制 task.loadNpmTasks = function(name) { var root = path.resolve('node_modules'); var tasksdi ...

  2. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  3. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  4. gulp和grunt的区别

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...

  5. gulp初体验记录(简介、插件开发介绍)

    目前用的业界比较知名的三个前端构建工具:grunt.gulp.fis,自己此前一直都是只在用grunt,fis看过一点,gulp则一直都没注意过,直到最近发现好像用的人越来越多,所以今天也就抽了点时间 ...

  6. Gulp vs Grunt 前端构建工具对比

    Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...

  7. 前端工程的构建工具对比 Gulp vs Grunt

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...

  8. Node开发项目管理工具 Grunt 对比 Gulp

    转自Gulp vs Grunt 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Mav ...

  9. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

随机推荐

  1. 在CentOS/RHEL 6.5上安装Chromium 谷歌浏览器

    之前Google就说了,由于CentOS/RHEL 6已经是过期的系统,所以不再会有Chrome了. 虽然后来由于引起了社区的抗议,从而改口,不再提CentOS/RHEL 6是过期系统了:但是,目前在 ...

  2. Linux多任务编程——线程

    线程基础 △ 由于进程的地址空间是私有的,因此在进行上下文切换时,系统开销比较大 △ 在同一个进程中创建的线程共享该进程的地址空间 △ 通常线程值得是共享相同地址空间的多个任务 △ 每个线程的私有这些 ...

  3. RMAN常用备份恢复命令汇总

    RMAN命令 1.独立命令  RMAN>shutdown immediate  RMAN>startup  RMAN>backup format 'd:\backup\%d_%s.b ...

  4. DEV GridControl 根据单元格值改变背景色

    GridControl 根据单元格值改变背景色(需要用到CustomDrawCell事件) 方法1: private void gdvClient_CustomDrawCell(object send ...

  5. EF加载实体的方式

    原文:Loading Related Entities EF加载数据的方式: 预加载 eager loading 延迟加载 lazy loading 显示加载 explicit loading 预先加 ...

  6. 基于JQUERY写的 LISTBOX 选择器

    本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...

  7. Eclipse汉化后怎么改回英文版 (中文 改 英文)

    Eclipse汉化后怎么改回英文版(可切换中英文) 很多朋友将MyEclipse汉化后还想改回英文的,其实只要修改MyEclipse的配置文件就可以了,这里我以MyEclipse7.0为例演示一下如何 ...

  8. Asp.net mvc4 + HighCharts + 柱状图

    前端代码: @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...

  9. css实现超连接按钮形式显示

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. 5 HBase 常用Shell命令

    进入hbase shell console $HBASE_HOME/bin/hbase shell 如果有kerberos认证,需要事先使用相应的keytab进行一下认证(使用kinit命令),认证成 ...