如何使用 Brunch 从 node_module 复制字体文件夹

Question

我正在关注此博客 post，但未复制字体。

http://cloudless.studio/articles/4-installing-font-awesome-from-npm-in-phoenix

描述

问题的本质是什么？不包括字体文件夹

预期行为

我希望包含字体文件夹

环境

早午餐：2.8.2
节点：v6.3.1
NPM：3.10.3
操作系统：OS X 10.11.6

`package.json` 内容

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "font-awesome": "^4.6.3",
    "google-maps": "^3.2.1",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "sass-brunch": "^2.6.3"
  },
  "devDependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.8.0",
    "clean-css-brunch": "~2.0.0",
    "css-brunch": "~2.0.0",
    "javascript-brunch": "~2.0.0",
    "uglify-js-brunch": "~2.0.1"
  }
}

brunch 配置内容

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: [
      /^(web\/static\/assets)/,
            /^(node_modules\/font-awesome)/
    ]
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static",
        'node_modules/font-awesome/fonts',
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

Answer 1

Don't categorize node_modules as 'assets' even if they match the regexp

https://github.com/brunch/brunch/blob/41f0c1f298bf94024621457c66caee74ea6d4ddc/CHANGELOG.md#brunch-26-apr-2-2016

Answer 2

Omin 的回答非常简洁，所以我会尝试提供更多细节。

从最新版本的 brunch 开始，通过 node_modules 可用的非 JavaScript 或 CSS 资产将不会被包含在 Brunch 中。

指南 here 指出，包含非 JavaScript 或 CSS 资产的唯一方法是手动复制它们。它建议通过 npm 中的 postinstall 挂钩来做到这一点。

那在您的 phoenix 应用程序中看起来如何？很简单..

在你的 package.json:

"scripts": { "postinstall": "cp -R node_modules/font-awesome/fonts web/static/assets/fonts" }

最终我认为这个解决方案不是很好，但它确实完成了工作。在文章中，您列出了一组 great alternatives 的作者链接，因为他们意识到他们的方法从 Brunch 2.8.2 开始不再有效。

使用 webpack 的替代方案似乎是最好的替代方案之一。 Phoenix 可以很好地与 webpack 一起工作，他们甚至提供了关于 how to do just that.

的简短指南

Answer 3

我使用了copycat-brunch插件来做到这一点，非常简单。在 brunch-config.js 文件中我做了：

plugins: {
    copycat: {
      fonts: [
        "node_modules/font-awesome/fonts",
        "node_modules/bootstrap/dist/fonts"
      ]
    }
}

并且字体已正确复制到 priv/static/fonts。它也适用于图像。

如何使用 Brunch 从 node_module 复制字体文件夹

How to copy fonts folder from node_module using Brunch

elixir

brunch

phoenix-framework

描述

预期行为

环境

`package.json` 内容

brunch 配置内容

如何使用 Brunch 从 node_module 复制字体文件夹

How to copy fonts folder from node_module using Brunch

elixir

brunch

phoenix-framework

描述

预期行为

环境

package.json 内容

brunch 配置内容

`package.json` 内容