Laravel基礎チュートリアル - 錬金術医学

Laravel Elixir (Alchemy)

はじめに

Laravel Elixir は、アプリケーションの基本的な Gulp タスクを定義するためのシンプルで流暢な API を提供します。 Elixir は、一般的に使用される CSS および JavaScript のプリプロセッサとテスト ツールをいくつか提供します。 Elixir を使用すると、呼び出しを連鎖させることでリソース パイプラインをスムーズに操作できます。例:

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

Gulp とリソースのプリコンパイルの使用方法を疑問に思ったことがあるなら、間違いなく Laravel Elixir の虜になるでしょう。実際、それを使用せずにアプリケーションを開発することもできます。リソース パイプライン ツールを使用するか、まったく使用しないかは自由です。

インストールと開始

Node のインストール

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

node -v

デフォルトでは、Laravel Homestead には必要なものがすべて含まれています。Vagrant を使用する場合は、ここで Node を非常に簡単にインストールすることもできます。

Gulp

次に、NPM を通じて Gulp をグローバルにインストールする必要があります:

npm install --global gulp

バージョン コントローラーを使用する場合は、npm shhrinkwrap を実行して NPM の依存関係をロックすることをお勧めします:

npm shrinkwrap

このコマンドを実行したら。 npm-shrinkwrap.json ファイルをソース管理に自由に送信できます。

Laravel Elixir

最後に残っているのは、Elixir をインストールすることです。新しいlaravelアプリケーションでは、ルートディレクトリにpackage.jsonファイルがあります。これは、composer.json ファイルのように考えることができます。違いは、PHP ではなくノードの依存関係を定義することです。これらの依存関係は、次のコマンドを使用してインストールできます:

npm install

Windows システムで開発している場合、または仮想マシンで Windows システムを実行している場合は、npm install コマンドを実行し、--no-bin-links オプションを追加する必要があります。 :

npm install --no-bin-links

Elixir を実行する

Elixir は Gulp 上に構築されているため、Elixir タスクを実行するには、ターミナルで gulp コマンドを実行するだけです。コマンドに --production フラグを追加すると、CSS ファイルと JavaScript ファイルを圧縮するように Elixir に指示します。

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

リソース ファイルの変更を監視する

ファイルが変更されるたびに gulp コマンドを再実行する必要がないようにするには、次のようにします。リソース ファイルの変更を監視するには、gulp watch コマンドを使用する必要があります。このコマンドはターミナルで引き続き実行されます。リソース ファイルへの変更が検出されると、新しいファイルが自動的にコンパイルされます:

gulp watch

スタイル ファイルの操作

プロジェクトのルート ディレクトリには、すべての Elixir タスクを含む gulpfile.js ファイルがあります。 Elixir タスクはチェーンで呼び出すことができ、リソース ファイルは規則正しい方法でコンパイルされます。

Less

less メソッドを使用すると、より少ないファイルを CSS にコンパイルできます。 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');});

sass

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

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

less メソッドと同じように、複数の Sass ファイルを 1 つの CSS ファイルにコンパイルしたり、コンパイルした結果をコンパイルしたりすることもできます。

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

ネイティブ CSS

複数の CSS ファイルを 1 つのファイルにマージしたい場合は、styles メソッドを使用できます。渡す必要があるファイルのパスは、resources/assets/css ディレクトリに対する相対パスであり、デフォルトのマージ結果は public/css/all.css に保存されます:

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

もちろん、パスをカスタマイズすることもできます。出力結果:

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

コンパイルマップ

コンパイルマップはすぐに利用可能です。したがって、すべてのコンパイル済みファイルについては、同じディレクトリに *.css.map ファイルがあります。このマップ ファイルを使用すると、ブラウザ内でプリコンパイルされたコードの場所を追跡できるため、デバッグが容易になります。

マップを生成したくない場合は、設定でオフにすることができます:

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

スクリプトの操作

Elixr は、ECMAPScript 6、CoffeeScript コンパイルなど、JavaScript の操作に役立つさまざまなメソッドも提供します、および Browserify モジュールの読み込み、スクリプトの圧縮、またはネイティブ JavaScript ファイルの単純なマージは問題ありません。

CoffeeScript

