你知道什么是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. ...
随机推荐
- Android开发学习之路-自定义ListView(继承BaseAdapter)
大三学生一个,喜欢编程,喜欢谷歌,喜欢Android,所以选择的方向自然是Android应用开发,开博第一篇,希望以后会有更多的进步. 最近在做一个记账App的时候,需要一个Activity来显示每个 ...
- easyui扩展正则验证,函数验证
用easyui做业务系统,对于默认的几个验证规则,肯定是不够的,难免会增加几种规则.可是问题来了,往往是我们在开发会遇到很多各种各样的验证,时间久了才发现,这些扩展的正则无非就是添加一个正则验证规则, ...
- 比较Java数组,ArrayList,LinkedList,Vector 性能比较
public class PerformanceTester { public static final int TIMES=100000; public static abstract class ...
- 浅谈JAVA集合框架
浅谈JAVA集合框架 Java提供了数种持有对象的方式,包括语言内置的Array,还有就是utilities中提供的容器类(container classes),又称群集类(collection cl ...
- 【WP8.1开发】认识后台任务
在手机上,使用后台,不像电脑上那么随意,准确地讲嘛,在移动平台上,后台任务都有严格的限制.至于说为什么会有这么多限制,我估计初衷很明显——保证系统的性能不受某个或某几个应用的负面影响:另外就是出于安全 ...
- px 与 dp, sp换算公式?
PPI = Pixels per inch,每英寸上的像素数,即 "像素密度" xhdpi: 2.0 hdpi: 1.5 mdpi: 1.0 (baseline) ldpi: 0. ...
- Angularjs 跳转页面并传递参数的方法总结
http://www.zhihu.com/question/33565135 http://www.codeproject.com/Articles/1073780/ASP-NET-MVC-CRUD- ...
- 邻接表无向图(三)之 Java详解
前面分别介绍了邻接表无向图的C和C++实现,本文通过Java实现邻接表无向图. 目录 1. 邻接表无向图的介绍 2. 邻接表无向图的代码说明 3. 邻接表无向图的完整源码 转载请注明出处:http:/ ...
- HTML5移动Web开发(八)——避免文本字体大小重置
适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...