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文件