windows下安装grunt需要先安装ruby和nodejs
ruby -v 测试ruby是否安装成功
node -v 测试nodejs是否安装成功
npm -v 测试npm是否安装成功(npm是node.js的包管理器,安装node.js会自动安装npm。grunt和grunt插件就通过npm安装并管理。)

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 npm,使用下面一行即可在全局范围安装 Grunt-cli (-g 命令会安装到全局),换句话说,就是你可以在任何地方执行 grunt 命令:
npm install -g grunt-cli

(1)创建grunt项目:

假设项目在d盘目录,那么进入D盘
cd D:\

创建项目文件夹:
mkdir 项目文件夹(如:site)

进入文件夹:
cd site

在该文件夹目录下添加两个文件:package.json 和 Gruntfile.
package.json:被npm用于存储项目的元数据,以便将此项目发布为npm模块。
Gruntfile:此文件可被命名为Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务并加载grunt插件。
package.json文件:
{
"name": "my-project",
"version": "0.1.0"
"devDependencies": {
"grunt": "~0.4.1"
}
}

(2)安装最新版的grunt:
npm install grunt --save-dev
通过 npm 安装了 grunt 到当前项目,同时加上了 —save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中

(3)安装grunt插件:
npm install grunt-contrib-cssmin(插件名称) --save-dev

注:如果要安装指定版本的grunt或grunt插件,只需运行npm inatall grunt@Version --save-dev (Version是指需要的版本,指定的版本号即可)

(4)配置Gruntfile.js
(4.1)在grunt.initConfig中添加配置,如:添加concat插件的配置,如下
grunt.initConfig({
concat:{
dist: {
src: ['src/foo.js','src/bar.js'],
dest: 'dist/output.js'
}
}
});

(4.2)加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-concat');

(4.3)注册插件任务
grunt.registerTask('default',['concat','watch']);
default 是别名,是默认的task,当在项目目录执行grunt的时候,它会执行注册到default上的任务。

grunt.registerTask('compress',['uglify:build']);
如果要执行这个task,就不能只输入grunt命令了,需要输入 grunt compress 命令来执行这条task,而这条task的任务是uglify下面的build任务,也就是说,我们只会执行uglify里面的build定义的任务,而不会执行uglify里面定义的其他任务。
这里需要注意的是,task 的命名不能与后面的任务配置同名,也就是说这里的 compress 不能命名成 uglify,这样会报错或者产生意外情况。

(5)执行任务:
执行配置中所有的任务:grunt
执行某个特定的任务:grunt cssmin(任务)

grunt配置任务可查看http://www.gruntjs.net/configuring-tasks

grunt的安装及使用的更多相关文章

  1. yeoman bower grunt等安装

    grunt-beginner前端自动化工具:http://www.imooc.com/learn/30 grunt的安装 官方站点:http://gruntjs.com/ 安装指令: sudo npm ...

  2. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  3. Grunt教程——安装Grunt

    Grunt教程--安装Grunt 作者:大漠 日期:2013-11-04 点击:3124 tools grunt 在上一节<Grunt教程--初涉Grunt>一文中介绍了Grunt是什么, ...

  4. 问题总结——window平台下grunt\bower安装后无法运行的问题

    一.问题: 安装grunt或者bower后,在cmd控制台运行grunt -version 或者 bower -v会出现:“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”,

  5. 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装

    最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...

  6. grunt 的安装和简单使用

    安装Grunt命令行 npm install -g grunt-cli 创建package.json,如果有package.json包,可以直接npm install加载依赖组件 npm init 安 ...

  7. grunt安装和使用教程

    grunt的安装 npm intall -g grunt-cli 新建文件夹grunt,在本地文件中添加package.json和Gruntfile.js文件,其中package.json文件的配置如 ...

  8. Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]

    demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...

  9. grunt安装与运行

    用grunt前,需要先安装nodejs.因为grunt依赖于nodejs.nodejs的安装可以参照我的博客里头的nodejs的下载,安装与测试.   第一步:安装grunt-CLI 注意你的电脑要联 ...

随机推荐

  1. 更改默认浏览器(Windows7)

    更改默认浏览器 第一个方法(最好用): 第一步,先点击左下角WIN 然后点默认程序(画框框的图上) 第二步骤,来到控制面板主页,点击设置程序 第三步骤,左键单击选择要设置为默认浏览器的程序(我用360 ...

  2. WDS部署基础知识:使用WDS捕获与应用映像(使用WDS定制系统和应用)

    WDS部署基础知识:使用WDS捕获与应用映像(使用WDS定制系统和应用) Win7部署基础知识(8):使用WDS捕获与应用映像  一.添加映像组 使用WDS捕获映像时,会将映像加载到WDS服务器的映像 ...

  3. nginx加php(三) 启动脚本

    不用nginx默认的方式启动nginx start_web.sh #!/bin/bash USE_FPM=1USE_HHVM=0ulimit -HSn 60000 if [ "$USE_FP ...

  4. Swagger中paramType

    paramType:表示参数放在哪个地方    header-->请求参数的获取:@RequestHeader(代码中接收注解)    query-->请求参数的获取:@RequestPa ...

  5. PTA(Basic Level)1087.有多少不同的值

    当自然数 n 依次取 1.2.3.--.N 时,算式 ⌊n/2⌋+⌊n/3⌋+⌊n/5⌋ 有多少个不同的值?(注:⌊x⌋ 为取整函数,表示不超过 x 的最大自然数,即 x 的整数部分.) 输入格式: ...

  6. 像写SQL语句一样写Java代码

    @Data @AllArgsConstructor public class Trader { private final String name; private final String city ...

  7. typescript中类型断言好理解也好用

    类型断言是个好用的玩意,虽然typescript很强大,但是有时还不如我们知道一个值的类型,导致在开发过程中总是报一些令人头痛的类型错误.使用断言,简单来说就是先做好一个假设,使得编译通过. 我一开始 ...

  8. 你写的 Java 代码是如何一步步输出结果的? (转)

    出处:  一步步解析java执行内幕 对于任何一门语言,要想达到精通的水平,研究它的执行原理(或者叫底层机制)不失为一种良好的方式.在本篇文章中,将重点研究java源代码的执行原理,即从程 序员编写J ...

  9. 了解MyISAM与InnoDB的索引差异(转)

    出处原文: 1分钟了解MyISAM与InnoDB的索引差异 数据库的索引分为主键索引(Primary Inkex)与普通索引(Secondary Index).InnoDB和MyISAM是怎么利用B+ ...

  10. React 中的函数式思想

    函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...