Was ist Laravel-Elixier?

Laravel Elixir ist eine API, die Gulp integriert und eine einfache Lösung zum Kompilieren von Less, Sass, CoffeeScript in Laravel-Projekten und zur Abwicklung vieler anderer täglicher Aufgaben bietet, wodurch die Zeit zum Schreiben der oben genannten mühsamen Aufgaben verkürzt und die Programmiereffizienz effektiv verbessert wird.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Laravel Version 8.5, Dell G3-Computer.

Der Zweck von Laravel besteht darin, die PHP-Entwicklung einfach und angenehm zu gestalten. Daher wird ab Laravel 5 eine neue API namens LaravelElixir bereitgestellt. Diese API integriert Gulp und bietet eine einfache Lösung zum Kompilieren von Less, Sass und CoffeeScript in Laravel-Projekten und zur Abwicklung vieler anderer täglicher Aufgaben, wodurch die Zeit zum Schreiben der oben genannten mühsamen Aufgaben verkürzt und die Programmiereffizienz effektiv verbessert wird.

Laravel Elixir bietet eine einfache und reibungslose API, mit der Sie grundlegendeGulp-Aufgaben in Ihrer Laravel-Anwendung definieren können. Elixir unterstützt viele gängige CSS- und JavaScript-Präprozessoren und enthält sogar Testtools. Mithilfe von Kettenaufrufen können Sie mit Elixir den Entwicklungsprozess reibungslos definieren, zum Beispiel:

elixir(function(mix) { mix.sass('app.scss') .coffee('app.coffee'); });

Wenn Sie jemals verwirrt waren, was den Einstieg in Gulp und das Kompilieren von Ressourcendateien angeht, werden Sie sich in Laravel Elixir verlieben, aber in Laravel Zwingt Sie nicht dazu, es zu verwenden. Mit Elixir können Sie Ihre bevorzugten Tools für den automatisierten Entwicklungsprozess verwenden.

Installation und Konfiguration#

Node installieren

Bevor Sie Elixir verwenden, müssen Sie zunächst sicherstellen, dass Node.js auf Ihrem Computer installiert ist.

node -v

Standardmäßig enthält Laravel Homestead alles, was Sie brauchen. Wenn Sie Vagrant jedoch nicht verwenden, können Sie zur Installation einfach dieNode-Downloadseite(http://nodejs.org/download/) durchsuchen. [Verwandte Empfehlungen:Laravel-Video-Tutorial]

Gulp#

Als nächstes müssen Sie das NPM-Erweiterungspaket von Gulp (http://gulpjs.com) global installieren:

npm install --global gulp

Laravel Elixir#

Der letzte Schritt ist die Installation von Elixir! In jedem neu installierten Laravel-Code finden Sie im Stammverzeichnis eine Datei mit dem Namenpackage.json. Stellen Sie es sich wie Ihre Dateicomposer.jsonvor, mit der Ausnahme, dass sie das Abhängigkeitserweiterungspaket von Node anstelle von PHP definiert. Sie können den folgenden Befehl verwenden, um Abhängigkeitserweiterungspakete zu installieren:package.json的文件。想像它就如同你的composer.json文件，只不过它定义的是 Node 的依赖扩展包，而不是 PHP 的。你可以使用以下的命令安装依赖扩展包：

npm install

如果你是在 Windows 系统上或在 Windows 主机系统上运行 VM 进行开发，你需要在运行npm install命令时将--no-bin-links开启：

npm install --no-bin-links

运行 Elixir#

Elixir 是创建于 Gulp 之上，所以要运行你的 Elixir 任务，只需要在命令行运行gulp命令。在命令增加--production标示会告知 Elixir 压缩你的 CSS 及 JavaScript 文件：

// 运行所有任务... gulp // 运行所有任务并压缩所有 CSS 及 JavaScript... gulp --production

监控资源文件修改

因为每次修改你的资源文件之后在命令行运行gulp命令会相当不便，因此你可以使用gulp watch命令。此命令会在你的命令行运行并监控资源文件的任何修改。当发生修改时，新文件将会自动被编译：

gulp watch

使用样式#

项目根目录的gulpfile.js包含你所有的 Elixir 任务。Elixir 任务可以被链式调用起来，以定义你的资源文件该如何进行编译。

Less#

要将 Less 编译为 CSS，你可以使用less方法。less方法会假设你的 Less 文件被保存在resources/assets/less文件夹中。默认情况下，此例子的任务会将编译后的 CSS 放置于public/css/app.css：

elixir(function(mix) { mix.less('app.less'); });

你可能会想合并多个 Less 文件至单个 CSS 文件。同样的，生成的 CSS 会被放置于public/css/app.css：

elixir(function(mix) { mix.less([ 'app.less', 'controllers.less' ]); });

如果你想自定义编译后的 CSS 输出位置，可以传递第二个参数至less

elixir(function(mix) { mix.less('app.less', 'public/stylesheets'); }); // 指定输出的文件名称... elixir(function(mix) { mix.less('app.less', 'public/stylesheets/style.css'); });

elixir(function(mix) { mix.sass('app.scss'); });