Grunt

Posted 2020-08-19 爆炒小黄鸡

一、从无到有构建Grunt项目

1. 新建项目目录

2. 在项目目录下新建index.html, js文件夹，js文件夹下新建index.js

3. 运行命令npm init，填写项目的基本信息，生成package.json文件，生成package.json文件（如果老项目本身就是包含package.json的node项目则可以忽略这一步）

4. 如果想在项目中引入grunt作为devdependencies或者dependencies可以运行下面的命令

npm install grunt --save-dev

npm install grunt --save

 

5. 安装一个插件，使得自动加载package.json文件中所有以grunt-开头的文件

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

 

6. 安装插件time-grunt，可以自动计时

npm install time-grunt --save-dev

 

7. 新建Gruntfile.js文件，编写基本模块

‘use strict‘;

module.exports=function(grunt){
    require(‘load-grunt-tasks‘)(grunt); // 加载声明的几个模块
    require(‘time-grunt‘)(grunt);
    var config={ // 配置项目路径
        app:‘app‘,
        dist:‘dist‘
    };
    grunt.initConfig({  // 开始任务配置
        config:config,
    })
}

 

8. 安装这几个基本的task，grunt的文件拷贝和文件删除都依赖几个官方提供的文件

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-clean --save-dev

 

9. 新建app文件夹，将index.html以及js文件夹这些源文件拷贝到app目录下

10. 回到gruntfile.js配置copy命令，有三种方式，都支持src(源文件),dest(目标文件)

• 一般用在只读任务，每个target下放置src,dest的文件映射，src既可以是数组也可以是单独的字符串

grunt.initConfig({
    config:config,
    copy:{ // 将app中的index.html文件拷贝到dist中的index.html
        dist:{
            src:‘<%= config.app %>/index.html‘,
            dest:‘<%=config.dist %>/index.html‘
        },            
    }
});

 

运行这个任务只需要grunt copy命令即可。

下面配置clean删除文件操作：

clean:{
    dist:{
        src:‘<%=config.dist%>/index.html‘ // 删除dist中的index.html文件
    }
}

 

同样，使用grunt clean运行该任务

 

如果有多个target时，可以这样写：

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‘] // 使用数组形式
        }
    }
});

 

这里运行copy命令时，可以选择性的只运行dist_js，如下：grunt copy:dist_js

• 使用files数组，以数组的形式组织多个源文件到目标文件的映射

grunt.initConfig({
    config:config,
    copy:{ 
        dist:{
            files:[{  // 使用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‘]
            }
        }
    });

 

• 使用files对象，以键值对的形式实现映射

grunt.initConfig({
    config:config,
    copy:{ 
        dist:{
            files:{ // 键是dist即dest，值是app即src,值可以是数组
                    ‘<%=config.dist %>/index.html‘:‘<%= config.app %>/index.html‘,
                    ‘<%=config.dist%>/js/index.js‘:‘<%=config.app%>/js/index.js‘
                }
        }
        },
    clean:{
        dist:{
            src:[‘<%=config.dist%>/index.html‘,‘<%=config.dist%>/js/index.js‘]
        }
    }
});

 

11. 配置clean命令

grunt.initConfig({
    config:config,
    copy:{ 
        dist:{
            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文件夹一起删除，前面的几种方法都是删除了js文件夹下的js文件，并没有删除文件夹。然后需要注意的是**/*，一个*表示匹配任意字符，但是不匹配/，两个*表示匹配任意字符包括/。

11. 额外参数的配置（仅支持10中的第一种和第二种配置方式）

• filter的值既可以是nodejs下的stats类下的函数名，也可以是自定义函数

如下实现不删除js文件夹，仅删除文件的功能

clean:{
    dist:{
        src:[‘<%=config.dist%>/**/*‘],
        filter:‘isFile‘
    }
}

clean:{
    dist:{
        src:[‘<%=config.dist%>/**/*‘],
        filter:function(filepath){
　　　　　　// filter函数返回true则表示该路径符合要求，否则不符合要求，放在这里就是删除为true的文件路径
            return (!grunt.file.isDir(filepath));
        }
    }
}

 

• dot为true时，命中以.开头的文件，比如如果我这里文件为**/index.html除了命中index.html文件同时命中.index.html文件
• matchBase 举例说明, a?b这种形式默认会命中 /xyz/123/acb,  /xyz/acb/123 如果matchBase为true，则只命中第一种形式/xyz/123/acb,不会命中第二种形式，只匹配路径的basename
• expand设为true则意味着要处理动态的src到dest的文件映射
• cwd相对于src的寻路路径
• ext是否修改目标文件的后缀名，字符串，指定后缀名
• extDot 指定从哪个地方开始修改目标文件的后缀名
• flatten为true时去掉中间各层目录
• rename在后缀名重命名以及flatten执行后会被调用，是一个函数声明形式，形参第一个是dest，第二个是src

举例：

copy:{ 
    dist_html:{
        files:[{
            expand:true,
            cwd:‘<%=config.app%>/‘, // cwd dest中不要忘记后面的反斜杠/
            src:‘*.html‘,
            dest:‘<%=config.dist%>/‘,
            ext:‘.min.html‘  // 指定后缀名，存在dest中的index.html名字改为index.min.html
　　　　　　　//extDot:‘first‘ // index.max.html变为index.min.html把第一个点后的内容全部删掉换成指定后缀
　　　　　　　extDot:‘last‘ // index.max.html变为index.max.min.html把最后一个点后的内容全部删掉换成指定后缀
　　　　　　　flatten:true
　　　　　　　　// 如果将src改为**/*.js则直接将index.js复制到了dist目录下，没有js文件夹，如果将flatten设为false，则复制到dist的js文件夹下
            rename:function(dest,src){
　　          　　return dest+"js/"+src;  
　　　　　　　　　　// 通过rename函数将js文件夹又加回来了，效果相当于flatten设置为false的效果
             }
        }] 
    } 
},