contrib-concat

最新推荐文章于 2024-08-25 08:25:35 发布

EX32

最新推荐文章于 2024-08-25 08:25:35 发布

阅读量551

点赞数

分类专栏： grunt 文章标签： grunt concat

本文链接：https://blog.csdn.net/stxwd46/article/details/26834777

版权

grunt 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

contrib-concat为grunt的一个插件，用来合并文件。

新建一个文件夹，根据我之前写的《初探grunt》配置好package.json和Gruntfile.js后，打开DOS cd到你的文件夹目录，输入

npm install grunt-contrib-concat --save-dev

安装contrib-concat插件并自动更新package.json

最简单的concat

现在，来做一个最简单的concat。代码如下：

module.exports = function(grunt) {
    grunt.initConfig({
        concat: {
	    dist: {
		src: ['js/test01.js', 'js/test02.js', 'js/test03.js'],
		dest: 'dest/test.js'
	    }
        }	
    });
	
    grunt.loadNpmTasks('grunt-contrib-concat');
	
    grunt.registerTask('default', ['concat']);
}

src里放的就是你想要进行合并的文件

dest则是你想输出的合并后的文件的位置。我这里设置为dest/test.js，所以它合并后会在dest文件夹里生成一个test.js(如果没有dest文件夹它会自行创建)
dist可以为任意值，你将dist改为file、basic等等都行，主要简单易懂，让别人一看名字就知道这个是干什么的就行。

这样，一个最简单的concat就完成了。在DOS下输入grunt后就会在dest文件夹下生成一个test.js，里面就是src里所有文件合并后的代码。

另外，如果我们现在js目录下只有test01.js和test02.js，然后我们依然执行上面的代码，DOS下并不会给出警告。这时候我们需要在dist里加上nonull属性，代码如下：

dist: {
    src: ['js/test01.js', 'js/test02.js', 'js/test03.js'],
    dest: 'dest/test.js',
    nonull: true
}

这样，当你执行上面concat代码时，DOS就会给出警告，test03.js not found。有时我们想要合并的文件太多，在src里写好要合并的文件，实际上却少放了几个文件到相应的文件夹，nonull属性就可以起到很大的作用。

生成多个文件

如果现在我们想要把A和B合并生成文件1，把C和D合并生成文件2，要如何设置concat属性呢？代码如下(其他一样，只有config属性里代码不同，所以只粘贴concat属性部分的代码)：

concat: {
    fileOne: {
    <span style="white-space:pre">	</span>src: ['js/test01.js', 'js/test02.js'],
    <span style="white-space:pre">	</span>dest: 'dest/fileOne.js'
    },
    fileTwo:{
	src: ['js/test02.js', 'js/test03.js'],
        dest: 'dest/fileTwo.js'
    }
}

你也可以用一种更简洁的写法，要用到files属性，代码如下(这里的files就不能随意改成其他值了)：

concat: {
    dist: {
	files: {
	    'dest/fileOne.js': ['js/test01.js', 'js/test02.js'],
	    'dest/fileTwo.js': ['js/test02.js', 'js/test03.js']
	}
    }
}

两种方式最后的结果都是一样的。在dest目录下生成fileOne.js和fileTwo.js。

options属性

concat下的options属性可以让你更人性化的生成合并后的文件。查看了官方的API，options下有这几个属性：separator、banner、footer、stripBanners、process。先贴上代码:

concat: {
    options: {
<span style="white-space:pre">	</span>separator: ';',
	banner: '/*This is a test*/',
	footer: '/*the End*/',
	stripBanners: true,
	process: function(src, filepath){
	    return '//This is ' + filepath + '\n' +  src + '\n';
<span style="white-space:pre">	</span>}
    },			
    file: {
	src: ['js/test01.js', 'js/test02.js', 'js/test03.js'],
	dest: 'dest/test.js'
    }
}

separator 一个String类型，参与合并的文件会加入到这个String当中。我们可以设置一个符号来将参与合并的文件分割开来，比如上面代码，就用“;”分割每个文件。这在你合并压缩后的js文件时可能会用到

banner 用于在合并后的文件开头显示注释信息，上面代码在合并后的文件开头显示/*This is a test*/

footer 跟banner相似，但它是在合并后的文件末尾显示注释信息，上面代码在合并后的文件最后显示/*the End*/

stripBanners 设置是否要忽略注释信息。设为true则将忽略/**/类型的注释信息。注意，只能忽略块注释而不能忽略行注释，那要怎样才能忽略行注释呢,代码如下：

stripBanners: {
    line: true
}

另外，我发现stripBanners只会忽略文件一开始的注释信息，而代码中间的注释信息则仍然存在，比如：

/* NUM_ONE */
var NUM_ONE = 1;
/* NUM_TWO */
var NUM_TWO = 2;

则/* NUM_ONE */合并后会被忽略，/* NUM_TWO */合并后仍然存在。官方API上写着设为true块注释都会被忽略，可我测试后并非如此，关于这一点我还没想通。

process 自定义进程函数。比如我们想在每个参与合并的文件开头显示相应的文件信息，就可以像上面代码一样设置，function(src, filepath){}是process给我们定义好的函数，每有一个参与合并的文件进来，它就会调用一次。filepath是参与合并的文件的位置， src就是文件里面的代码。