项目中部署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-devnpm install grunt 安装npm uninstall -g grunt 卸载然后安装其他插件，安装方式如下：npm install grunt-contrib-uglify --save-devnpm install grunt-contrib-less --save-devnpm 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就会开始监听文件变化。