ElixirでLaravelワークフローを合理化：包括的なガイド

多くのWeb開発者は、さまざまなツールを利用してワークフローを強化し、無駄のないコードベースを維持しています。ただし、CSSやJavaScript Preprocessorsなどのコンピレーションを必要とするツールは、プロセスを遅くすることがあります。 これは、GulpやElixirのようなタスクランナーが輝く場所です。 このチュートリアルでは、特にLaravelフレームワーク內(nèi)でGulpタスク管理を簡素化するために設計されたJeffrey Wayによって構築されたユーザーフレンドリーなnode.jsツールであるElixirを探索します。

このガイドは、Laravelの資産編集に焦點を當てていますが、より広い適用性にも觸れています。

重要な概念：

Elixirは、Clean Node.jsインターフェイス內(nèi)でGulp Taskをラッピングすることにより、アセットコンパイルを合理化します。

インストールにはnode.js、gulp、および

パッケージ（npm経由）が必要です。
• Elixirはデフォルトのソースと出力パスを使用しますが、これらはメソッド引數(shù)または構成オブジェクトを介してカスタマイズ可能です。
組み込みサポートには、CSSプリプロセッサコンパイル、JavaScript処理、および資産バージョン化が含まれます。
• カスタムタスクは、ElixirのAPIを使用して簡単に作成され、Laravelのブレードテンプレートとシームレスに統(tǒng)合されます。 Elixirはワークフローを自動化および合理化し、さまざまなCSSやJavaScriptの前処理をサポートし、Laravel開発効率を高めます。 laravel-elixir
• 前提條件とインストール：
• node.js：
• gulpがnode.js內(nèi)で実行されるので不可欠 Homesteadの改善されたユーザーはすでにこれを持っています

gulp：

elixirはgulpに依存しています。 NPMを使用してグローバルにインストール：（Homestead経由ですでにインストールされていない限り）。

laravel elixir：

laravelプロジェクトには、通常
1. in が含まれます。プロジェクトのrootディレクトリ內(nèi)にを使用してインストールします。 非laravel環(huán)境の場合：
2. npm install --global gulp開始する前に：
3. elixirはソースファイル（、laravel-elixir、package.jsonなど）がnpm installに存在し、デフォルトでnpm install laravel-elixir --saveに出力されます。

elixirタスクは、gulpfile.js関數(shù)を使用してelixir関數(shù)を使用して定義されています。 mix アレイまたはワイルドカードを渡す

コンパイルをコンパイルして、複數(shù)のファイルを連結して

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

または

に連結します。 単一のファイル名は、同じ名前の出力ファイルになります。 これらのデフォルトはカスタマイズ可能です。app.css app.js

実用的な例：
コンパイルを減らす：
コンパイル

elixir(function(mix) {
    mix.less("styles.less");
});

?

。 SASSコンピレーションはresources/assets/less/styles.lessを使用します。 Elixirはベンダーのプレフィックスを処理します public/css/styles.css mix.sass()

coffeescriptのコンパイル：
から

elixir(function(mix) {
    mix.coffee(['controllers.coffee', 'services.coffee']);
});

resources/assets/coffee/高度なテクニック：public/js/app.js

複數(shù)のファイル：
• 、

  、単一のファイル、ワイルドカード、配列、または引數(shù)なし（デフォルトディレクトリ內(nèi)のすべてのファイルに対して）。 sass() less()coffee()カスタムソース/出力パス：

• 引數(shù)：2番目の引數(shù)は、出力ディレクトリを指定します：

  フルパス：

    elixir(function(mix) {
      mix.less(['file1.less', 'file2.less'], 'custom/path');
    });

  プレフィックス

プロジェクトルートに関連するパスを指定する。
• >

  ./config Object：

  優(yōu)先メソッドは、Elixirのオブジェクトで
およびを変更することです（後述）。

• css.outputjs.output連結：JavaScriptを使用し、CSSの場合はconfigを使用します。 これらは、コンピレーション方法と同様に、ソースと出力パスの引數(shù)を受け入れます。

  および
指定されたディレクトリ內(nèi)のすべてのファイルを連結します。

bladeにjade：scripts()メソッドは、Jadeをコンパイルしてテンプレートをブレードします styles() scriptsIn() stylesIn()

ファイルバージョン化：

ファイル名にハッシュを追加し、キャッシュの問題を防ぎます。 ブレードテンプレートの

ヘルパーを使用して、バージョンされたファイルを參照してください。 laravel-elixir-jadenpm install laravel-elixir-jade@0.1.8 --save-dev構成：jade()elixirの動作は、

オブジェクトを介して制御されます。

オブジェクトを

で変更するか、プロジェクトルートで

ファイルを作成してデフォルトをオーバーライドします。 mix.version()elixir()カスタムタスク：

カスタムGULPタスクを作成するために

メソッドを使用してElixirの機能を拡張します。

現(xiàn)実世界のシナリオ（laravel/angular）：

このセクションでは、Laravel/AngularプロジェクトのElixirの機能を示す完全な例を詳しく説明しています。 Elixirの構成、CompeeScriptのコンパイル、JadeをBladeにコンパイルし、資産をバージョンすることをカバーしています。 完全なgulpfile.jsが提供され、メソッドチェーンを紹介します。

タスクの実行：

すべてのElixirタスクを?qū)g行するgulp実行。 gulp watch変更のファイルを監(jiān)視し、タスクを自動的に実行します。 個々のタスクを?qū)g行できます（例：gulp less）。 マイニフィスにgulp --productionを使用します。

結論：

Elixirは、GULPタスク管理を簡素化し、一般的なアセットコンパイルタスクにユーザーフレンドリーなインターフェイスを提供します。 Laravelとの柔軟性、カスタマイズ可能性、統(tǒng)合により、開発ワークフローを合理化するための貴重なツールになります。 このガイドは包括的な概要を提供しますが、高度な機能についてはElixirのドキュメントのさらなる調(diào)査をお勧めします。

以上が資産を編集するLaravelの方法であるElixirに會いますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。