laravelエリクサーとは何ですか

Laravel Elixir は Gulp を統合する API で、Less、Sass、CoffeeScript をコンパイルし、Laravel プロジェクトでその他の多くの日常タスクを処理するためのシンプルなソリューションを提供します。これにより、上記の退屈なタスクを記述する手間が軽減され、効率的に作業時間が短縮されます。プログラミングの効率化。

このチュートリアルの動作環境: Windows 7 システム、Laravel バージョン 8.5、Dell G3 コンピューター。

Laravel は PHP 開発を簡単で楽しいものにすることを目的としており、Laravel 5 からは LaravelElixir という新しい API が提供されています。この API は Gulp を統合し、Laravel プロジェクトで Less、Sass、CoffeeScript をコンパイルし、その他の多くの日常タスクを処理するためのシンプルなソリューションを提供します。これにより、上記の面倒なタスクを作成する時間が短縮され、プログラミング効率が効果的に向上します。

Laravel Elixir は、Laravel アプリケーションで基本的な Gulp タスクを定義できるシンプルでスムーズな API を提供します。 Elixir は、多くの一般的な CSS および JavaScript プリプロセッサをサポートしており、テスト ツールも含まれています。 Elixir を使用すると、連鎖呼び出しを使用して、開発プロセスをスムーズに定義できます。たとえば、次のようになります。 Laravel Elixir が大好きですが、Laravel は Elixir の使用を強制しません。好きな自動開発プロセス ツールを自由に選択できます。

インストールと構成

#ノードのインストール

Elixir の使用を開始する前に、まずマシンがNode.js がインストールされていること。

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

デフォルトでは、Laravel Homestead には必要なものがすべて含まれていますが、Vagrant を使用していない場合は、単純に

Node のダウンロード ページ

(http: //nodejs.org/download/) をインストールします。 [関連する推奨事項:

laravel ビデオ チュートリアル

]Gulp

