[ Laravel 5.2 ドキュメント ] サービス -- フロントエンド リソースの統合: Laravel Elixir

1. はじめに

Laravel Elixir は、Laravel アプリケーションの基本的な Gulp タスクを定義するためのクリーンでスムーズな API を提供します。 Elixir は、いくつかの一般的な CSS および JavaScript プリプロセッサ、さらにはテスト ツールもサポートしています。 Elixir では、メソッド チェーンを使用して、リソース パイプラインをスムーズに定義できます。例:

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

Gulp の使用方法とフロントエンド リソースのコンパイル方法について混乱したことがある場合は、Laravel Elixir を気に入るはずです。ただし、開発中にこれを使用することは必須ではありません。フロントエンド リソース パイプライン ツールを使用することも、まったく使用しないことも自由です。

2. インストールと設定

2.1 ノードのインストール

Elixir を開始する前に、まず Node.js がマシンにインストールされていることを確認する必要があります。

node -v

デフォルトでは、Laravel Homestead には必要なものがすべて含まれていますが、Vagrant を使用しない場合は、Node のダウンロード ページにアクセスして簡単に Node をインストールできます。

2.2 Gulp

次に、Gulp をグローバル NPM パッケージとしてインストールする必要があります。

npm install --global gulp

2.3 Laravel Elixir

最後に、新しく追加されたLaravel がインストールされている場合、ルート ディレクトリに package.json ファイルがあります。このファイルはcomposer.jsonと同じですが、PHPの代わりにノードの依存関係を定義するために使用されます。次のコマンドを実行して必要な依存関係をインストールできます:

npm install

Windowsで開発している場合。 npm install コマンドを実行するときは、Bring --no-bin-links が必要です。

npm install --no-bin-links

3. Elixir を実行します

Elixir は Gulp に基づいています。したがって、Elixir コマンドを実行する必要があります。ターミナルで gulp コマンドを実行するだけです。コマンドに --production フラグを追加すると、CSS ファイルと JavaScript ファイルが最小化されます。

// Run all tasks...gulp// Run all tasks and minify all CSS and JavaScript...gulp --production

フロントエンド リソースの変更を監視します

フロントエンドが変更されるたびに gulp を実行するのは不便なので、リソースが変更された場合は、gulp watch コマンドを使用できます。このコマンドは常にターミナルで実行され、フロントエンド ファイルへの変更を監視します。変更が発生すると、新しいファイルが自動的にコンパイルされます。

gulp watch

4. CSS の処理

プロジェクトのルート ディレクトリにある gulpfile.js ファイルには、すべての Elixir タスクが含まれています。 Elixir タスクは、メソッド チェーンを使用してリンクし、フロントエンド リソースのコンパイル方法を定義できます。

4.1 Less

Less を CSS にコンパイルするには、less メソッドを使用できます。 less メソッドは、Less ファイルが resource/assets/less にあることを前提としています。デフォルトでは、この例のタスクはコンパイルされた CSS を public/css/app.css に配置します。

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

複数の Less ファイルを 1 つの CSS ファイルにコンパイルすることもできます。同様に、ファイルは public/css/app.css に配置されます:

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

コンパイルされたファイルの出力場所をカスタマイズしたい場合は、2 番目のパラメーターをless メソッドに渡すことができます:

elixir(function(mix) {    mix.less('app.less', 'public/stylesheets');});// Specifying a specific output filename...elixir(function(mix) {    mix.less('app.less', 'public/stylesheets/style.css');});

4.2 Sass

sass メソッドを使用すると、Sass を CSS にコンパイルできます。 Sass ファイルが resource/assets/sass に保存されていると仮定すると、このメソッドを次のように使用できます:

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

同様に、less メソッドと同様に、複数のスクリプトを 1 つの CSS ファイルにコンパイルしたり、カスタム結果 CSS の出力パス:

elixir(function(mix) {    mix.sass([        'app.scss',        'controllers.scss'    ], 'public/assets/css');});

4.3 ネイティブ CSS

複数のネイティブ CSS スタイル ファイルを 1 つのファイルにマージするだけの場合は、styles メソッドを使用できます。このメソッドに渡されるパスは、resources/assets/css ディレクトリに対する相対パスであり、結果の CSS は public/css/all.css に保存されます。

elixir(function(mix) {    mix.styles([        'normalize.css',        'main.css'    ]);});

もちろん、2 番目のパスを渡すこともできます。スタイルへのパラメータ 結果ファイルをカスタム パスに出力するメソッド:

elixir(function(mix) {    mix.styles([        'normalize.css',        'main.css'    ], 'public/assets/css');});

4.4 ソース マップ

デフォルトではソース マップが有効になっているため、コンパイルするすべてのファイルを同じディレクトリに置くことができます。以下で対応する *.css.map ファイルを見つけてください。この一致により、ブラウザでデバッグするときに、コンパイルされたスタイル セレクターを元の Sass 以下に戻すことができます。 Elixir It は、ECMAScript 6、CoffeeScript、Browserify のコンパイル、最小化、ネイティブ JavaScript ファイルの単純な接続など、JavaScript ファイルの処理に役立つ複数の機能も提供します。

5.1 CoffeeScript

elixir.config.sourcemaps = false;elixir(function(mix) {    mix.sass('app.scss');});

Coffee メソッドは、CoffeeScript をネイティブ JavaScript にコンパイルするために使用されます。このメソッドは、resources/assets/coffee ディレクトリに関連付けられた CoffeeScript ファイルの文字列または配列を受け取り、public/js ディレクトリに単一の app.js ファイルを生成します。

