Grunt usemin 和 useminPrepare 多个目标

CSS

使用Grunt的usemin和useminPrepare插件可以帮助我们在前端开发过程中更有效地管理和优化我们的代码。这两个插件是兄弟插件，使用它们可以自动将HTML中的CSS和JavaScript文件合并、压缩，并且更新HTML文件中的引用路径。

useminPrepare是一个Grunt任务，它的主要作用是在构建过程中动态地生成一个配置文件，用于后续的代码优化和更新。我们可以在Gruntfile.JS中配置useminPrepare任务，并指定需要处理的HTML文件路径。

例如，我们有一个index.html文件，其中引用了多个CSS和JavaScript文件。我们可以通过以下配置来使用useminPrepare插件：

Javascript
useminPrepare: {
  html: 'app/index.html',
  options: {
    dest: 'dist'
  }
}

这里，我们指定了HTML文件的路径和输出目录。useminPrepare任务会自动解析HTML文件中的注释块，并生成一个配置文件，用于后续的代码优化。

usemin是另一个Grunt任务，它的作用是根据useminPrepare生成的配置文件，对CSS和JavaScript文件进行合并、压缩，并且更新HTML文件中的引用路径。

我们可以在Gruntfile.JS中配置usemin任务，并指定需要处理的HTML文件路径和生成的配置文件路径。

例如，我们可以使用以下配置来使用usemin插件：

Javascript
usemin: {
  html: ['dist/index.html']
}

在这个例子中，我们指定了需要处理的HTML文件路径。usemin任务会根据useminPrepare生成的配置文件，对CSS和JavaScript文件进行合并、压缩，并且更新HTML文件中的引用路径。

使用Grunt的usemin和useminPrepare插件，我们可以更方便地管理和优化前端代码。通过自动生成配置文件和自动更新HTML文件中的引用路径，我们可以减少手动操作的时间和错误，并且提高代码的性能和可维护性。

案例代码：

Javascript
module.exports = function(grunt) {
  grunt.initConfig({
    useminPrepare: {
      html: 'app/index.html',
      options: {
        dest: 'dist'
      }
    },
    usemin: {
      html: ['dist/index.html']
    }
  });
  grunt.loadNpmTasks('grunt-usemin');
  grunt.registerTask('default', [
    'useminPrepare',
    'usemin'
  ]);
};

这是一个使用Grunt的usemin和useminPrepare插件的简单配置示例。在这个例子中，我们将HTML文件路径和生成的配置文件路径都指定为了相对于当前目录的路径。然后，我们加载了grunt-usemin插件，并注册了一个default任务，该任务依次执行useminPrepare和usemin任务。

通过运行这个Grunt任务，我们可以在dist目录下生成优化后的HTML文件，并且CSS和JavaScript文件都已经合并、压缩，并且更新了HTML文件中的引用路径。

Grunt的usemin和useminPrepare插件是非常有用的工具，可以帮助我们更方便地管理和优化前端代码。使用它们，我们可以自动化地进行代码合并、压缩和更新引用路径的操作，提高代码的性能和可维护性。