次に、Gulp をグローバルにインストールする必要があります (http : //gulpjs.com) NPM 拡張パッケージ:

node -v

#Laravel Elixir

最後のステップは次のとおりです。エリクサーをインストールしてみよう！新しくインストールされたすべての Laravel コードでは、ルート ディレクトリに package.json

という名前のファイルがあります。これは、PHP の代わりに Node の依存拡張パッケージを定義する点を除いて、

composer.json ファイルと同じように考えてください。次のコマンドを使用して、依存する拡張機能パッケージをインストールできます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>npm install --global gulp</pre><div class="contentsignin">ログイン後にコピー</div></div>

Windows システムで開発している場合、または Windows ホスト システムで VM を実行している場合は、

を実行する必要があります。 npm install

コマンドをインストールするときに

--no-bin-links をオンにします: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>npm install</pre><div class="contentsignin">ログイン後にコピー</div></div>

Elixir

# を実行します Elixir は Gulp 上に構築されているため、Elixir タスクを実行するには、コマンド ラインで gulp

コマンドを実行するだけです。コマンドに

--production フラグを追加すると、Elixir に CSS ファイルと JavaScript ファイルを圧縮するように指示します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>npm install --no-bin-links</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

リソース ファイルを変更するたびにコマンド ラインで gulp

コマンドを実行するのは非常に不便なので、

gulp watch コマンドを使用できます。このコマンドはコマンド ラインから実行され、リソース ファイルに変更がないか監視します。変更が行われると、スタイル

# を使用して、プロジェクト ルート ディレクトリ内の新しいファイル

// 运行所有任务...
gulp

// 运行所有任务并压缩所有 CSS 及 JavaScript...
gulp --production

gulpfile が自動的にコンパイルされます。 js

には、すべての Elixir タスクが含まれています。 Elixir タスクを連鎖させて、リソース ファイルのコンパイル方法を定義できます。

Less

#Less を CSS にコンパイルするには、less

メソッドを使用できます。

less メソッドは、Less ファイルが resources/assets/less フォルダーに保存されていることを前提としています。デフォルトでは、このサンプル タスクはコンパイルされた CSS を public/css/app.css に配置します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>gulp watch</pre><div class="contentsignin">ログイン後にコピー</div></div>

複数の Less ファイルを 1 つのファイルにマージすることもできます。 CSSファイル。同様に、生成された CSS は

public/css/app.css

:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>elixir(function(mix) { mix.less(&amp;#39;app.less&amp;#39;); });</pre><div class="contentsignin">ログイン後にコピー</div></div>

に配置されます。コンパイルされた CSS の出力場所をカスタマイズしたい場合は、 2 番目のパラメータを

less

メソッドに渡すことができます:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>elixir(function(mix) { mix.less([ &amp;#39;app.less&amp;#39;, &amp;#39;controllers.less&amp;#39; ]); });</pre><div class="contentsignin">ログイン後にコピー</div></div>

Sass

sass 方法让你能编译 Sass 至 CSS。Sass 文件的默认读取路径是 resources/assets/sass，你可以使用此方法：

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

同样的，如同 less 方法，你可以编译多个 Sass 文件至单个的 CSS 文件，甚至可以自定义生成的 CSS 的输出目录：

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

纯 CSS

如果你只是想将一些纯 CSS 样式合并成单个的文件，你可以使用 styles 方法。此方法的默认路径为 resources/assets/css 目录，而生成的 CSS 会被放置于 public/css/all.css：

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

当然，你也可以通过传递第二个参数至 styles 方法，将生成的文件输出至指定的位置：

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

Source Maps

Source maps 在默认情况下是开启的。因此，针对每个被编译的文件，同目录内都会伴随着一个 *.css.map 文件。这个文件能够让你在浏览器调试时，可以追踪编译后的样式选择器至原始的 Sass 或 Less 位置。

如果你不想为你的 CSS 生成 source maps，你可以使用一个简单的配置选项关闭它们：

elixir.config.sourcemaps = false;

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

使用脚本

Elixir 也提供了一些函数来帮助你使用 JavaScript 文件，像是编译 ECMAScript 6、编译 CoffeeScript、Browserify、压缩、及简单的串联纯 JavaScript 文件。

CoffeeScript

coffee 方法可以用于编译 CoffeeScript 至纯 JavaScript。coffee 函数接收一个相对于 resources/assets/coffee 目录的 CoffeeScript 文件名字符串或数组，接着在 public/js 目录生成单个的 app.js 文件：

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

Browserify

Elixir 还附带了一个 browserify 方法，给予你在浏览器引入模块及 ECMAScript 6 的有用的特性。

此任务假设你的脚本都保存在 resources/assets/js，并会将生成的文件放置于 public/js/main.js：

elixir(function(mix) {
    mix.browserify('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 至纯 JavaScript。此函数接收一个相对于 resources/assets/js 目录的文件数组，接着在 public/js 目录生成单个的 all.js 文件：

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

若要选择不同的输出位置，只需简单的指定你希望的路径作为第二个参数。该方法除了 Babel 的编译外，特色与功能同等于 mix.scripts()。

Scripts

如果你想将多个 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');
});

复制文件与目录

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，强迫浏览器加载全新的资源文件以取代提供的旧版本代码副本。你可以使用 version 方法让 Elixir 处理它们。

version 方法接收一个相对于 public 目录的文件名称，接着为你的文件名称加上唯一的哈希值，以防止文件被缓存。举例来说，生成出来的文件名称可能像这样：all-16d570a7.css：

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

在为文件生成版本之后，你可以在你的 视图 中使用 Laravel 的全局 elixir PHP 辅助函数来正确加载名称被哈希后的文件。elixir 函数会自动判断被哈希的文件名称：

<link rel="stylesheet" href="{{ elixir(&#39;css/all.css&#39;) }}">

为多个文件生成版本

你可以传递一个数组至 version 方法来为多个文件生成版本：

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

一旦该文件被加上版本，你需要使用 elixir 辅助函数来生成哈希文件的正确链接。切记，你只需要传递未哈希文件的名称至 elixir 辅助函数。此函数会自动使用未哈希的名称来判断该文件为目前的哈希版本：

<link rel="stylesheet" href="{{ elixir(&#39;css/all.css&#39;) }}">

BrowserSync

当你对前端资源进行修改后，BrowserSync 会自动刷新你的网页浏览器。你可以使用 browserSync 方法来告知 Elixir，当你运行 gulp watch 命令时启动 BrowserSync 服务器：

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

一旦你运行 gulp watch，就能使用连接端口 3000 启用浏览器同步并访问你的网页应用程序：http://homestead.app:3000。如果你在本机开发所使用的域名不是 homestead.app，那么你可以传递一个 选项 的数组作为 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 扩展功能允许你传递参数至你的自定义任务。举例来说，你可以编写一个扩展功能，像是：

// 文件：elixir-extensions.js

var 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 中像这样引入该文件：

// 文件：Gulpfile.js

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

相关推荐：最新的五个Laravel视频教程

以上がlaravelエリクサーとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。