coffee メソッドは、CoffeeScript をネイティブ JavaScript にコンパイルするために使用できます。 Coffee メソッドは、CoffeeScript ファイルの文字列または配列を受け取ってファイルをコンパイルでき、CoffeeScript ファイルが resource/assets/coffee ディレクトリに保存されていることを前提としており、生成された JavaScript ファイルを public/js/app.js にマージします。

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

Browserify

Elixir 也附带了 browserify 方法，该方法可以在浏览器中给你提供你所需要模块的加载，并且允许你使用 ECMAScript 6 和 JSX。

这个任务假设你的脚本存放在 resources/assets/js 并且会将结果文件输出到 public/js/main.js。你也可以传递第二个参数来指定输出的位置：

elixir(function (mix) {  mix.browserify('main.js');});// Specifying a specific output filename...elixir(function(mix) {  mix.browserify('main.js', 'public/javascripts/main.js');});

而 Browserify 附带了 Partialify 和 Babelify 转换器，你可以自由的安装你所希望的：

npm install aliasify --save-dev

elixir.config.js.browserify.transformers.push({  name: 'aliasify',  options: {} });elixir(function (mix) {  mix.browserify('main.js');});

Babel

babel 方法可以使你编译 ECMAScript 6 和 7 和 JSX 到原生的 JavaScript。该方法接收一个文件列表相对于 resources/assets/js 目录的数组，并且在 public/js 目录中生成 all.js 文件：

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

你可以传递第二个参数来指定不同的输出路径。除了进行 Babel 编译，其方法的功能和 mix.scripts 一样。

Scripts

如果你想要将多个 JavaScript 文件合并到一个文件中，你可以使用 scripts 方法。

scripts 方法假设你所有的文件都相对于 resouces/assets/js 目录，并且会默认的将结果编译到 public/js/all.js 文件中：

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

如果你需要合并多个文件到多个不同的路径，你可以通过多次链式调用并传递第二个参数作为指定输出的路径：

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

如果你需要合并指定目录下的所有脚本文件，你可以使用 scriptIn 方法。合并的结果将存放到 public/js/all.js:

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

复制文件 & 目录

copy 方法可以用来复制文件和目录到一个新的位置。所有的操作都是相对于项目的根目录：

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

版本 / 缓存移除

对于许多开发者比较痛苦的事就是手动的对资源文件增加时间戳或者唯一的 token 标识来强迫浏览器重新加载新的资源文件。Elixir 可以通过 version 方法来帮你自动的完成这些。

version 方法接收文件名称相对于 public 目录，并且它会自动的为文件名增加一个独特的 hash，这样就可以自动的进行缓存清除了。比如，新生成的文件名看上去像这样：all-16d570a7.css:

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

在生成版本化的文件之后，你可以使用 laravel 的全局帮助函数 elixir 在你的视图文件中进行加载适当的 hashed 资源。elixir 方法会自动的判断文件的名称：

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

对多个文件进行版本化

你可以传递一个数组到 version 方法来进行多个文件的版本化：

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

一旦文件本版本化，你就可以使用 laravel 的 elixir 方法去生成版本化的 link。记住，你只需要向 elixir 帮助方法中传递文件名的前缀就可以了，并不需要填写 hash 后的文件名。帮助方法会自动的识别 hash 后的文件名：

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

BrowserSync

BrowserSync 可以在你的前端资源文件变更之后自动的刷新的你浏览器。你可以使用 browserSync 方法来指导 Elixir 当你运行 gulp watch 命令时启动 BrowserSync 服务：

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

一旦你运行 gulp watch，你可以通过访问你的应用使用 3000 端口来启用 browsersyncing: http://homestead.app:3000。如果你使用了 homestead.app 之外的域名作为本地开发的支持，你可以传递一个 options 数组到第一个参数到 browserSync 方法：

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

调用已存在的 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') })

编写 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.TaskElixi.extends('speak', function (message) {  new Task('speak', function () {    return gulp.src('').pipe(shell('say ' + message))  })  })// mix.speak('Hello World')

就是这么简单。你应该注意，任务的专有逻辑应该编写在方法中传递给 Tast 构造函数作为第二个参数。你也可以将其存放在 Gulpfile 的顶部或者提取到独立的扩展文件中。比如，你可以存放你的扩展到 elixir-extendsions.js，然后在你的 Gulpfile 文件中进行载入：

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

自定义监控者如果你希望在运行 gulp watch 时，你的自定义任务可以在文件变更时自动的触发，你可以注册一个监控者：

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