###前端构建工具-grunt介绍
grunt是一款优秀的前端构建工具(自动化工具)。对于需要反复重复的任务,例如压缩、编译、单元测试等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你完成大部分无聊的工作。
###grunt的安装
-
安装最新版node.js(node.js包含npm,所以不用安装npm)
-
全局安装grunt命令行 npm install grunt-cli -g
-
构建一个简单的前端网站 目录结构如下:
└── grunt-test
├── Gruntfile.js
├── build
├── package.json
├── src
│ └── grunt-test.js
└── test
package.json文件内容如下:
{
"name": "grunt-test",
"version": "1.0.0",
"devDependencies": {
}
}
- 安装grunt npm install grunt --save-dev 添加--save-dev自动会将依赖写入package.json
"devDependencies": {
"grunt": "^1.0.1"
}
- 配置Gruntfile.js
module.exports = function(grunt) {
//任务配置,所有插件的配置信息
grunt.initConfig({
//获取package.json信息
pkg: grunt.file.readJSON('package.json'),
});
//输入grunt后的动作(注意前后顺序)
grunt.registerTask('default', []);
};
此时终端输入grunt便可以运行,但是此时的grunt什么也做不了,接下来给grunt安装插件
####grunt的安装插件
- 安装grunt插件 插件介绍:
Contrib-jshint——javascript语法错误检查;
Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
Contrib-clean——清空文件、文件夹;
Contrib-uglify——压缩javascript代码
Contrib-copy——文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具
#####grunt的安装插件示例 jshint安装示例:
-
npm安装同时将依赖写入package.json npm install grunt-contrib-jshint --save-dev
-
配置Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//配置插件
jshint: {
files: ['src/*.js'],
options: {
jshintrc: '.jshintrc'
}
}
});
//载入插件
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['uglify']);
};
- 其他插件的安装类似
安装watch后的代码下载地址:
https://github.com/wjingkunwang/notes/tree/master/front/code/grunt-test
参阅文章: