Grunt是基于任务的命令行构建工具,是一款用于前端的自动化工具。
他可以自动化地完成构建、检查、压缩等任务,使程序员从重复而繁琐的任务中解脱出来,更专注于coding。
Grunt的安装及配置方法如下:
1.安装Node.js
Grunt依赖于Node.js的0.8以上版本。可以前往官网下载。
安装完成后,在命令行中输入 node -v 检验是否安装完成。
2.安装全局grunt命令行
要在项目中使用grunt,首先要在全局环境中安装grunt-cli。
在命令行中输入 npm install -g grunt-cli 来安装grunt-cli。如果该命令卡住,先去掉-g参数执行一次安装,然后再加上-g安装一次。
到这里,grunt的全局配置就完成了。下面是在每个项目中的安装配置。
3.项目中配置grunt
首先,从官网下载package.json和Gruntfile.js 放到项目根目录下,或者直接在根目录中新建这两个文件:
package.json :
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
}
}
"name"和"version"是项目的信息。
devDependencies是项目的依赖项。在devDependencies中配置好依赖项后,可以在项目中运行grunt来加载这些插件。
Gruntfile.js :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
// Default task(s).
grunt.registerTask('default', []);
};
grunt.initConfig中对任务插件进行配置。
grunt.loadNpmTasks表示要加载使用这些插件。
在default中加入到任务,说明在运行grunt时要执行这些插件。
4.在项目中安装grunt
命令行中进入到项目的根目录,输入npm install grunt --save-dev,安装grunt并配置为开发依赖项。
安装完成后,运行grunt,如果提示done. 则表示前面的安装配置成功了。如图:
5.grunt插件
项目中构建好了grunt,但是并没有什么卵用。我们要的是grunt中的插件来给我们自动完成任务。
注,下面所有配置中的build,可以用任意字符串代替,比如lxy,比如js/css等等
1)uglify插件
uglify插件可以帮我们压缩js文件。
安装方法和之前一样,在项目的根目录中用命令行运行npm install grunt-contrib-uglify --save-dev
然后在Gruntfile.js中的grunt.initConfig里配置(跟在pkg: grunt.file.readJSON('package.json'),下面,前面用逗号分隔)
uglify: {
options: {
//在文件中加入banner标签
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
//要压缩的文件路径 <pre name="code" class="javascript"> src: 'src/<span style="font-family: 宋体; font-size: 9pt;"><%= pkg.name %></span>.js',
//要保存的路径 dest: 'build/<%= pkg.name %>.min.js' } }
接着在
grunt.initConfig{}下面写
grunt.loadNpmTasks('grunt-contrib-uglify');
告诉grunt要加载uglify。
最后在defult的数组中加入'uglify',表示要在运行grunt的时候立即执行uglify。
完成之后的Gruntfile.js文件:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
//在文件中加入banner标签
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
//要压缩的文件路径
src: 'src/<%= pkg.name %>.js',
//要保存的路径
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
这时候,再在项目下运行grunt,就可以看到grunt帮我们完成了js的压缩任务。
2)clean插件
clean插件可以清除指定文件夹下的所有文件
安装:npm install grunt-contrib-clean --save-dev
加载:grunt.loadNpmTasks('grunt-contrib-clean');
defult:'clean'
配置:
clean: {
build: {
src: ["path/to/dir/one", "path/to/dir/two"]
}
}
3)jshint插件
jshint用于js文件的语法检查。
安装:npm install grunt-contrib-jshint --save-dev
加载:grunt.loadNpmTasks('grunt-contrib-jshint');
defult:'jshint' (通常写在前面)
配置:
jshint: {
//要检查的文件路径
test1: ['Gruntfile.js'],
test2: ['src/*.js'],
//设置语法规则文件
options: {
jshintrc: '.jshintrc'
}
},
要检查语法,需要有检查的规则。这里要定义一个".jshintrc"文件。在根目录下新建这个文件,然后写入规则:
{
"boss":false,
"curly":true,
"eqeqeq":true,
"eqnull":true,
"expr":true,
"immed":true,
"newcap":true,
"noempty":true,
"noarg":true,
"undef":true,
"regexp":true,
"browser":true,
"node":true
}
当然,具体的项目中可以选用不同的规则。
这时再运行grunt,就可以看到grunt帮我们进行了语法检查。
4)watch插件
watch插件给我们实现了真正的自动化,不需要我们一次次的运行grunt了。
安装:npm install grunt-contrib-watch --save-dev
加载:grunt.loadNpmTasks('grunt-contrib-watch');
defult:'watch'(写在最后)
配置:
watch: {
build: {
//监控哪些文件发生了变化
files: ['**/*.js'],
//当被监控的文件发生变化时,执行那些插件
tasks: ['jshint'],
options: {
//是否在子程序中执行。设为false使监控更快。
spawn: false,
},
},
},
配置完成后,再运行grunt。可以看到程序在waiting。。。等待被监控的文件发生变化后,自动执行任务。
到此,对grunt的使用已经有了基本的了解,但这只是最基础的几个插件,更多的插件和功能等着我们去学习。