6.grunt的grunt-contrib-concat插件使用

grunt的grunt-contrib-concat插件使用

1.使用方法

相关安装就不提了，大同小异，直接进入使用方法，使用方法开始我以为和像uglify这样的插件一样的，只需要指定一个src数组和一个输出的属性dest，结果华丽丽的给我报错了，后来我才明白了，想偷懒简写可以，但是一定不能想当然，想简写可以这么写在concat对象配置时这样

grunt.initConfig(

{

concat:{

"合并后的文件路径":[需要合并的文件路径](这是个数组)

}

});

实例这么写:

grunt.initConfig({
concat:{"build/testAll.js",["test1.js","test2.js"],"test3.js"}
});

之后运行grunt就可以看到结果，总体来说基本应用就这么多，简单说concat里面也可以包括多个任务，不可能就是所有文件合并为一个文件夹嘛，所有最有效的写法如下：

 

concat: {
           options: {
               separator: ';'
           },
           one: {
               src: [],//需要构建的js路径
               dest: ""//构建后js路径
           },
           two: {
               src: [],//需要构建的js路径
               dest: ''//构建后js路径
           }
       }

这样我们合并任务分为了两个子任务one和two，之后运行程序后顺序执行one和two任务完成合并。

2.拓展

使用方法中只是基本的用法，拓展当然就是高级一点的，首先要了解的就是该插件在options中的属性设置。

1.separator

这个属性开始没理解，所以暴力的直接用了一下，点击开合并后的js文件发现每个单个js文件后多了一个;(这个;是我赋值给separator的)，于是这个属性就很清楚了，没错，在你合并的多个js文件后，每个文件在合并后的文件中会被该属性赋值的一个字符串所分割，暂时不知道有啥用，不过这是比较常见的设置，相信以后在用的过程中会明白它的用处。

2.banner

出现在合并后的文件开头，做说明和注释，这个东西可以用来声明“所有权“，当然就是作者，然后就是这个js的作用，有注释是一个好习惯。

3.stripBanners

这个属性比较重要，其作用是设置为true的时候去掉代码中的注释块！