grunt 基本使用使用（一）。

使用grunt 之前，需要做一些基本工作。

　　1、在E盘 新建空文件夹 grunt。

　　2、在grunt目录下新建package.json 文件，用了存储 npm模块的依赖项。基本依赖块代码如下：

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

　　2、启动命令行：进入E盘，下载相关的js文件包。

　　　  这时候会根据package.json里的代码下载相关的grunt插件包。

　　

　　　　下载完成后，会自动生成名为 “node_modules”的文件夹，里面便是相关的插件包。

　　　　

　　3、新建 Gruntfile.js　　

　　　　该文件主要做两件事：

　　　　① 读取package信息
　　　　② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）

　　4、新建src文件夹，分别添加两个测试JS文件---a.js,b.js（代码自己随意写下）。

（一）文件压缩 插件 grunt-contrib-unglify

Gruntfile.js 如下代码

module.exports=function(grunt){
    grunt.initConfig({
        uglify:{
　　　　　　　options:{
　　　　　　　　  banner:'/*this is 文件头注释信息，只会出现一次*/'
　　　　　　　},
            my_target:{
                files:{
                    'dest/lib.min.js':['src/a.js','src/b.js']
                }
            }
        }
    });
 
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['uglify']);
};

　　　使用 grunt 命令，成功后，便可在 生成压缩好后的 lib.min.js 文件。

　

　　更多的例子 可以在下载的  /node_modules/grunt-contrib-uglifydocs/uglify-examples.md 查看

（二）文件合并  grunt-contrib-concat

module.exports=function(grunt){
    console.log(grunt);
    grunt.initConfig({
        concat:{
            options:{
                separator:'/*分隔符*/',
                banner:'/*測試*/',
                footer:'/*文件尾信息，只会出现一次*/'
            },
 
           /* *//*合并成一个文件*//*
            dist:{
                src:['src/a.js','src/b.js'],
                dest:'dist/built.js'
            },*/
 
            basic_and_extras: {
                files: {
                    'dist/basic.js': ['src/a.js'],
                    'dist/with_extras.js': ['src/b.js', 'src/c.js']
                }
            }
        }
    });
 
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.registerTask('default', ['concat']);
};

　　更多的例子可以在  /node_modules/grunt-contrib-contact/contact-examples.md 查看

（三）检测语法知识 grunt-contrib-jshint

　　该插件用于检测文件中的js语法问题。

　　Gruntfile.js 里如下：

module.exports=function(grunt){
    grunt.initConfig({
        jshint:{
            all:['src/b.js']
        }
    });
 
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('default',['jshint']);
};

　　　　如果你确实分号，会有如下提示

　　

　　如果需要忽视这个，只需要

jshint: {
            /*   options: {
             '-W033': true
             },
             all:['src/b.js']*/
 
            ignore_warning: {
                options: {
                    '-W033': true
                },
                src: ['src/b.js']
            }
}

　　以上两种方式都可以忽略 缺少分号 语法错误。

　　至于类似于 'W033' 这样的警告编码具体含义，可以查看  /node_modules/jshint/src/message.js 。

（四）样式文件 grunt-contrib-cssmin

　　Gruntfle.js代码如下

module.exports=function(grunt){
    console.log(grunt);
    grunt.initConfig({
        cssmin: {
            compress: {
                files: {
                    'dest/car.min.css': [
                        "src/css/a.css",
                        "src/css/b.css"
                    ]
                }
            }
        }
    });
 
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['cssmin']);
};

　　进入文件所在根目录，输入 grunt 或 grunt cssmin --debug ,执行样式文件压缩。