grunt实践（target,option,task）

1新建工程：
mkdir grunt-in-action
cd grunt-in-action

mkdir grunt-by-yo
cd grunt-by-yo

安装webapp生成器：npm install -g generator-webapp

2.建立webapp项目
yo webapp grunt-by-yo:安装webapp

gruntfile.js
//读取外部配置文件：
pkg:grunt.file.readJSON(‘package.json’),

//计算每个 task的执行时间
require(‘time-grunt’)(grunt);

3.建立grunt项目：
mkdir grunt-empty;
在项目中新建文件：
app：
index.html
index.js
Gruntfile.js

//生成package.json
命令：npm init

//安装grunt 并用于生产化境
npm install grunt –save-dev

npm install load-grunt-tasks –save-dev
npm install time-grunt –save-dev

//文件复制
npm install grunt-contrib-copy –save-dev

//文件删除
npm install grunt-contrib-clean -save-dev

==========================================
配置Gruntfile.js

'use strict'

//塔建基本框架
module.exports = function(grunt){

    //引入外部grunt 模块
    require('load-grunt-tasks')(grunt);

    require('time-grunt')(grunt);

    //配置项目路径
    var config ={
        app:'app',
        dist:'dist',            
    }

    //任务配置
    grunt.initConfig({
        config:config,

        //复制任务
        copy:{
            dist:{
                //源文件
                src:'<%=config.app %>/index.html',              
                //目标文件
                dest:'<%=config.dist %>/index.html'
            }
        },

        //清除任务
        clean:{
            dist:{
                src:'<%=config.dist %>/index.html'
            }
        }
    });


}


运行复制，生成dist目录
grunt copy

清除任务执行：
grunt clean

在原来的基础上修改：
'use strict'

//塔建基本框架
module.exports = function(grunt){

    //引入外部grunt 模块
    require('load-grunt-tasks')(grunt);

    require('time-grunt')(grunt);

    //配置项目路径
    var config ={
        app:'app',
        dist:'dist',            
    }

    //任务配置
    grunt.initConfig({
        config:config,

        //复制任务
        copy:{
            dist_html:{
                //源文件
                src:'<%=config.app %>/index.html',              
                //目标文件
                dest:'<%=config.dist %>/index.html'
            },
            dist_js:{
                src:'<%=config.app %>/js/index.js',
                dest:'<%=config.dist %>/js/index.js',
            }

        },

        //清除任务
        clean:{
            dist:{
                src:['<%=config.dist %>/index.html','<%=config.dist %>/js/index.js'],
            }
        }
    });


}

复制的第二种写法：使用数组
'use strict'

//塔建基本框架
module.exports = function(grunt){

    //引入外部grunt 模块
    require('load-grunt-tasks')(grunt);

    require('time-grunt')(grunt);

    //配置项目路径
    var config ={
        app:'app',
        dist:'dist',            
    }

    //任务配置
    grunt.initConfig({
        config:config,

        //复制任务
        copy:{
            dist_html:{
                files:[
                {
                    //源文件
                    src:'<%=config.app %>/index.html',

                    //目标文件
                    dest:'<%=config.dist %>/index.html',
                },
                {
                    src:'<%=config.app %>/js/index.js',
                    dest:'<%=config.dist %>/js/index.js',                   
                }
                ]
            },  

        },

        //清除任务
        clean:{
            dist:{
                src:['<%=config.dist %>/index.html','<%=config.dist %>/js/index.js'],
            }
        }
    });


}

第三种复制写法:

'use strict'

//塔建基本框架
module.exports = function(grunt){

    //引入外部grunt 模块
    require('load-grunt-tasks')(grunt);

    require('time-grunt')(grunt);

    //配置项目路径
    var config ={
        app:'app',
        dist:'dist',            
    }

    //任务配置
    grunt.initConfig({
        config:config,

        //复制任务
        copy:{
            dist_html:{
                files:{
                    //目标：源
                    '<%=config.dist %>/index.html':'<%=config.app %>/index.html',
                    '<%=config.dist %>/js/index.js':'<%=config.app %>/js/index.js',                 
                }
            },  

        },

        //清除任务
        clean:{
            dist:{//清除项目路径下 目录中的所有文件
                src:['<%=config.dist %>/**/*'],

                //额外参数：

                //保留js文件夹
                //filter:'isFile',
                //自定义过滤条件
                filter:function(filepath){
                    return (!grunt.file.isDir(filepath));
                },

                //选中以点开头的文件
                //dot:true,


            }
        }
    });


}

额外的配置项：
'use strict'

//塔建基本框架
module.exports = function(grunt){

    //引入外部grunt 模块
    require('load-grunt-tasks')(grunt);

    require('time-grunt')(grunt);

    //配置项目路径
    var config ={
        app:'app',
        dist:'dist',            
    }

    //任务配置
    grunt.initConfig({
        config:config,

        //复制任务
        copy:{
            dist_html:{
                files:[{
                    expand:true,//动态映射
                    cwd:'<%=config.app %>/',
                    src:'**/*.js',
                    dest:'<%=config.dist %>/',
                    ext:'.js',
                    extDot:'first',//对每一个点开始 +ext配置
                    flatten:false,//当为true时，将中间的目标去掉
                    rename:function(dest,src){
                        return dest +'js/'+src;
                    }
                }]
            },  

        },

        //清除任务
        clean:{
            dist:{//清除项目路径下 目录中的所有文件
                src:['<%=config.dist %>/**/*'],

                //额外参数：

                //保留js文件夹
                //filter:'isFile',
                //自定义过滤条件
                filter:function(filepath){
                    return (!grunt.file.isDir(filepath));
                },

                //选中以点开头的文件
                //dot:true,


            }
        }
    });


}