一句话,Grunt是前端的Maven。它是JavaScript世界的构建工具。

1. 首先安装node.js,由于Grunt需要依赖于node.js的npm来管理和安装。最终检测安装node.js成功的标志是:在cmd的DOS命令下输入:

node -v   

npm -v   //安装node.js的时候,系统自动将命令npm加入到了系统变量中,所以在控制台可以输入。

2.  在Dos界面,用命令安装Grunt。 Grunt的一个模块就相当于一个工具,Grunt是由多种工具集合而成的工具箱。

npm install -g grunt -cli  //-g 表示全局安装; grunt是服务器端的版本, grunt-cli是客户端版本。

//Node Package Manager, 即npm

虽然上述命令被执行,但安装grunt -cli并不等于安装了Grunt。(在DOS界面下,Ctrl+C退出当前命令环境)

类似的,安装各个模块的命令:"npm install 模块名称 --save -dev"

npm install <module> --save -dev  //安装各个模块的命令

4. 完成上述两个步骤后,就可以实战Grunt项目。

我们知道在Maven中有pom.xml的配置文件来配置项目信息。同样创建Grunt项目必须有两个文件,package.json文件和Gruntfile.js文件。

//package.json:用于保存项目元数据。
//Gruntfile.js : 用于配置或定义任务、加载 Grunt 插件。

package.json的配置详情如下:    

  {
    "name": "qmcaifu",
    "version": "1.0.1",
    "description": "the web page for html5",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Zhao, Xu-Guang",
    "license": "ISC"
  }

 

完成了package.json和Gruntfile.js两个配置文件后,输入命令:

npm install 

然后在安装Grunt的CLI,Grunt CLI的任务是运行Gruntfile指定的Grunt版本。这样就可以在一台电脑上安装多个Grunt版本。

参考博客:

1. http://www.gruntjs.net/getting-started#cli

你知道什么是Grunt么?的更多相关文章

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

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

  2. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

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

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

  4. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  8. nodejs、npm、grunt——名词解释

    最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  10. Grunt学习使用

    原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...

随机推荐

  1. atitit.vod search doc.doc 点播系统搜索功能设计文档

    atitit.vod search doc.doc 点播系统搜索功能设计文档 按键的enter事件1 Left rig事件1 Up down事件2 key_events.key_search = fu ...

  2. salesforce 零基础学习(三十三)通过REST方式访问外部数据以及JAVA通过rest方式访问salesforce

    本篇参考Trail教程: https://developer.salesforce.com/trailhead/force_com_dev_intermediate/apex_integration_ ...

  3. 关于sass的介绍和基本语法

    引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器 ...

  4. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  5. 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  6. SQL 语句中union all和order by同时使用

            最近做的一个财物管理系统中查询过期或逾期的存储过程,返回 “财物所属的案件名称”,“财物名称”,“财物编号”,“过期或逾期时间”(超期或逾期前7天开始预警). 遇到“union all ...

  7. 如何使用office2010插入屏幕截图

    当我们习惯了用QQ的屏幕截图之后,当某一天我们在一台没有装QQ的办公电脑上,它装着office2010,我们可以实现用office来截图吗?其实Office2010深藏着犀利的截图工具. 插入图片到文 ...

  8. JavaWeb:实现文件上传

    JavaWeb:实现文件上传 理解文件上传: 1.上传文件就是把客户端的文件发送给服务器端. 2.HTTP响应的正文部分最常见的是HTML文档,但是也可以是其他任意格式的数据,如图片和声音文件中的数据 ...

  9. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  10. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...