Grunt是一個(gè)基于Node.js的自動(dòng)化構(gòu)建工具，可以用來幫助我們完成一些繁瑣的任務(wù)，例如文件合并、壓縮等。在這篇文章中，我們將介紹如何使用Grunt來合并CSS文件。

首先，我們需要安裝Grunt及其相關(guān)的插件。使用npm安裝Grunt：

npm install -g grunt-cli

接下來，我們需要安裝Grunt合并CSS文件所需的插件，即grunt-contrib-concat。使用npm安裝：

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

安裝完畢后，在項(xiàng)目根目錄下創(chuàng)建Gruntfile.js文件，并配置grunt-contrib-concat插件：

module.exports = function(grunt) {
grunt.initConfig({
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/css/*.css'],
dest: 'dist/css/main.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};

在這個(gè)配置中，我們定義了一個(gè)concat任務(wù)，該任務(wù)將src/css目錄下的所有.css文件合并為一個(gè)文件dist/css/main.css。如果您的項(xiàng)目中有多個(gè).css文件需要合并，只需將數(shù)組中的路徑修改為對(duì)應(yīng)的文件路徑即可。

最后，在命令行輸入grunt concat命令即可執(zhí)行該合并任務(wù)，合并后的文件將會(huì)在dist/css目錄下生成。

總之，使用Grunt合并CSS文件非常簡單，只需安裝Grunt及其相關(guān)插件、創(chuàng)建Gruntfile.js文件并配置concat任務(wù)即可。通過這種方式，我們能夠?qū)崿F(xiàn)文件合并、降低HTTP請(qǐng)求數(shù)量，提高網(wǎng)站性能。