在本教程中，我们将学会在Grunt watch下运行预定义的任务。

在以前的教程中，我们学会了创建自定义任务，并使用插件缩小JavaScript和CSS文件。
在本教程中，我们将使用Grunt Watch插件来运行预定义任务。

watch的想法是在添加watch文件模式，删除或者更改时运行任务。

项目结构

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

所以，在CSS文件夹内部我们有style1.css和style2.css文件。

让我们说我们希望在"CSS"文件夹中的文件内缩小文件，并在"dist文件夹"中创建"style.min.css文件"。
我们想在添加新的样式表文件或者编辑或者删除现有的样式表文件时执行此操作。

我们将写的任务

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

module.exports = function(grunt) {
	//project configurations
	grunt.initConfig({
		//this is for minifying css files
		cssmin : {
			target : {
				src : ["css/*.css"],
				dest : "dist/style.min.css"
			}
		},
		//this is the watch
		watch : {
			scripts : {
				files : ["css/*.css"],
				tasks : ["cssmin"]
			}
		}
	});
	//load plugin
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-watch');
	//create default task
	grunt.registerTask("default", ["watch"]);
};

所以，让我们开始。

安装Grunt-Contrip-Watch

在终端中运行以下命令以在项目中安装Watch Plugin。 $npm install grunt-contrib-watch --save-dev

创建Grunt任务

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

module.exports = function(grunt) {
}

它是每个GRUNT文件及其插件中使用的函数。

创建Grunt的项目配置

现在，在函数内写下以下代码。

grunt.initConfig({
});

我们将一个物体传递给了Grunt initConfig。
此对象将保留所有配置。

缩小CS

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

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

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

watch

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

watch : {
	scripts : {
		files : ["css/*.css"],
		tasks : ["cssmin"]
	}
}

在上面的代码中，我们正在添加"脚本"属性。
我们正在看所有 .css在css文件夹中的文件。
每当添加或者更改或者更改或者更改或者更改或者删除我们想要的 cssmin任务要执行。

加载Grunt-Contract-CSSMIN插件

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

加载Grunt-Contrip-Watch插件

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

创建默认任务

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

运行任务

最后运行任务类型 grunt命令在终端中，它将开始观看CSS文件夹。

输出

-MacBook-Pro:grunt-project $grunt
Running "watch" task
Waiting...
>> File "css/style1.css" changed.
Running "cssmin:target" (cssmin) task
>> 1 file created. 207 B → 122 B
Done.
Completed in 0.808s at Sun Mar 05 2016 18:05:55 GMT+0530 (IST) - Waiting...
>> File "css/style3.css" added.
Running "cssmin:target" (cssmin) task
>> 1 file created. 207 B → 122 B
Done.
Completed in 0.897s at Sun Mar 05 2016 18:08:08 GMT+0530 (IST) - Waiting...
>> File "css/style3.css" changed.
Running "cssmin:target" (cssmin) task
>> 1 file created. 228 B → 122 B
Done.
Completed in 0.700s at Sun Mar 05 2016 18:08:32 GMT+0530 (IST) - Waiting...
^C

停止watch，在终端执行 Ctrl+C。

watch结束后，我们将获得一些缩小的CSS内容。