覆盖 Laravel Elixir 配置

Laravel Elixir 对于您的 Laravel 项目来说非常棒，并且它提供了在 Laravel 应用程序中“正常工作”的默认设置。它运行得非常好，以至于我喜欢使用它来管理所有资产处理，即使是在非 Laravel 的应用程序中也是如此。

例如，我想创建一个新的 WordPress 主题，并发现一个名为 underscores 的主题脚手架系统，它带有 SASS 文件，但没有 gulp。我决定这将是一个很好的概述，说明如何设置 Elixir 来处理不常见的结构。

创建您的主题

从 underscores 网站，您可以通过填写几个文本字段来快速生成一个新主题。

这将生成一个类似于此的下载文件

正如您所见，“sass”和“js”目录位于主目录中，而不是像 Laravel 一样位于“assets”中。让我们安装 Elixir 并更改它以使其正常工作。

安装 Elixir

安装 Elixir 就像拉取 npm 模块一样简单。我只是复制并粘贴了 Elixir 仓库中的 package.json 文件，以确保我拥有所需的一切。

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-webpack-official": "^1.0.2"
  }
}

接下来，通过复制默认值来创建一个 gulpfile.js。这些将被调整

const elixir = require('laravel-elixir');
 
elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

调整 Gulpfile 并更改配置

Gulpfile 正在查找 app.scss 和 app.js，它们将位于 resources/assets/sass 和 resources/assets/js 中。由于我们没有这些位置，因此让我们调整我们的文件以指向 style.scss，并将 webpack 替换为 scripts 方法来连接和缩小 js

elixir((mix) => {
    mix.sass('style.scss')
       .scripts(['customizer.js', 'navigation.js', 'skip-link-focus-fix.js']);
});

现在，我们需要告诉 Elixir 这些文件在哪里。您可以打开 elixir/src/config.js 来查看所有选项，覆盖它们就像这样简单

elixir.config.assetsPath = './';
elixir.config.publicPath = './';
elixir.config.css.outputFolder = './';
 
elixir((mix) => {
    mix.sass('style.scss')
       .scripts(['customizer.js', 'navigation.js', 'skip-link-focus-fix.js']);
});

设置完所有这些之后，它将查找 “sass” 文件夹中的 style.scss 和 “js” 文件夹中的 JavaScript。通过将所有路径设置为主题根目录，它将从路径中删除默认的 “resources/assets/”。

Elixir 配置中的任何其他项目都可以像这样被覆盖，这为您提供了在任何您正在处理的项目中使用它的很大灵活性。