你知道什么是Grunt么?
一句话,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么?的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- Grunt学习使用
原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...
随机推荐
- Js~动态判断PC和手机浏览器
这个只是一个小知识,也是在网上找的,挺好用! 动态判断浏览器是PC还是移动端! <script> var browser={ versions:function(){ var u = na ...
- KendoUI系列:TabStrip
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" ...
- 利用跨域请求来隐藏firbug控制台中的Ajax请求
本文链接:http://www.orlion.ml/63/ 普通jquery的Ajax请求在控制台中是可见的,如下: 而在利用jsonp(json with padding)进行Ajax跨域时,发现A ...
- ASP.NET MVC 4.0中选择Windows 验证默认出错拒绝访问的原因和解决方案
在VS 2012或者2013 中,根据模板创建一个ASP.NET MVC 4.0的应用程序,选择下面的模板 然后选择Intranet Application 不对源代码做任何修改,直接按下F5调试,会 ...
- 【web前端面试题整理02】前端面试题第二弹袭来,接招!
前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...
- HTML5 Dashboard – 那些让你激动的 Web 技术
HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...
- Elasticsearch——Search的基本介绍
Elasticsearch最常用的方法莫过于查询了.Es支持以URI请求参数或者请求体的方式进行查询. 查询范例 Elasticsearch支持对多索引以及多类型进行查询. 比如,下面对某个特定索引的 ...
- CSS3 介绍
什么是CSS3 CSS即层叠样式表(Cascading Stylesheet). 在网页制作时采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码做 ...
- If WCF Service side and Client side config is different?!
from stackoverflow http://stackoverflow.com/questions/4879310/when-setting-up-a-wcf-client-and-serve ...
- 模块化利器: 一篇文章掌握RequireJS常用知识
通过本文,你可以对模块化开发和AMD规范有一个较直观的认识,并详细地学习RequireJS这个模块化开发工具的常见用法.本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结 ...