Grunt

       Grunt

 

       1 安装Grunt命令行工具包 grunt-cli

npm install -g grunt-cli

       Grunt被分为好几个包,每个包用于特定的目的。grunt-cli包为我们提供了一个命令行界面。但我们还需要安装grunt才能使用该界面。安装grunt-cli时并没有为我们自动安装grunt。

       需要在我们的项目中安装Grunt作为依赖。在一个项目中安装Grunt,可以通过以下步骤实现:

 

       (1)创建一个项目文件夹

       (2)在命令行中浏览到该文件夹,通过以下命令为项目创建一个package.json文件

npm init

       (3) 通过以下命令安装Grunt

npm install grunt --save-dev

       Grunt的运行需要一个名为Gruntfile.js的配置文件支持,在该文件中声明并配置了你想在当前项目中执行的所有任务。

 

       Gruntfile.js文件框架示例:

module.exports = function(grunt) {

}

       它其实定义了一个Node.js的模块,在模块中接收一个grunt对象 。

       在grunt上注册一个默认任务:

module.exports = function(grunt){
	grunt.registerTask('default', function(){
		console.log('Hello from Grunt.');
	});
}

      通过grunt.registerTask()方法可以创建一个新的Grunt任务,创建时可以传入一个任务名称以及一个回调函数。当触发该任务时就会执行相应的回调函数。

 

       处理参数

module.exports = function(grunt){
	grunt.registerTask('greet', function(name){
		grunt.log.writeln('Hi there, ' + name);
	});
}

       执行非default命名任务

grunt greet

       在执行任务时提供实际参数

grunt greet:winstar

       传多个参数

grunt addNumbers:1:2

       处理异常

grunt.warn('warning info.');

       强制执行任务

grunt addNumbers:a:2 --force

       阻止强制执行

grunt.fatal()

       一次注册多个任务

grunt.registerTask('all', ['default', 'greet:Brain', 'addNumbers:2:3']);

       registerTask()方法还可以接收第三个参数,在任务名称之后回调函数之前,可以添加对该任务的描述。

 

       配置选项,Grunt提供了grunt.config.inig()方法用于配置Grunt任务。示例如下:

grunt.config.init({
});

       创建目录

       Grunt内置的grunt.file.mkdir()方法可用以创建文档目录。 创建文档目录示例如下:

module.exports = function(grunt) {
	grunt.config.init({
		copyFiles: {
			options: {
				workingDirectory: 'working'
			}
		}
	});
	
	grunt.registerTask('createFolder', 'Create the working folder', function(){
		grunt.config.requires('copyFiles.options.workingDirectory');
		grunt.file.mkdir(grunt.config.get('copyFiles.options.workingDirectory'));
	});
}

grunt createFolder

       删除目录

       使用grunt.file.delete()方法 

module.exports = function(grunt) {
	grunt.config.init({
		copyFiles: {
			options: {
				workingDirectory: 'working'
			}
		}
	});
	
	grunt.registerTask('clean', 'Deletes the working folder and its contents', function(){
		grunt.config.requires('copyFiles.options.workingDirectory');
		grunt.file.delete(grunt.config.get('copyFiles.options.workingDirectory'));
	});
}

       复制文件

       使用grunt.file.copy()方法

module.exports = function(grunt) {
	grunt.config.init({
		copyFiles: {
			options: {
				workingDirectory: 'working',
				manifest: [
					'index.html', 'stylesheets/style.css', 'javascripts/app.js'
				]
			}
		}
	});
	
	grunt.registerTask('copyFiles', function(){
		var files, workingDirectory;
		
		grunt.config.requires('copyFiles.options.manifest');
		grunt.config.requires('copyFiles.options.workingDirectory');
		
		files = grunt.config.get('copyFiles.options.manifest');
		workingDirectory = grunt.config.get('copyFiles.options.workingDirectory');
		
		files.forEach(function(file){
			var destination = workingDirectory + '/' + file;
			grunt.log.writeln('Copying ' + file + ' to ' + destination);
			grunt.file.copy(file, destination);
		});
	});
}

       Grunt提供的其他方法

       grunt.file.isDir()    判断是否为目录

       grunt.file.recurse()    文件/目录递归

       grunt.file.read()             读取指定文件内容

       grunt.file.write()            将指定内容写到文件中

       grunt.file.readJSON()    读取JSON数据

       grunt.template.process()   创建一个模板字符串片段,该片段可以用于写进一个文档中

 

       在注册任务时还可以通过this.options()方法获取Grunt的配置对象,如前面的files可以通过以下方式获得:

files = this.options().manifest;
   

       在注册任务时还可以通过this.name方式获取任务名称。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值