2018年06月29日

JavaScript

Grunt初探

概要

Grunt 是一款构建工具，它可以创建任务，完成对配置里的源文件执行插件对应的操作后生成目标文件的操作，从而实现压缩、编译、单元测试、linting 等工作

前提准备

需要安装grunt和grunt-cli，grunt-cli一般为全局安装，而grunt一般为本地项目内的

在项目中执行grunt-cli的grunt命令，就会利用 node 的require()查找本地安装的 Grunt，所以在项目的任意子目录中运行即可

必要文件

package.json: grunt 和 Grunt 插件都安装在 devDependencies 配置段内，grunt-init脚手架可以创建出默认模板

Gruntfile: 用来配置或定义任务(task)并加载 Grunt 插件，一般命名为 Gruntfile.js 或 Gruntfile.coffee

Gruntfile 构成

“wrapper”函数
项目与任务配置
加载 grunt 插件和任务
自定义任务

“wrapper”函数

1	module.exports = function(grunt) {};

项目与任务配置

定义在一个 object 中，并传递给grunt.initConfig 方法

在这个对象里模板字符串<% %>可以引用任意配置属性，一般都会pkg: grunt.file.readJSON('package.json')引入项目元数据(metadata)，然后用<% pkg.name %>使用里面的属性

每个属性都是一个 task，里面有诸如options(配置项，里面会有诸如banner，可以用来在文件顶部生成一个注释)、src(来源文件，可以采用数组形式，可以使用通配符)、dest(目标文件或目录)等默认值

还可以在 task 里加入 target，比如

grunt.initConfig({
  concat: {
    options: {},
    foo: {
      options: {},
    },
    bar: {},
  },
});

就定义了 foo 和 bar 两个对象，可以通过grunt concat:foo来单独处理该目标，而默认则会遍历所有目标并依次处理

加载 Grunt 插件和任务

grunt-contrib-uglify已经通过 npm 安装

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

自定义任务

定义default任务可以让 Grunt 默认执行多个任务(即运行grunt命令时不指定参数)

1	grunt.registerTask("default", ["jshint", "uglify"]);

插件

常用插件

grunt-contrib-uglify

使用 UglifyJS 压缩 js 文件

grunt-contrib-cssmin

压缩 css 文件

grunt-contrib-htmlmin

压缩 html 文件

grunt-contrib-imagemin

压缩图片

grunt-contrib-jshint

使用 JSHint 检查 js 语法

grunt-contrib-qunit

使用 PhantomJS 实现自动化单元测试

grunt-contrib-less

将 LESS 编译成 CSS

grunt-contrib-concat

连接、合并文件

grunt-contrib-copy

复制文件和文件夹

grunt-contrib-clean

清空文件和文件夹

grunt-contrib-watch

文件发生改变时运行任务

grunt-contrib-connect

构建静态文件服务器，本身集成了 livereload

创建插件

全局安装grunt-init
安装 Grunt 插件模板git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
在空目录执行grunt-init gruntplugin

“grunt-contrib”命名空间保留给 Grunt 团队使用