前端 Grunt

简介

Grunt 是一个 JavaScript 任务运行器，可以自动化执行前端构建、压缩、测试等复杂的工作流程。使用 Grunt 能提高前端开发效率，减少重复工作，规范项目代码。

安装

安装 Grunt 需要先安装 Node.js 和 npm，然后全局安装 Grunt：

复制代码
npm install -g grunt-cli

使用

创建 Gruntfile.js 文件

在项目根目录下创建 Gruntfile.js 文件，这个文件是 Grunt 的配置文件。其中包含了任务和插件的配置信息。

配置任务

Grunt 的每个任务都由一个或多个插件组成，并且每个插件都有一些特定的选项和参数。以下为一个样例：

复制代码
module.exports = function(grunt) {

  // 任务配置，所有插件的配置信息
  grunt.initConfig({
    imagemin: {                          // imagemin 插件的配置信息
      static: {
        options: {
          optimizationLevel: 3,
          svgoPlugins: [{ removeViewBox: false }]
        },
        files: {
          'dist/img.png': 'src/img.png',
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif'
        }
      },
      dynamic: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'dist/'
        }]
      }
    }
  });

  // 加载插件
  grunt.loadNpmTasks('grunt-contrib-imagemin');

  // 默认任务
  grunt.registerTask('default', ['imagemin']);

};

这个样例中定义了一个 imagemin 任务，会对指定的图片文件进行优化处理。其中 grunt.initConfig 方法中包含了 imagemin 插件的配置信息，grunt.loadNpmTasks 方法加载了该插件，grunt.registerTask 方法注册了 imagemin 任务。

运行任务

在命令行中运行以下命令可以执行 imagemin 任务：

复制代码
grunt imagemin

插件

Grunt 有很多插件可供使用，例如：

• uglify：压缩 JavaScript 文件；
• cssmin：压缩 CSS 文件；
• watch：监听文件变化自动执行任务；
• jshint：检查 JavaScript 代码是否符合规范；

你可以通过搜索 npmjs.com 上的 grunt-contrib 关键字来查找和安装 Grunt 的插件。