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

前者用于Nodejs 包管理，如 Grunt 插件安装后者是Grunt用来配置或者定义任务，以及加载grunt插件package.json 文件将列出项目所依赖的grunt和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内，添加项目依赖。 3. 新建 Gruntfile.js 文件    配置任务，将后面的less文件编译成前面的css文件监听变化    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即可，当更改了less文件后，会自动检测变化，并编译成css文件