前端构建工具－grunt介绍

###前端构建工具－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

参阅文章：

http://www.lxway.com/21821.htm

http://blog.fens.me/nodejs-grunt-intro/

转载于:https://my.oschina.net/u/2361475/blog/656824