【问题标题】:Gulp File Not Copying FontsGulp 文件不复制字体
【发布时间】:2016-02-09 19:24:31
【问题描述】:

我正在尝试通过资源/资产/字体/web-icons/ 目录移动我的一些字体,以便当我在布局中使用它们时,它会显示正确的图标。有人可以帮我理解当我为我的 gulp 文件运行它时,它不会将 web-icons 复制到我试图显示为 public/fonts/web-icons 的公共文件夹中。

var elixir = require('laravel-elixir');

elixir(function (mix) {

    /**
     * Copy needed files from Remark directories
     * to /public directory.
     */
    mix.copy('fonts/web-icons', 'public/fonts');

    mix.styles([
        'libs/bootstrap.css',
        'libs/bootstrap-extend.css',
        'libs/animsition.css',
        'libs/asScrollable.css',
        'libs/switchery.css',
        'libs/slidePanel.css',
        'libs/flag-icon.css',
        'site.min.css'
    ]);
});

【问题讨论】:

    标签: laravel laravel-5 gulp laravel-5.2 laravel-elixir


    【解决方案1】:

    根据Elixir documentation

    复制方法可用于将文件和目录复制到新位置。所有操作都相对于项目的根目录

    如果您的字体存储在您的resources 目录中,您应该将完整路径指定为第一个参数:

    mix.copy('resources/assets/fonts/web-icons', 'public/fonts/web-icons');
    

    【讨论】:

    • 太好了。但是,如果我有多个字体目录,比如一个很棒的字体目录,该怎么办。我假设我也会以同样的方式复制这些内容。那是对的吗?我也可以在我的布局文件中为图标的每个文件进行两次调用,还是可以使用 Elixir 将所有字体组合在一个文件中,或者我什至可以将它们与我的所有其他 css 一起放入一个附加文件中?
    • 是的,如果需要,您应该能够将多个文件复制到同一个目录。只需拨打多个mix.copy() 电话。字体文件并非旨在组合成一个文件。您必须像往常一样在 CSS 文件中单独引用它们。
    • 第二部分是什么意思?我如何将它用于 Elixir?
    • 使用自定义字体文件需要两个步骤:1) 将字体文件添加到您的网站(通过将它们从资源/复制到公共/),以及 2) 将自定义字体添加到您的CSS 通过@font-face。后者你不需要 Elixir。
    • 即使字体有 CSS 文件我也要使用 @font-face?还是应该导入 CSS 文件?