資産を編集するLaravelの方法であるElixirに会います

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

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

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

重要な概念：

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

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

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

gulp：

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

laravel elixir：

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

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

コンパイルをコンパイルして、複数のファイルを連結して

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

複数のファイル：
• 、

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

• 引数：2番目の引数は、出力ディレクトリを指定します：

  フルパス：

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

  プレフィックス

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

  ./config Object：

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

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

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

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の機能を拡張します。

現実世界のシナリオ（laravel/angular）：

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

タスクの実行：

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

結論：

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

以上が資産を編集するLaravelの方法であるElixirに会いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。