项目中部署Grunt

一、Grunt是基于Node.js运行的。正常运行Grunt，必先正确安装node.js和npm.

1. 首先安装 node（官网下载msi安装文件），node安装默认安装npm模块
2. 安装 npm install -g grunt-cli（确保在cmd中使用grunt命令）
3. npm install （指定目录下，执行，生成node_modules）

二、使用Grunt自动化工具，需要两个重要文件：package.json 和 Gruntfile.js

前者用于包管理，如grunt，grunt-less等插件安装，package.json 文件将列出项目所依赖的grunt和grunt插件。
后者用于配置或者定义任务task，以及加载grunt插件

创建的常用两种方式：
1. 使用npm init命令行创建一个package.json文件
2. 直接创建package.json文件,配置格式如下：
{
"name":"project-name",
"version":"1.0",
"devDependencies":{
"grunt":"~0.4.5"，
"grunt-contrib-uglify":"~0.5.0"
}
}

三、项目中使用grunt，准备两个必需的配置文件

首先，生成package.json文件

然后，安装需要的插件，安装后相关插件会显示在package.json文件的dependencies项下

最后，建立Gruntfile.js文件，配置相关任务并加载插件

启动grunt，监听文件变化

1.项目目录下，生成一个默认的package.json文件

npm init
创建时需要输入以下信息：
name，version， description，main，scripts，author，license等信息

2.安装grunt插件

npm install grunt --save-dev
npm install grunt 安装
npm uninstall -g grunt 卸载

然后安装其他插件，安装方式如下：

npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-cssmin --save-dev

其中--save-dev，表示将它作为项目依赖添加到 package.json 文件中devDependencies内，添加项目依赖，安装后的文件如下：
{
"name": "project",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "gq",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-less": "^1.0.1",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1"
}
}

3.新建 Gruntfile.js 文件，实例文件如下：

module.exports = function(grunt) {
// 配置任务参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//编译less文件
less: {
compile: {
files: {
'css/style.css': "less/halou.less"
}
}
},

// 监视文件更改
watch: {
scripts: {
files: ['less/*.less'],
tasks: ['less'],
options: {
debounceDelay: 250,
},
},
},
});

// load plugin
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

// default task
grunt.registerTask('default', ['watch']);
grunt.registerTask('less2css', ['less']);
}

4.启动监听文件变化

打开cmd，cd到项目目录，运行grunt就会开始监听文件变化。