在本教程中，我们将学习在我们的项目中使用Grunt CSSMIN插件来缩小CSS文件。

在上一个教程中，我们学会了如何使用Grunt Plugin Uglify缩小JavaScript文件。
在本教程中，我们将使用"CSSMIN"插件缩小CSS文件。

项目结构

让我们假设我们有以下项目结构。
该项目的名称是"Grunt-Project"。

在CSS文件夹内部我们有style1.css和style2.css文件。
这些是我们要缩小的文件。

内容 style1.css文件。

/**
 * from file 1
 */
p {
	font-size: 16px;
}

内容 style2.css文件。

/**
 * from file 2
 */
.container {
	width: 100%;
}
.success {
	background-color: lightgreen;
}
.error {
	background-color: red;
}

我们将写的任务

我们将在"gruntfile.js文件中"编写以下代码。

module.exports = function(grunt) {
	//project configurations
	grunt.initConfig({
		cssmin : {
			target : {
				src : ["css/style1.css", "css/style2.css"],
				dest : "dist/style.min.css"
			}
		}
	});
	//load cssmin plugin
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	//create default task
	grunt.registerTask("default", ["cssmin"]);
};

所以，让我们开始。

安装Grunt-Contract-CSSmin

在终端中运行以下命令以在项目中安装CSSmin插件。 $npm install grunt-contrib-cssmin --save-dev输出

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

创建Grunt任务

打开gruntfile.js文件并执行以下内容。

module.exports = function(grunt) {
}

在上面的代码中，我们正在创建一个在每个Grunt文件及其插件中使用的函数。

创建Grunt的项目配置

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

grunt.initConfig({
});

所以，我们将一个物体传递给 initConfig咕噜咕噜。
我们对咕噜声的所有配置都将进入这个对象。

CSSMIN.

现在，在对象内部设置 cssmin属性为以下值。

cssmin : {
	target : {
		src : ["css/style1.css", "css/style2.css"],
		dest : "dist/style.min.css"
	}
}

在上面的代码中，我们正在添加target属性。
在此，我们正在说我们的来源src文件是css文件夹内的style1.css和style2.css。
我们希望缩小文件具有名称style.min.css，我们希望它在dist文件夹内。

加载Grunt-Contract-CSSMIN插件

要加载CSSMIN插件，请写下以下代码。 grunt.loadNpmTasks('grunt-contrib-cssmin');

创建默认任务

现在，最后我们将通过执行以下代码来为Grunt创建一个默认任务。 grunt.registerTask("default", ["cssmin"]);

运行任务

最后运行任务类型 grunt命令在终端中，它将使用CSSMIN缩小CSS文件。

-MacBook-Pro:grunt-project $grunt
Running "cssmin:target" (cssmin) task
>> 1 file created. 178 B → 101 B
Done.
-MacBook-Pro:grunt-project $

运行上面的命令后，我们将拥有 style.min.css在dist文件夹内的文件。