Grunt入门教程

引入：grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：

• ① 压缩文件
• ② 合并文件
• ③ 简单语法检查

环境：grunt是基于nodejs运行的，所以需要有nodejs，在Nodejs中，安装grunt的命令行接口。

npm install -g grunt-cli

将grunt命令植入系统路径。通过nodejs的require查找到安装的grunt，就能在任意目录下运行grunt项目了。

在一个简单的实例中，慢慢享受grunt给前端所带来的便捷与随心所欲。

新建项目的时候，增加两个文件，一个为：package.json;另一个为：Gruntfile.js。

---

 

package.json

这个文件用来存储npm模块的依赖项（比如我们的打包若是依赖requireJS的插件，这里就需要配置）
然后，我们会在里面配置一些不一样的信息，比如我们上面的file，这些数据都会放到package中
对于package的灵活配置。

---

 

Gruntfile

这个文件尤其关键，他一般干两件事情：
① 读取package信息
② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）

Gruntfile一般由四个部分组成
① 包装函数
这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面

module.exports = function (grunt) {
//你的代码
}

这个不用知道为什么，直接将代码放入即可

② 项目/任务配置
我们在Gruntfile一般第一个用到的就是initConfig方法配置依赖信息

pkg: grunt.file.readJSON('package.json')

这里的 grunt.file.readJSON就会将我们的配置文件读出，并且转换为json对象

然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了
值得注意的是这里使用的是underscore模板引擎，所以你在这里可以写很多东西

uglify是一个插件的，我们在package依赖项进行了配置，这个时候我们为系统配置了一个任务
uglify（压缩），他会干这几个事情：

① 在src中找到zepto进行压缩（具体名字在package中找到）
② 找到dest目录，没有就新建，然后将压缩文件搞进去
③ 在上面加几个描述语言

这个任务配置其实就是一个方法接口调用，按照规范来就好，暂时不予关注，内幕后期来
这里只是定义了相关参数，但是并未加载实际函数，所以后面马上就有一句：

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

用于加载相关插件

最后注册一个自定义任务（其实也是默认任务），所以我们下面的命令行是等效的：

grunt == grunt uglify

---

实例：

1 js压缩打包

package.json文件

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

  1->1（一个文件打包压缩到另一个文件）：

 module.exports = function (grunt) {
        banner: '/*! <%= pkg.file %>Qboooogle <%= grunt.template.today("yyyy-mm-dd") %> */
'
      },
      build: {6         src: 'build/js/<%=pkg.file %>.js',
        dest: 'dist/js/<%= pkg.file %>.min.js'
      }
    }

   N->1（N个文件打包压缩到一个文件）：

module.exports = function (grunt) {
        banner: '/*! <%= pkg.file %>Qboooogle <%= grunt.template.today("yyyy-mm-dd") %> */
'
      },
      build: {
        src: ['build/js/<%=pkg.file %>.js','build/js/<%=pkg.file %>1.js'],7         dest: 'dist/js/<%= pkg.file %>.min.js'
      }
    }

   N->N（通过my_target)：

module.exports = function (grunt) {
      options: {
        banner: '/*! <%= pkg.file %> Qboooogle <%= grunt.template.today("yyyy-mm-dd") %> */
'
      },
      my_target : {
        files : {
          'dist/js/index.min.js':['build/js/index.js'],
          'dist/js/index1.min.js':['build/js/index1.js'],
          'dist/js/index2.min.js':['build/js/index1.js'],
          'dist/js/index3.min.js':['build/js/index1.js']
        }
      }
    }

---

2 less编译打包

N->N

    less : {
      development: {
        options: {
          compress: true
        },
        files: {
          "dist/css/index1.css":"build/less/index1.less",
          "dist/css/index.css" : "build/less/index.less"
        }
      }
    }

N->1（将build/less/下的两个文件编译合并到dist/css/目录下）

 module.exports = function (grunt) {
    less : {
      development: {
        options: {
          compress: false
        },
        files: {
          "dist/css/index.css":["build/less/index1.less","build/less/index.less"]
        }
      }
    }

开发模式与产品模式（唯一区别就是开发模式下，为了进行调试，尽量不压缩文件，而上线版本，最好将其进行压缩）代码表示将build/less/下的两个Less文件转化为dist/css/下的css文件，两者前者为未压缩版本。

module.exports = function (grunt) {
 less : {
       development: {
         options: {
           compress: false
         },
        files: {
          "dist/css/index.css":["build/less/index1.less","build/less/index.less"]
        }
      },
      production: {
        options: {
          compress: true
        },
        files: {
          "dist/css/index4.css":["build/less/index1.less","build/less/index.less"]
        }
      }
    }

---

3 图片优化（将图片进行优化处理，并生成新的文件，存放在另一个文件夹中）这里表示，匹配build/img下面的所有以png,jpg,gif,svg,jpeg格式结尾的文件，并一一进行优化处理，然后将优化后的图片放在dist/img/目录下。

image : {
      dynamic : {
        files:[{
          expand:true,
          cwd:'build/img/',
          src:['**/*.{png,jpg,gif,svg,jpeg'],
          dest:'dist/img/'
        }]
      }
    }
  });

