前端项目构建工具---Grunt

什么是Grunt？

  grunt是javascript项目构建工具，在grunt流行以前，前端项目的构建打包大多数使用ant。(ant具体使用 能够google)，但ant对于前端而言，存在不友好，执行效率低，学习成本高的问题。因此最近几年对于前端构建工具--grunt就应运而生。

 Grunt能作什么呢？

 按任务目标大体可分为四类：

  1. 文件操做型：好比合并、压缩js和css文件等（包括）。

  2. 预编译型：好比编译less、sass、coffeescript等。

  3. 类库项目构建型：好比 angular、ember、backbone等.

  4. 工程质量保障型：好比jshint、jasmine、mocha等.

 下面咱们最主要来说下 第一种(文件合并与压缩)。由于无论什么项目在上线以前都要对文件压缩 或者 有合并的文件要合并，也就是说减小请求数和代码体积减小，提升前端性能方面。 在学习grunt以前 咱们都知道grunt依赖于nodeJS平台。也就是说咱们要安装grunt 必须先安装nodeJS环境和NPM环境。

 1.nodeJS的安装

   因为我目前作的项目都是基于window下的 因此我这边讲的都是基于windows下的安装，若是想要了解linux或者unix环境下安装 能够google下。

   我这边只讲下普通安装方法。其实就是最简单的方法了，对于大多Windows用户而言，都是不太喜欢折腾的人，你能够从这里（http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi ）直接下载到Node.js编译好的msi文件。而后双击便可在程序的引导下完成安装。

  而后再命令行中直接运行以下命令便可：

 

 打印出版本号 说明已经安装好了。该引导步骤会将node.exe文件安装到C:\Program Files (x86)\nodejs\目录下，并将该目录添加进PATH环境变量。

2.NPM安装

 1. 首先咱们须要了解的是 什么是NPM？NPM能作什么？

    npm是node的包管理器，咱们在开发nodejs应用程序的过程当中，可能须要依赖许许多多的第三方模块以提升开发效率，那么此时，咱们就须要npm来辅助安装所需package。

2. 按照步骤以下：

  1. 下载npm源码 https://github.com/isaacs/npm/tags

  2. 将npm源代码解压到好比D:\npm目录中。

 3. 执行命令 进入npm文件中 执行以下命令：

   

 出现如上面信息 说明npm已经按照好了。

 3.Grunt的安装

   特别留意下grunt是有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli），咱们须要安装的是客户端版本。若是咱们如今已经安装了服务器版本的话，咱们能够卸载掉：以下命令就ok  npm uninstall -g grunt 。

  客户端安装命令npm install -g grunt-cli 以下图所示：

 

 出现如上显示 说明也已经安装好了！其中 -g安装全局NodeJs模块。下面咱们须要package.json文件。

 package.json文件

假设你有个工程目录叫nodejsDemo，在工程根目录放个package.json.

package.json是npm的包配置文件，package.json用于配置你须要拉取的grunt插件信息，好比下面的代码：

{
    "name": "gruntJs",
    "version": "1.0.0",
    "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1" 
    }
}

可是要提醒下你们 package.json 中 devDependencies 内部的版本必定要对应，刚开始配置时候 一直配置不上 报错 有多是版本的问题 因此安装我上面的版原本是ok的。

     留意devDependencies字段，定义你要拉取的依赖模块，上面的代码，拉取grunt-contrib-uglify插件（用于压缩js）及grunt-contrib-concat 插件(用于合并文件)，字段的值~0.1.1，指明须要模块的版本号，“~”是至少的意思。

   在工程根目录启动命令行工具，运行npm install 以下图所示：

  

 出现如上面信息 也说明已经配置成功了，依赖拉取成功后，在nodejsDemo工程中生成了node_modules目录，该目录就包含了以下几个文件：

 

到此 准备工做已经ok了！接下来咱们须要Gruntfile.js配置。

 Gruntfile.js配置

 1. 先在工程目录nodejsDemo下 建立一个文件夹src 用于存放全部的js文件。里面目前包含2个js文件 grunt.js 和bb.js 如今我须要的是对src目录下的grunt.js和bb.js进行压缩与合并操做。

 2. 接下来我要在工程目录nodejsDemo建立一个Gruntfile.js 内容代码以下：

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });

      // 载入concat和uglify插件，分别对于合并和压缩
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');

      // 注册任务
      grunt.registerTask('default', ['concat','uglify']);
  };

 说明有concat是合并的意思 他的意思是指src文件夹下的grunt.js和bb.js 先合并到dest文件夹下的domop.js中。而后接着压缩 压缩文件为domop-min.js。

 接下来咱们只须要运行以下命令便可：

 

 如上所示：说明已经完成合并与压缩操做了。 咱们能够在根目录看到 动态生成了文件夹 dest 而后在里面有2个文件 以下：

 

说明一切都ok了！

 接下来咱们来重点看下Gruntfile.js代码的含义。

  全部grunt的代码，必须放在module.exports函数内，参数grunt为grunt对象，当你运行命令grunt时，grunt系统会去读此函数的grunt构建配置。

 grunt.initConfig(obj)

  initConfig用于配置构建信息，第一个参数必须是个object。

// 构建任务配置
grunt.initConfig({
 
});

 grunt.file.readJSON(path)

读取一个json文件，一般咱们会把构建任务的基本配置写在独立的json文件内，方便咱们修改。

// 构建任务配置
grunt.initConfig({
    //读取package.json的内容，造成个json数据
    pkg: grunt.file.readJSON('package.json')
});

grunt.loadNpmTasks(pluginName).

 加载指定插件任务.

grunt.registerTask(taskName,taskArray)

 注册任务，好比下面的代码：

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

注册默认执行的任务，即你运行grunt命令时，触发的任务构建。 第二个参数为任务目标名，在initConfig()中配置：

// 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });

文件的简单正则匹配语法

文件名（目录路径）的匹配，基本上和ant同样。

   1. * 指匹配除了/外的任意数量的字符，好比foo/*.js.

   2. ? 指匹配除了/外的单个字符.

   3. ** 指匹配包含/的任意数量的字符，好比foo/**/*.js.

   4. ! 指排除指定文件，好比src: ['foo/*.js', '!foo/bar.js']。

   5. {} 能够理解为“or”表达式，好比src: 'foo/{a,b}*.js' 。