如何使用 Grunt 将主文件复制到特定文件夹答案

【问题标题】：How copy mains file to specific folder with Grunt如何使用 Grunt 将主文件复制到特定文件夹
【发布时间】：2014-12-05 20:17:05
【问题描述】：

我的 .bowerrc 是这样的：

{
  "directory": "components",
  "strict-ssl": true
}

在 bower.json 我有：

"dependencies": {
  "jquery": "~2.1.1",
  "bootstrap": "~3.3.1"
}

当我运行 bower install 时，它会将 jquery 和 bootstrap 下载到 components 文件夹。

我正在尝试使用 Grunt 生成如下所示的结构，但是，我找不到可以执行此操作的插件。

build /
      js/jquery.min.js
      js/bootstrap.min.js
      css/bootstrap.min.css
      fonts/glyphicons-halflings-regular.eot
      fonts/glyphicons-halflings-regular.svg
      fonts/glyphicons-halflings-regular.ttf
      fonts/glyphicons-halflings-regular.woff

复制这些文件后，我想压缩（我知道如何执行此步骤）构建文件夹中的内容。

【问题讨论】：

您也可以使用grunt-contrib-concat合并文件以减少网络请求。

标签： javascript gruntjs bower

【解决方案1】：

您可以使用grunt-bower-taks 来实现此目的。此任务将负责使用 bower 下载文件并将它们放置在您需要的结构中。
您将需要指定与您需要的文件夹结构相匹配的自定义布局。这是通过添加自定义布局函数作为任务选项的一部分来完成的：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    bower: {
      install: {
        options: {
            targetDir: "./build",
            verbose: true,
            layout: function(type, component, source) {
              return type;
            }
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-bower-task');
};

由于您想要的不仅仅是“主要”文件，因此您还需要在 bower.json 中添加 exportsOverride 部分：

"exportsOverride": {
    "jquery": {
      "js": "dist/*.js"
    },
    "bootstrap": {
      "js": "dist/js/*.js",
      "css" : "dist/css/*.css",
      "fonts" : "dist/fonts/*.*"
    }
  }

【讨论】：