Grunt的安装与使用 （以Windows 64位为例）

一、Grunt
Grunt基于Node.js，用JS开发，可以借助Node.js实现跨平台。Grunt及插件可用npm进行管理，npm生成的package.json项目文件，里面可以记录当前项目中用到的Grunt插件，而Grunt会调用Gruntfile.js这个文件，解析里面的任务(task)并执行相应操作。
二、安装Grunt
首先在你的电脑上安装Node.js（https://nodejs.org/en/download/），Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用，奇数版本号的 Node.js 被认为是不稳定的开发版。
Node.js的安装像其他软件一样按照提示安装

安装好Node.js之后，可以在你的控制台中输入“node -v”来查看Node.js的版本，可验证Node.js是否安装成功。
高版本的Node.js不需要另安装npm，可以在你的控制台中输入”npm -v”查看版本号，验证npm是否安装成功。

然后开始安装Grunt，先全局安装grunt-cli后进入项目安装grunt
1.先安装命令行的Grunt，npm install grunt-cli -g
注：-g表示全局安装，可以在任何地方执行grunt命令
Windows下安装最好用管理员权限，用OS X/Linux的话，需要加上sudo命令
要在有网络的情况下进行安装，否则会出现以下错误

输入grunt验证grunt-cli是否安装成功

三、Grunt的使用
1.把less文件编译成css
1.1创建一个项目，再建两个文件（已有Grunt项目忽略这一步骤）

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内，也可以在npm插件时自动添加。

图1.1-1-package.json文件格式
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。
Gruntfile由以下几部分构成：
”wrapper” 函数
项目与任务配置
加载grunt插件和任务
自定义任务

图1.1-2-Gruntfile.js文件内容

1.2安装grunt
进入到你的项目目录，执行npm install grunt –save-dev
注：–save-dev表示 在安装grunt同时把grunt保存为这个目录的开发依赖项，即package.json中的”devDependencies”

1.3安装要用到的插件
Less编译成css需要grunt-contrib-less插件
执行命令npm install grunt-contrib-less –save-dev

第一步中的Gruntfile配置好之后，可以执行grunt less Gruntfile中less命令下的所有less文件都会被编译成css文件

也可以选择只编译其中一个文件夹下的less文件

到指定的文件下找css文件，找到则编译成功
1.4其他grunt常用插件
grunt-contrib-concat 合并文件
grunt-contrib-watch 监听
grunt-contrib-clean 清理文件和文件夹
grunt-contrib-uglify 使用UglifyJS压缩js文件
grunt-contrib-copy 复制文件和文件夹。
grunt-contrib-cssmin CSS文件压缩。
grunt-contrib-imagemin 图片压缩

最后

以上就是害羞服饰为你收集整理的Grunt的安装与使用 （以Windows 64位为例）的全部内容，希望文章能够帮你解决Grunt的安装与使用 （以Windows 64位为例）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。