Laravel基礎教程——錬金薬

10835 ワード

Laravel Elixir(錬金薬)
概要
Laravel Elixirは、アプリケーション定義の基礎となるGulpタスクに簡単なAPIを提供します.Elixirは、いくつかの一般的なCSSおよびJavaScriptプリプロセッサおよびテストツールを提供しています.Elixirでは、チェーン呼び出しによってリソースパイプをスムーズに操作できます.例:

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

Gulpの使い方やリソースの事前コンパイルに疑問を持っている場合は、Laravel Elixirが好きになるに違いありません.実際には、アプリケーションを開発するときに使用しないこともできます.任意のリソースパイプツールを自由に使用したり、少しも使用したりすることができます.
インストール&スタート
インストールノード
Elixirに触れる前に、まずマシンにNodeがインストールされていることを確認する必要があります.

node -v

デフォルトでは、Laravel Homesteadには必要なものがすべて含まれています.実際、Vagrantを使用すると、ここでノードをインストールするのも簡単です.
Gulp
次に、NPMにGulpをグローバルにインストールする必要があります.

npm install --global gulp

バージョンコントローラを使用している場合は、npm shrinkwrapを実行してNPM依存をロックしたい場合があります.

npm shrinkwrap

このコマンドを実行したら.npm-shrinkwrap.jsonファイルをソースコントローラに自由に提出することができます.
Laravel Elixir
最後に残ったのはElixirのインストールです!新しいlaravelアプリケーションでは、ルートディレクトリにpackage.jsonファイルが見つかります.composer.jsonファイルと想像できますその違いは、PHPではなくNode依存を定義することです.これらの依存は、次のコマンドでインストールできます.

npm install

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

npm install --no-bin-links

Elixirの実行
ElixirはGulp上に構築されているので、Elixirタスクを実行するには、端末でgulpコマンドを実行するだけでいいです.--production IDをコマンドに追加すると、ElixirがCSSとJavaScriptファイルを圧縮するように指示します.

// Run all tasks...
gulp

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

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

gulp watch

スタイルファイルとの連携
プロジェクトのルートディレクトリには、すべてのElixirタスクを含むgulpfile.jsファイルがあります.Elixirタスクはチェーンで呼び出され、秩序ある伝達によってリソースファイルがコンパイルされます.
Less lessメソッドを使用してlessファイルをCSSにコンパイルできます.lessメソッドは、lessファイルがresources/assets/lessディレクトリに格納されていると仮定します.デフォルトでは、次の例では、タスクの実行結果は、コンパイルされたCSSファイルをpublic/css/app.cssに保存します.

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

複数のlessファイルを個別のCSSファイルにマージすることもできます.デフォルトでは、public/css/app.cssファイルにコンパイルされます.

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

コンパイルしたファイルをカスタムの場所に保存する場合は、lessメソッドに2番目のパラメータを渡すことができます.

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ファイルがresources/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のコンパイル、Browserifyモジュールのロード、スクリプトの圧縮、または簡単なオリジナルJavaScriptファイルの統合など、JavaScriptの作業に協力する方法もいくつか用意されています.これは問題ではありません.
CoffeeScript coffeeメソッドは、CoffeeScriptをオリジナルJavaScriptにコンパイルするために使用することができる.coffeeメソッドは、resources/assets/coffeeディレクトリにCoffeeScriptファイルを格納し、生成されたJavaScriptファイルをpublic/js/app.jsにマージすると仮定した文字列またはCoffeeScriptファイルの配列を受信してファイルのコンパイルを行うことができます.

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

Browserify
Elixirには、ブラウザで必要なモジュールのロードを提供し、ECMAScript 6とJSXを使用することができるbrowserifyメソッドも付属しています.
このタスクでは、スクリプトがresources/assets/jsに格納され、結果ファイルがpublic/js/main.jsに出力されると仮定します.2番目のパラメータを渡して出力の位置を指定することもできます.

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'
  ]); 
});

2番目のパラメータを渡して、異なる出力パスを指定できます.Babelコンパイルに加えて、その方法の機能はmix.scriptsと同じである.
Scripts
複数のJavaScriptファイルを1つのファイルにマージする場合は、scriptsメソッドを使用します.scriptsメソッドは、すべてのファイルがresouces/assets/jsディレクトリに対してデフォルトで結果をpublic/js/all.jsファイルにコンパイルすると仮定します.

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

複数のファイルを複数の異なるパスにマージする必要がある場合は、2番目のパラメータを指定した出力のパスとして複数回のチェーン呼び出しで渡すことができます.

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メソッドは、自動的にファイルの名前を判断します.

複数のファイルのバージョン化versionメソッドに配列を渡して、複数のファイルのバージョン化を行うことができます.

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

ファイルがバージョン化されると、laravelのelixirメソッドを使用してバージョン化されたlinkを生成できます.elixirヘルプメソッドにファイル名の接頭辞を渡すだけでいいことを覚えておいてください.hash後のファイル名を記入する必要はありません.ヘルプメソッドはhash後のファイル名を自動的に認識します.

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タスクのびし
のGulpタスクをElixirからびすがある .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')
})

カスタムモニタリング
カスタムタスクでファイルのをするモニタをするがあるは、モニタをします.2 のパラメータとしてをtaskメソッドにすことができます.

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

Elixir の
Elixir taskメソッドよりもがなは、のElixir をできます.Elixir では、カスタムタスクにパラメータをすことができます.たとえば、のようなをできます.

// File: elixir-extensions.js

var gulp = require('gulp')
var shell = require('gulp-shell')
var Elixir = require('laravel-elixir')

var Task = Elixir.Task

Elixi.extends('speak', function (message) {
  new Task('speak', function () {
    return gulp.src('').pipe(shell('say ' + message))
  })  
})

// mix.speak('Hello World')

こんなにです.タスクのは、メソッドにおいてTast にされる2 のパラメータとしてされるべきであることにしてください.Gulpfileのにしたり、したファイルにしたりすることもできます.たとえば、elixir-extendsions.jsにして、Gulpfileファイルにロードすることができます.

// File: Gulpfile.js

var 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/**')

Material DesignのMaterial Menuサイドスライドメニュー

css 3遷移アニメーションtransition