怎么在windows下安装grunt

方法/步骤

1、按Win+R，出现以下d框。

在d框内输入cmd，调出DOS窗口。

2、调出DOS窗口的方法很多，这里就不详细说明了。

在DOS窗口输入：npm install grunt-cli -g。

3、这里是安装的Grunt 的截图。Grunt 的一个模块就相当于一个工具，Grunt 就是由多种工具集合而成的工具箱。Grunt 的模块需要局部安装在项目下，也会根据项目需要，安装同一个模块的不同版本。

4、安装模块：npm install (grunt或grunt 模块的名称) --save-dev。

第一步：搭建环境，主要是nodejs, npm, grunt(grunt-cli)

$ mkdir installGrunt

$ cd installGrunt

$ npm install grunt --save-dev #如果看到如下信息表示grunt安装成功

$ grunt --version

grunt-cli v0.1.13

grunt v0.4.5

第二步：创建 package.json

# 在项目的根目录下创建package.json文件

（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）

（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）

（3）从官网上复制或者下载一个package.json文件；（对新手最方便）

（4）手工创建一个package.json文件；（对高手最方便）

添加依赖

（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev

XXX是常用插件名，如grunt-contrib-jshint

最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。

（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install

安装声明的依赖关系grunt插件同时， 在项目根目录下添加一个node_modules目录，目录中放置对应grunt插件所需的插件目录名。

注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）

第三步：创建Gruntfile.js

# 添加自己合适的gruntfile配置，运行，得出预期输出

moduwww.hbbz08.com le.exports=function(grunt){

//任务配置

grunt.initConfig({

})

//载入任务

grunt.loadNpmTasks()

//注册任务

grunt.registerTask()

}

内容参见demo1

$ grunt #

运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。

实践2：加上css压缩的过程

1，在package.json使用命令加一个插件

npm install grunt-contrib-cssmin --save-dev #一开始使用npm install cssmin不对，下了两个

2，在Gruntfile.js中三个部分都加入cssmin相关的命令

3，运行grunt

注：如果已经在initConfig里配置了uglify和cssmin，则不能再注册任务名为uglify和cssmin，报错如下

(node) warning: Recursive process.nextTick detected. This will break in the next version of node.

Please use setImmediate for recursive deferral（递归延迟）.

解决办法：注释掉

//grunt.registerTask("uglify",['uglify'])

//grunt.registerTask("cssmin",['cssmin'])

grunt.registerTask("default",['uglify','cssmin'])//默认执行的任务

---