5.2 Browserify

Elixir は、browserify メソッドも提供します。これを使用すると、モジュールを導入してブラウザで EcmaScript 6 を使用できます。

このタスクは、スクリプトが resource/assets/js に保存され、結果のファイルが public/js/bundle.js に保存されることを前提としています。

Partialify およびBabelify、その他をインストールおよび追加できます:

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

5.3 Babel

babel メソッドを使用して、EcmaScript 6 および 7 をネイティブ JavaScript にコンパイルできます。このメソッドは、resources/assets/js ディレクトリに関連するファイルの配列を受け取り、public/js ディレクトリに単一の all.js を生成します。

elixir(function(mix) {    mix.babel([        'order.js',        'product.js'    ]);});

要选择不同的输出路径，只需将目标路径作为第二个参数传递给该方法。处了 Babel 编译之外， babel和 mix.scripts()的使用方法和功能差不多。

5.4 脚本

如果你有多个 JavaScript 文件想要编译成单个文件，可以使用 scripts方法。

scripts方法假定所有路径相对于 resources/assets/js目录，而且所有结果 JavaScript 默认存放在 public/js/all.js：

elixir(function(mix) {    mix.scripts([        'jquery.js',        'app.js'    ]);});

如果你需要将多个脚本集合合并到不同的文件，需要多次调用 scripts方法。该方法的第二个参数决定每个合并的结果文件名：

elixir(function(mix) {    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');});

如果你需要将多个脚本合并到给定目录，可以使用 scriptsIn方法。结果 JavaScript 会被存放到 public/js/all.js：

elixir(function(mix) {    mix.scriptsIn('public/js/some/directory');});

6、拷贝文件/目录

你可以使用 copy方法拷贝文件/目录到新路径，所有操作都相对于项目根目录：

elixir(function(mix) {    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');});elixir(function(mix) {    mix.copy('vendor/package/views', 'resources/views');});

7、版本号/缓存刷新

很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本。Elixir 可以使用 version方法为你处理这种情况。

version方法接收相对于 public目录的文件名，附加唯一hash到文件名，从而实现缓存刷新。例如，生成的文件名看上去是这样—— all-16d570a7.css：

elixir(function(mix) {    mix.version('css/all.css');});

生成版本文件后，可以在视图中使用 Elixir 全局的 PHP 帮助函数 elixir方法来加载相应的带hash值的前端资源， elixir函数会自动判断hash文件名：

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

给多个文件加上版本号

你可以传递一个数组到 version方法来为多个文件添加版本号：

elixir(function(mix) {    mix.version(['css/all.css', 'js/app.js']);});

一旦文件被加上版本号，就可以使用帮助函数 elixir来生成指向该hash文件的链接。记住，你只需要传递没有hash值的文件名到 elixir方法。该帮助函数使用未加hash值的文件名来判断文件当前的hash版本：

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

8、BrowserSync

BrowserSync 会在你修改前端资源后自动刷新浏览器，运行 gulp watch命令时你可以使用 browserSync方法告知Elixir 启动一个 BrowserSync 服务器：

elixir(function(mix) {    mix.browserSync();});

运行 gulp watch后，使用 http://homestead.app:3000访问应用来开启浏览器同步。如果你在本地开发中使用 homestead.app之外的其它域名，可以传递域名参数到 browserSync方法：

elixir(function(mix) {    mix.browserSync({        proxy: 'project.app'    });});

9、调用存在的Gulp任务

如果你需要从 Elixir 调用已存在的 Gulp 任务，可以使用 task方法。例如，假定你有一个调用时只是简单说几句话的 Gulp 任务：

gulp.task('speak', function() {    var message = 'Tea...Earl Grey...Hot';    gulp.src('').pipe(shell('say ' + message));});

如果你想要从 Elixir 中调用该任务，使用 mix.task方法并传递任务名作为该方法的唯一参数：

elixir(function(mix) {    mix.task('speak');});

自定义监控者

如果你需要注册一个监控器在每一次文件修改时都运行自定义任务，传递一个正则表达式作为 task方法的第二个参数：

elixir(function(mix) {    mix.task('speak', 'app/**/*.php');});

10、编写 Elixir扩展

如果你需要比 Elixir 的 task方法所提供的更加灵活的功能，可以创建自定义的 Elixir 扩展。Elixir 扩展允许你传递参数到自定义任务，例如，你可以像这样编写一个扩展：

// File: elixir-extensions.jsvar gulp = require('gulp');var shell = require('gulp-shell');var Elixir = require('laravel-elixir');var Task = Elixir.Task;Elixir.extend('speak', function(message) {    new Task('speak', function() {        return gulp.src('').pipe(shell('say ' + message));    });});// mix.speak('Hello World');

就是这样简单！注意你的特定Gulp逻辑应该放到闭包函数里作为第二个参数传递给 Task构造器。你可以将其放在 Gulpfile顶端，或者将其解析到自定义的任务文件。例如，如果你将扩展放在 elixir-extensions.js，可以在主 Gulpfile中像这样引入该文件：

// File: Gulpfile.jsvar elixir = require('laravel-elixir');require('./elixir-extensions')elixir(function(mix) {    mix.speak('Tea, Earl Grey, Hot');});

自定义监控器

如果你想要自定义任务在运行 gulp watch的时候被触发，可以注册一个监控器：

new Task('speak', function() {    return gulp.src('').pipe(shell('say ' + message));}).watch('./app/**');