Grunt实践之简易教程

以前自己太low了，都没用过高大上的前端自动化打包工具，开发方式也是偏传统的。加入到新的团队后得拼命赶上啊，前端技术更迭太快，各种技术层出不穷，智商都快不够用了。看人家都用的牛逼哄哄的技术，自己还守着

那点小白技术就说不过去了，所以有些环境逼着你进步，有些环境是让你不知不觉就堕落了。不扯淡了，开始学习吧。

1、Grunt的安装

Grunt依赖Nodejs环境，所以安装前需要安装nodejs，至于怎么安装有很多教程，有一键安装的安装包，安装过程比较容易。这里加入已经安装好了Nodejs，

在CMD中输入命令即可安装Grunt，容易吧。

npm install -g grunt-cli

2、新建一个Grunt项目

新建一个文件名，名称随便定，我这里就取的grunt_test。在该文件下新建2个文件，一个是package.json，一个是Gruntfile.js，一般来说这两个文件是必须的。

package.json：

{
  "name": "grunt_test",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-sass": "*",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-requirejs": "latest",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-usemin": "latest",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-cssc": "*",
    "grunt-htmlhint": "*",
    "matchdep": "*"
  },
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "huzhao",
  "license": "ISC"
}

name是你的grunt项目名称，不是开发的项目名称哈。devDependencies字面意思就是依赖嘛，Grunt有很多插件，很多流程的实现都依赖插件，devDependencies就是把你需要的插件列出来。

3、下载插件

package.json中列出了很多插件，使用时需要把他们下载下来，进入你的grunt项目内，在命令中输入：

npm --install

上面命令会把需要的插件下载到本地，这个时候grunt项目里就多了很多文件。

4、Gruntfile.js

基本所有的实现都在该文件里了，所以是最重要的。

module.exports = function(grunt) { // Do grunt-related things in here };

这是一个容器，所有的内容方法必须写在里面。

初始化：

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‘
    }
  }
});

pkg加载package.json，读取里面的内容。

uglify是一个压缩js的插件，把源文件压缩成目标文件。

// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

自定义任务：

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

默认是default，即你在grunt项目里打开命令窗口输入：grunt就能运行了，这里也可以改成别的名称，通常是对应开发的项目名称，比如grunt_project，那么运行的时候就输入:grunt grunt_project。

简易的完整代码：

module.exports = function(grunt) {

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

  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-concat‘);
  grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘]);

};