Grunt -JavaScript构建工具
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
1.安装CLI
Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。
Grunt CLI已经正确安装,并且已经有一份配置好package.json 和 Gruntfile 文件的项目了,接下来就很容易拿Grunt练手了:
- 将命令行的当前目录转到项目的根目录下。
- 执行npm install命令安装项目依赖的库。
- 执行 grunt 命令。
Gruntfile 文件配置文件如下:
module.exports = function(grunt){
grunt.initConfig({ //任务
//pkg: grunt.file.readJSON('package.json')
watch:{ //指定任务,该任务下有jade与js两个目标
jade: {
files: ['views/**'],//传递所需监听的视图文件
options: { //指定覆盖内置属性的默认值,目标(target)级的平options将会覆盖任务级的options
livereload: true //文件出现改动时重新启动服务
}
},
js:{
files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
options: {
livereload: true
}
}
},
nodemon: {
dev: {
options: {
file: 'app.js',
args: [],
ignoresFiles:['README.md', 'node_modules/**',],
watchedExtensions: ['js'],
watchedFolders: ['app', 'config'],
debug: true,
delayTime: 1,
env: {
PORT: 3000
},
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput:true
}
}
})
grunt.option('force', true);
grunt.registerTask('default', ['concurrent']);
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
}
解析文件:
1.Grunt配置
Grunt的task配置都是在 Gruntfile中的grunt.initConfig方法中指定的。此配置主要是以任务名称命名的属性,也可以包含其他任意数据。gruntfile.js文件中指定三个任务:watch、nodemon、concurrent。
2.任务配置和目标
当运行一个任务时,Grunt会自动查找配置对象中的同名属性。多任务(multi-task)可以通过任意命名的“目标(target)”来定义多个配置。下列配置中,watch任务包括:jade、js两个目标。
3.options属性
在一个任务配置中,options属性可以用来指定覆盖内置属性的默认值。此外,每一个目标(target)中还可以拥有一个专门针对此目标(target)的options属性。目标(target)级的平options将会覆盖任务级的options。
4.文件
图中标红的矩形采用的是文件通配符的形式,表示views目录下的所有文件。
5.创建任务
任务是Grunt的面包和奶油。就像你常用的工具,如: jshint 或 nodeunit。每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情。
如果你没有指定一个任务,并且你已经定义一个名为 “default” 的任务,那么该任务将会默认被执行(不用诧异,总要做点儿什么啊!)。
grunt.registerTask(‘default’, [‘concurrent’]);
案例中定义了一个 ‘default’ 任务,如果运行Grunt时没有指定任何任务,它将自动执行concurrent任务。
–Task
指定一个包含可加载的任务和“额外”文件的目录。
还可以调用 grunt.loadTasks(…)
–npm
在通过npm安装的插件中检查可加载的任何以及额外文件。
还可以调用 grunt.loadNpmTasks(…)
6.任务说明
- watch—— 可以监控特定的文件,在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务,比如 livereload 等等。
liverload:true:文件发生改动时重新启动服务
- nodemon——自动重启项目工程,node 有一个 npm 模块 supervisior 也是用来监控进程的,不过除了
supervisior 外,还有很多其他的工具,从 github 的评分上看,比较热门的有
forever,nodemon,node-dev,具体这些工具的区别可以参考这篇文章 Comparison: Tools to
Automate Restarting Node.js Server After Code Changes ,个人觉得在开发环境还是用
nodemon,因为配置比较方便,文档也很清晰。
- grunt-concurrent:Grunt任务,并发运行缓慢的任务就像Coffee和Sass, 可能显著改善您的构建时间。如果要一次运行nodmon和watch,grunt-concurrent这个插件是很有用的。