≡菜单

如何使用Grunt Contrib Watch示例自动化任务(使用Grunt自动CSS缩小示例)

如前所述,在开发过程中,使用grunt可以在后台自动执行任务。

这对Web和移动UI开发过程很有帮助,其中html,css和javascript是技术堆栈的一部分。

本文介绍了此特定示例场景:每当您在开发项目中修改css文件时,您都希望grunt在该css文件上自动执行缩小例程。

以下是在开发过程中自动执行任务的一些高级好处:

  • 避免手动重复执行同一任务,从而节省了时间和精力,从而使您专注于其他重要的开发过程。
  • 使配置的过程保持抽象。
  • 减少已配置任务中出现错误的可能性

We can automate various 任务 通过 using various plug-in with grunt, when the appropriate 档案 are 添加, modified or 已删除.

在本文中,我们’ll take a practical example of automating css minification using 咕-咕tri的手表.

1.安装Grunt Contrib Watch

首先,你应该“node.js”已安装,并配置了npm项目“Gruntfile.js”用于CSS缩小任务。请按照我们的步骤 Grunt安装和配置 文章做到这一点。

接下来,安装“grunt-contrib-watch”包。在命令行中,cd到您的项目文件夹,然后执行以下命令:

npm install 咕-咕tri的手表 --save-dev

上面的命令将安装插件,并在“package.json”用于npm项目依赖项列表。

2. 编辑Gruntfile.js

编辑“Gruntfile.js” to use the plugin. This will also configure the 任务 to be 看ed 通过 it, and automate them 上 certain 事件s.

在里面“Gruntfile.js”, add a task named “watch” under “grunt.initConfig( )”方法如下图所示。使用正确的json格式:

看: {
	scripts: {
		files: './css/*.css',
		tasks: ['default'],
		options: {
			spawn:false,
			event:['all']
		},
	},
},

在上面的片段中完成了以下配置‘json’:

  • 键‘files’ carries the path of 档案 to be 看ed.
  • 键‘tasks’承载要执行的任务。
  • 键‘options’ carries 所有 available configuration parameters.
  • 键‘spawn’定义是否连续播种/重复执行任务。
  • 键‘event’ carries the 事件 上 which the task is to be triggered. By default it is ‘all’. It can be set ‘changed’, ‘added’ and ‘deleted’ as well.

您可以在此处配置更多参数。您可以通过查看它的git hub回购文档来了解它。在这里,我们仅介绍用于演示目的的基本必需配置,并且避免了传递它的复杂性。

3.加载插件

使用加载插件“grunt-contrib-watch()” method.

可以通过在包装函数中添加以下行来完成:

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

在此步骤之后“Gruntfile.js”将如下图所示:

module.exports = function(grunt){
	// Initializing configuration objects
	grunt.initConfig({

		// specifying the settings for css file minification
		cssmin : {
			minify : {
				expand : true,
				cwd : './css/',
				src : [ '*.css', '!*.min.css' ],
				dest : './css/',
				ext : '.min.css'
			}
		},

		//specifying the settings for 看
		watch: {
			scripts: {
				files: './css/*.css',
				tasks: ['default'],
				options: {

					spawn:false,
					event:['all']
				},
			},
		},
	});

	// Loading the 'grunt-contrib-cssmin' package.
	grunt.loadNpmTasks('grunt-contrib-cssmin');

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

	// Registering css minification as a default task
	grunt.registerTask( 'default', [ 'cssmin' ] );
}

4.执行自动化监视任务

执行命令“grunt 看”在项目文件夹的命令提示符下。

# grunt 看
	Running "看" task

要查看实际效果,请对文件进行一些更改,然后在终端/命令提示符下查找登录。您会发现,按照我们的配置,“cssmin”在添加,修改或删除路径中配置的文件时,任务会自动运行。

在以下示例中,当我更改文件css / style.css时,咕gr声会自动识别它并执行minify例程以最小化style.css例程。

	Running "看" task
	Waiting...
	>> File "css\style.css" 变了.

	Running "min:minify" (cssmin) task
	File css/style.min.css created: 57.58 kB ? 49.39 kB

	Running "看" task
	Completed in 0.091s at Fri Jul 18 2014 22:59:50
 	Waiting...

如果您喜欢这篇文章,您可能还会喜欢..

  1. 50个Linux Sysadmin教程
  2. 50个最常用的Linux命令(包括示例)
  3. 排名前25位的最佳Linux性能监视和调试工具
  4. 妈妈,我找到了! – 15个实用的Linux Find命令示例
  5. Linux 101 Hacks第二版电子书 Linux 101黑客手册

Bash 101 Hacks书 Sed和Awk 101黑客手册 Nagios Core 3书 Vim 101黑客手册

{ 1 评论… 加一 }

  • sdk 2014年10月27日,上午1:12

    我需要说的是,我不是Grunt的专家,但是看起来不错!

发表评论