Grunt 简单入门

2019独角兽企业重金招聘Python工程师标准>>>

Grunt 是一个基于Nodejs的自动化任务执行工具。那么什么是任务执行工具呢，其实就是按照之前编定好的规则执行任务的一个工具。

##下面是Grunt的简单使用方法。##

###安装Grunt###

首先要安装nodejs（包含npm）。通过 npm install -g grunt来安装grunt。这个命令仅仅安装了grunt命令行接口（grunt-cli），还不能在文件夹里运行，需要配置完成才可以。

###配置Grunt### Grunt要向运行必须得在在文件夹根目录下找到配置文件 Gruntfile.js， 而 Gruntfile.js依赖与nodejs的配置文件 package.json 。所以项目根目录下得有package.json 和 Gruntfile.js两个配置文件。package.json可以通过 node init来生成，而 Gruntfile.js好像得手工创建。

Gruntfile.js内的代码包括四个主要元素：

• 包裹函数
• 项目和任务配置
• 加载Grunt插件和任务
• 自定义任务

下面先贴上整体配置文件再一一分析

module.exports = function(grunt) {

  // Project configuration.
  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'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

其中

module.exports＝ function (grunt) {
}

既为包裹函数，其内部的

grunt.initConfig({})

就是Grunt 项目配置函数。这个对象{}既为配置对象。配置对象内又有各个 任务的配置。
其中 pkg:grunt.file.readJSON('package.json')是读取根目录总的pakcage.json文件，作为配置对象的一个属性 pkg，以方便后面的配置使用。

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

就是一个任务配置对象，属性名必须与插件名称一致。其中的 options是这个任务的 任务级配置，build是一个 目标，一个任务可以包含多个目标，目标名称命名规范与js命名规范一样（也就是说可以随意取）。每个目标内还可以有 目标级配置。 目标内的 src属性为源文件，dest为目标文件（保存任务执行结果）。
<% %>是模版，模版内可以运行javascript代码，可以访问任务配置对象内的属性。

项目配置完成后需要加载Grunt插件 grunt.loadNpmTasks('grunt-contrib-uglify') 最后是自定义任务（可选） grunt.registerTask('default', ['uglify']);

执行Grunt任务

运行之前要确保Gruntfile.js中加载的插件已经安装了，如果为安装可以通过 npm install 插件名 --save-dev来安装，例如： npm install grunt-contrib-ublify --save-dev。 如果像上面一样配置了自定义任务，直接运行 grunt就可以执行 uglify任务了。如果没有配置default，则需要 grunt uglify 来执行 uglify任务。执行 uglify任务时会按顺序执行它的各个目标，亦可以通过 grunt uglify:build来单独执行某个目标。

官方样例

这里再贴一个官方提供的 Gruntfile.js样例

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 %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

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

};

这个样例基本可以对付大多数任务了，具体详细的配置可以看官方文档

转载于:https://my.oschina.net/zhaoxiaoben/blog/191090