Grunt

Posted 爆炒小黄鸡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Grunt相关的知识,希望对你有一定的参考价值。

一、从无到有构建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的效果 } }] } },

 

 

 

 

以上是关于Grunt的主要内容,如果未能解决你的问题,请参考以下文章

grunt整合版30分钟学会使用grunt打包前端代码

在TypeScript中保存代码后是否可以运行grunt命令?

正确代码之-grunt

Grunt混淆代码报 XML DOMParser 错误

grunt的使用

Grunt教程——初涉Grunt