在本教程中，我们将学习在项目中使用Grunt插件来连接文件。

在上一个教程"创建任务"中，我们学习了如何在Gruntfile.js文件中创建基本任务。

项目结构

因此，我们从入门教程中获得了grunt-project文件夹。
其中，我们有package.json和Gruntfile.js文件。

让我们假设grunt-project文件夹具有以下结构。

在js文件夹中，我们有两个JavaScript文件-" happy.js"和" simley.js"，其中包含以下代码。

//inside happy.js file
console.log("Happy");

//inside smiley.js file
console.log("Smiley");

我们将把两个js文件合并为一个script.js文件。

在本教程中，我们将学习使用grunt-contrib-concat(一个Grunt插件)来连接JavaScript文件。

我们将编写的任务

以下是我们将在本教程中创建的concat任务。

module.exports = function(grunt) {

	//project configurations
	grunt.initConfig({

		concat : {
			dist : {
				src : ["js/*.js"],
				dest : "dist/script.js"
			}
		}

	});

	//load concat plugin
	grunt.loadNpmTasks('grunt-contrib-concat');

	//create default task
	grunt.registerTask("default", ["concat"]);

};

因此，让我们开始吧。

安装grunt-contrib-concat

在终端中打开项目文件夹grunt-project并运行以下命令。

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

-MacBook-Pro:grunt-project $npm install grunt-contrib-concat --save-dev
[email protected] /Users//Documents/-dev/grunt-project
└─┬ [email protected] 
  └── [email protected] 

-MacBook-Pro:grunt-project $

因此，我们在项目中安装了Grunt Contrib Concat 1.0.1版。

在开始使用插件之前，我们必须为Grunt配置任务。
为此，我们在"入门教程"的项目文件夹中创建的Gruntfile.js文件内创建任务。

创建Grunt任务

在您喜欢的文本编辑器或者IDE中打开Gruntfile.js文件，然后执行以下内容。

module.exports = function(grunt) {
}

在上面的代码中，我们创建了一个函数。
每个Grunt文件及其插件都使用这种基本格式。

为Grunt创建项目配置

现在，在我们上面创建的函数中，编写以下代码。

grunt.initConfig({
	
});

在上面的代码中，我们将一个对象传递给Grunt的initConfig方法。
我们对grunt的所有配置都将放在此对象内。

concat

在对象内部，将concat属性设置为以下值。

concat : {
	dist : {
		src : ["js/*.js"],
		dest : "dist/script.js"
	}
}

上面的代码将把js文件夹中的所有JavaScript文件合并起来，并将结果文件放置在dist文件夹中，并保存为script.js文件。

加载grunt-contrib-concat插件

现在，通过编写以下代码来加载concat插件。

grunt.loadNpmTasks('grunt-contrib-concat');

创建默认任务

现在，最后，我们将通过输入以下代码为Grunt创建默认任务。

grunt.registerTask("default", ["concat"]);

运行Grunt

现在，在终端中执行grunt命令以合并文件。

-MacBook-Pro:grunt-project $grunt
Running "concat:dist" (concat) task

Done.
-MacBook-Pro:grunt-project $

运行上述命令后，我们将创建dist文件夹，并在script.js文件内创建并置内容。