grunt 构建前端js项目

grunt 简介

Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。和java中的maven有异曲同工之秒。

• 文档丰富：详细的使用说明，从入门使用，到高级定制，非常详尽
• 插件丰富：基本能够想到的常用的任务，都可以找到
• 社区活跃：Grunt的开发团队还是挺勤劳的，社区活跃度也挺高

 

安装 Grunt

    Grunt以及Grunt的插件，都是通过npm进行安装和管理，所以首先得安装node环境， node.js 的下载地址：http://nodejs.org/#download，下载完成后点击下一步执行安装完即可。这里假设你已经安装了 Node.js 和 NPM。推荐使用git shell bash执行命令，首先安装全局grunt-cli ,如下：

     npm install -g grunt-cli

     grunt-cli的主要作用是让我们可以运行Grunt命令，加上-g，则可以在任意目录下运行。

Grunt 常用插件介绍

• JSHint——检查下JS代码规范性，避免进行类似隐式全局变量这样的坑里
• concat——JS文件合并，合理减少请求数，提升加载速度
• cssmin——CSS文件合并，合理减少请求数，提升加载速度
• Uglyfy——压缩文件，减少文件尺寸，提升用户侧加载速度
• QUnit——单元测试，提高项目可维护性，结合递归测试可尽早发现潜在问题

    Grunt正是为了解决重复问题而诞生，它将项目结构生成、JSHint检查、文件合并、压缩、单元测试等繁琐的工作变成一个个可自动化完成的任务，一键搞定。

Grunt 示例

     创建一个简单grunt 项目

    1 切换至项目根目录，创建两个配置文件 package.json和Gruntfile.js文件。

      一 package.json：这个文件主要用来描述项目信息以及项目依赖的插件；

      二 Gruntfile : 这个文件主要用来配置项目任务以及加载插件。

       一个简单的package.json 文件

{
  "name": "bpms",

  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

        Gruntfile.js 文件内容示例

module.exports = function(grunt) {
  // 项目配置

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  //加载插件任务 

  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认执行任务，和ant 有点类似

  grunt.registerTask('default', ['uglify']);

};

2 创建好基本项目文件后，运行如下命令安装grunt 及grunt 依赖的插件

  npm install

  npm install –save-dev

至此项目的一个基本环境搭建完成，然后新建一个src文件夹，创建一个bpms.js的简单js 脚本文件

3 运行grunt 生成目标文件

  默认运行grunt  将会执行default 任务，如果还注册有其他任务，运行grunt name    name 代表你自定义的任务名称