npm 包 grunt-config-dir 使用教程

1. 简介

Grunt 是一个非常流行的前端构建工具，在使用 Grunt 进行项目构建时，经常需要在 Gruntfile.js 中多次引入相同的配置文件，这时我们可以使用 npm 包 grunt-config-dir 来简化这个过程。

grunt-config-dir 可以让我们将 Gruntfile.js 中的任务配置文件单独放在一个文件夹中，然后以任务名为文件名的方式命名，再通过 grunt.loadConfigDir() 方法引入。

2. 安装

要使用 grunt-config-dir，首先需要将其安装到项目中。可以使用 npm 命令来进行安装：

npm install grunt-config-dir --save-dev

3. 使用

• 在 Gruntfile.js 中引入 grunt-config-dir

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  grunt.loadConfigDir('tasks'); // 将任务配置文件夹放在了项目根目录下的 tasks 文件夹中
  grunt.registerTask('default', ['jshint', 'uglify']);
};

• 创建任务配置文件

将任务配置文件存放到一个文件夹中，如下所示：

tasks
  ├── clean.js
  ├── jshint.js
  └── uglify.js

任务配置文件的命名规则为 taskname.js，其中 taskname 就是在 Gruntfile.js 中定义的任务名，如下所示：

// JSHint 任务配置
module.exports = {
  options: {
    reportOutput: 'reports/jshint.xml'
  },
  all: ['src/**/*.js']
};

// Uglify 任务配置
module.exports = {
  build: {
    files: {
      'dist/js/index.min.js': ['src/js/index.js']
    }
  }
};

• 运行任务

在完成以上两个步骤之后，就可以通过以下命令运行 Grunt 任务了：

grunt

或者通过指定任务名来运行指定的任务：

grunt jshint
grunt uglify

4. 总结

使用 grunt-config-dir 可以让我们更好地组织 Grunt 任务配置文件，使得 Gruntfile.js 变得更加简洁和易于维护。同时，也可以通过将任务配置文件放在独立的 npm 包中来进行分享和复用，提高工作效率。

5. 示例代码

• Gruntfile.js

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  grunt.loadConfigDir('tasks');
  grunt.registerTask('default', ['jshint', 'uglify']);
};

• 任务配置文件 (tasks/clean.js)

module.exports = {
  dist: ['dist/**']
};

• 任务配置文件 (tasks/jshint.js)

module.exports = {
  options: {
    reportOutput: 'reports/jshint.xml'
  },
  all: ['src/**/*.js']
};

• 任务配置文件 (tasks/uglify.js)

module.exports = {
  build: {
    files: {
      'dist/js/index.min.js': ['src/js/index.js']
    }
  }
};

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79178