---

4 js语法检查（按照自定义的标准，检测绑定的相关js文件是否有语法错误）

   jshint : {
      options: {
        jshintrc :'.jshintrc'
      },
      core: {
        src:'dist/js/index.min.js'
      },
      demo: {
         src:'dist/js/index1.min.js'
      }
    }

---

5 监听（watch）：通过绑定所有的js文件及less文件，并时时监听文件内容的变化，当变化发生时，将重新编译、压缩、打包生成最新的文件。

 uglify: {
      options: {
        banner: '/*! <%= pkg.file %> Qboooogle <%= grunt.template.today("yyyy-mm-dd") %> */
'
      },
      build : {
         src: 'build/js/index.js',
         dest:'dist/js/index6.min.js'
      }
    },
    watch: {
      files: ["build/less/*.less","build/js/*.js"],
      tasks: ["less", "uglify"]
    },

---

6 清理文件（构建成功后，将不再需要的文件删除，比如图片优化之后，之前的图片就可以清理掉了）

  clean: {
      build: ["build/img/*"]
    },

---

7 css文件校验处理

  csslint: {
      options: {
        csslintrc: 'build/less/.csslintrc'
      },
      dist:[
      'dist/css/index1.css',
      ]
    }

---

8 链接Bootstrap HTML 并进行语法检查

 bootlint: {
      options: {
        relaxerror: ['W002','W003','W005','W007']
      },
      files: ['*.html']
    },

---

9 构建HTML模板

includes: {
      build: {
        src: ['*.html'], // Source files
        dest: 'documentation/', // Destination directory
        flatten: true,
        cwd: 'documentation/build',
        options: {
          silent: true,
          includePath: 'documentation/build/include'
        }
      }

---

其中css链接处理需要的.jshintrc文件如下：

{
  "adjoining-classes": false,
  "box-sizing": false,
  "box-model": false,
  "compatible-vendor-prefixes": false,
  "floats": false,
  "font-sizes": false,
  "gradients": false,
  "important": false,
  "known-properties": false,
  "outline-none": false,
  "qualified-headings": false,
  "regex-selectors": false,
  "shorthand": false,
  "text-indent": false,
  "unique-headings": false,
  "universal-selector": false,
  "unqualified-attributes": false,
  "ids": false,
  "fallback-colors": false,
  "vendor-prefix": false,
  "import": false
}

---

完整的Gruntfile.js文件如下：

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> Qboooogle <%= grunt.template.today("yyyy-mm-dd") %> */
'
      },
      build : {
         src: 'build/js/index.js',
         dest:'dist/js/index6.min.js'
      }
    },
    watch: {
      files: ["build/less/*.less","build/js/*.js"],
      tasks: ["less", "uglify","image","clean"]
    },
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src:["build/less/index1.less","build/less/index.less"],
        dest:"build/less/index3.less"
      }
    },
    less : {
      development: {
        options: {
          compress: false
        },
        files: {
          "dist/css/index6.css":["build/less/index1.less","build/less/index.less"]
        }
      },
      production: {
        options: {
          compress: true
        },
        files: {
          "dist/css/index5.css":["build/less/index1.less","build/less/index.less"]
        }
      }
    },
    clean: {
      build: ["build/img/*"]
    },
    uglify: {
      options: {
        mangle:true,
        preserveComments:'some'
      }
    },

    cssmin: {
      compress: {
        files: {
          "dist/css/index.css": [
          "build/less/index1.less",
          "build/less/index.less"
        ]
        }
      }
    }
    image: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'build/img/',
          src: ['**/*.{png,jpg,gif,svg,jpeg}'],
          dest: 'dist/img/'
        }]
      }
    },
    csslint: {
      options: {
        csslintrc: 'build/less/.csslintrc'
      },
      dist:[
      'dist/css/index1.css',
      ]
    },
    bootlint: {
      options: {
        relaxerror: ['W002','W003','W005','W007']
      },
      files: ['*.html']
    },
    includes: {
      build: {
        src: ['*.html'], // Source files
        dest: 'documentation/', // Destination directory
        flatten: true,
        cwd: 'documentation/build',
        options: {
          silent: true,
          includePath: 'documentation/build/include'
        }
      }
    }
    jshint : {
      options: {
        jshintrc :'.jshintrc'
      },
      core: {
        src:'dist/js/index.min.js'
      },
      demo: {
         src:'dist/js/index1.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-image');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-bootlint');
    grunt.loadNpmTasks('grunt-includes');
  grunt.loadNpmTasks("grunt-contrib-concat");
   grunt.loadNpmTasks("grunt-contrib-watch");
   grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks('grunt-contrib-cssmin');

   grunt.registerTask('link', ['includes']);
   grunt.registerTask('default', ['includes']);
  // Linting task
  //grunt.registerTask('lint', ['jshint', 'csslint', 'bootlint']);

  // The default task (running "grunt" in console) is "watch"
  //grunt.registerTask('default', ['watch']);
}

完整的目录结构如下：

整项目代码下载：Qboooogle