Grunt 简单入门

jopen 6年前

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

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

安装Grunt

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

配置Grunt

Grunt要向运行必须得在在文件夹根目录下找到配置文件 Gruntfile.js, 而 Gruntfile.js依赖与nodejs的配置文件 package.json 。所以项目根目录下得有package.jsonGruntfile.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']);    };

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