本章將會(huì)繼續(xù)講如何構(gòu)建前臺(tái)內(nèi)容的呈現(xiàn)。我們將調(diào)整首頁(yè)罚拟，顯示有關(guān)博客文章評(píng)論的信息台诗，并通過(guò)將標(biāo)題內(nèi)容加入到 URL 中來(lái)提升 SEO 效果完箩。
還將在側(cè)邊欄添加 2 個(gè)常見(jiàn)的博客組件標(biāo)簽云和最新評(píng)論。我們將了解如何為模板引擎進(jìn)行擴(kuò)展拉队，以及如何管理網(wǎng)站中靜態(tài)資源文件弊知。

顯示首頁(yè)評(píng)論數(shù)

到目前為止首頁(yè)會(huì)列出最新的文章列表，但并不會(huì)列出跟這些文章相關(guān)的評(píng)論粱快。既然我們已經(jīng)建立了評(píng)論模型秩彤，可以獲取文章相關(guān)的數(shù)據(jù)，那么可以回到首頁(yè)來(lái)呈現(xiàn)文章的評(píng)論信息事哭。我們更新一下首頁(yè)的模板漫雷，打開(kāi)位于 resources/views/pages/index.blade.php 的文件，根據(jù)以下所示調(diào)整相應(yīng)內(nèi)容：

<footer class="meta">
    <p>Comments: {{ $post->comments()->count() }}</p>
    <p>Posted by <span class="highlight">{{ $post->author }}</span> at {{ $post->created_at->toDateTimeString() }}</p>
    <p>Tags: <span class="highlight">{{ $post->tags }}</span></p>
</footer>

這里 $post->comments()->count() 是通過(guò)模型關(guān)系返回的結(jié)果慷蠕，count() 即是返回對(duì)應(yīng)關(guān)系模型的記錄數(shù)珊拼。
瀏覽器訪問(wèn) http://localhost:8000/ 你將會(huì)看到每篇的評(píng)論數(shù)量已經(jīng)能夠顯示出來(lái)了。

構(gòu)建側(cè)邊欄

目前 larablog 的側(cè)邊欄看起來(lái)有點(diǎn)空流炕。我們將要給這個(gè)側(cè)邊欄增加兩個(gè)常用的部件，標(biāo)簽云和最新評(píng)論仅胞。

標(biāo)簽云

標(biāo)簽云是顯示文章標(biāo)簽的一種方式每辟，將常用的標(biāo)簽加粗顯示。要達(dá)到這個(gè)目的干旧，我們需要獲取所有日志文章的標(biāo)簽渠欺。

讓我們?cè)?Post 類中新增方法來(lái)實(shí)現(xiàn)。更新 app/Post.php椎眯，添加如下方法：

public static function getTags()
{
    $blogTags = Post::lists('tags');

    $tags = [];
    foreach ($blogTags as $blogTag) {
        $tags = array_merge(explode(',', $blogTag), $tags);
    }

    return array_map(function ($item){ return trim($item); }, $tags);

    return $tags;
}

public static function getTagweights($tags)
{
    $tagWeights = [];

    if (empty($tags)) {
        return $tagWeights;
    }

    foreach($tags as $tag) {
        $tagWeights[$tag] = isset($tagWeights[$tag]) ? $tagWeights[$tag] + 1 : 1;
    }

    // Shuffle the tags
    uksort($tagWeights, function() {
        return rand() > rand();
    });

    $max = max($tagWeights);

    // Max of 5 weights
    $multiplier = ($max > 5) ? 5 / $max : 1;
    foreach ($tagWeights as &$tag) {
        $tag = ceil($tag * $multiplier);
    }

    return $tagWeights;
}

標(biāo)簽是已逗號(hào)分隔的方式存儲(chǔ)在數(shù)據(jù)庫(kù)中挠将，我們需要一個(gè)方式將它們分離并形成一個(gè)數(shù)組。這在 getTags() 方法中實(shí)現(xiàn)了编整。然后 getTagWeights() 方法可以使用這個(gè)數(shù)組來(lái)統(tǒng)計(jì)標(biāo)簽的權(quán)重根據(jù)他們?cè)跀?shù)組中的熱門程度計(jì)算展示值舔稀。標(biāo)簽經(jīng)過(guò)隨機(jī)排序以顯示在頁(yè)面上。

現(xiàn)在有能力產(chǎn)生標(biāo)簽云了掌测，我們需要將它顯示出來(lái)内贮。我們建立一個(gè)視圖組件用于呈現(xiàn)標(biāo)簽云。

視圖組件就是在視圖被渲染前汞斧，會(huì)被調(diào)用的閉包或類方法夜郁。如果你想在每次渲染某些視圖時(shí)綁定數(shù)據(jù)，視圖組件可以幫你把這樣的程序邏輯都組織到同一個(gè)地方粘勒。
更多內(nèi)容請(qǐng)參考 視圖組件

新建一個(gè)服務(wù)提供者 app/Providers/ComposerServiceProvider.php竞端，我們通過(guò)它增加相應(yīng)的視圖組件。其內(nèi)容為：

<?php

namespace App\Providers;

use App\Post;
use Illuminate\Support\ServiceProvider;

class ComposerServiceProvider extends ServiceProvider
{
    /**
     * 在容器內(nèi)注冊(cè)所有綁定庙睡。
     *
     * @return void
     */
    public function boot()
    {
        view()->composer('*.sidebar', function ($view) {
            $view->with('tags', Post::getTagweights(Post::getTags()));
        });
    }

    /**
     * 注冊(cè)服務(wù)提供者事富。
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

接下來(lái)技俐，我們要將這個(gè)新建的服務(wù)提供者加入到在 config/app.php 配置文件內(nèi)的 providers 數(shù)組中。

'providers' => [
    // ...

    App\Providers\ComposerServiceProvider::class,
],

在 ComposerServiceProvider 中你會(huì)注意到赵颅，視圖的 composer 方法可以接受 * 作為通配符虽另，這里是對(duì) *.sidebar 引入了側(cè)邊欄的視圖附加相應(yīng)的視圖內(nèi)容〗让可以看到捂刺，我們給相應(yīng)的視圖附加了 tags 數(shù)據(jù)。

打開(kāi)側(cè)邊欄的視圖 resources/views/partials/sidebar.blade.php募寨，將內(nèi)容修改為以下所示：

@section('sidebar')
    <section class="section">
        <header>
            <h3>Tag Cloud</h3>
        </header>
        <p class="tags">
            @forelse($tags as $tag => $weight)
                <span class="weight-{{ $weight }}">{{ $tag }}</span>
            @empty
                <p>There are no tags</p>
            @endforelse
        </p>
    </section>
@show

這個(gè)模板不難理解族展，將標(biāo)簽數(shù)據(jù)循環(huán)輸出，根據(jù)標(biāo)簽的權(quán)重顯示不同的粗細(xì)樣式拔鹰。

最后我們給標(biāo)簽云添加相應(yīng)的樣式仪缸，新建樣式表 public/css/sidebar.css，內(nèi)容如下：

.sidebar .section { margin-bottom: 20px; }
.sidebar h3 { line-height: 1.2em; font-size: 20px; margin-bottom: 10px; font-weight: normal; background: #eee; padding: 5px;  }
.sidebar p { line-height: 1.5em; margin-bottom: 20px; }
.sidebar ul { list-style: none }
.sidebar ul li { line-height: 1.5em }
.sidebar .small { font-size: 12px; }
.sidebar .comment p { margin-bottom: 5px; }
.sidebar .comment { margin-bottom: 10px; padding-bottom: 10px; }
.sidebar .tags { font-weight: bold; }
.sidebar .tags span { color: #000; font-size: 12px; }
.sidebar .tags .weight-1 { font-size: 12px; }
.sidebar .tags .weight-2 { font-size: 15px; }
.sidebar .tags .weight-3 { font-size: 18px; }
.sidebar .tags .weight-4 { font-size: 21px; }
.sidebar .tags .weight-5 { font-size: 24px; }

我們找到應(yīng)用的基礎(chǔ)布局模板 resources/views/layouts/app.blade.php 將側(cè)邊欄的樣式引入進(jìn)來(lái)：

@section('stylesheets')
    <link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
    <link href="{{ asset('css/blog.css') }}" type="text/css" rel="stylesheet" />
    <link href="{{ asset('css/sidebar.css') }}" type="text/css" rel="stylesheet" />
@show

如果你現(xiàn)在刷新頁(yè)面查看網(wǎng)站將看到標(biāo)簽云可以正確顯示在你們面前列肢。它根據(jù)不同的標(biāo)簽的權(quán)重來(lái)顯示為相應(yīng)的大小恰画，你可以試試通過(guò)數(shù)據(jù)庫(kù)修改文章中的標(biāo)簽數(shù)據(jù)來(lái)看看是否有相應(yīng)的變化。

最近評(píng)論

現(xiàn)在標(biāo)簽云已經(jīng)添加到了側(cè)邊欄瓷马，接下來(lái)我們要將最近評(píng)論加入其中拴还。

在 Comment 類，文件 app/Comment.php 中加入以下代碼：

public static function getLatest($limit = 10) 
{
    return Comment::orderBy('id', 'DESC')->take($limit)->get();
}

然后欧聘，我們和標(biāo)簽云的做法一樣片林，來(lái)增加視圖組件，打開(kāi) app/Providers/ComposerServiceProvider.php怀骤，修改 boot 方法：

<?php

namespace App\Providers;

use App\Post;
use App\Comment;
use Illuminate\Support\ServiceProvider;

class ComposerServiceProvider extends ServiceProvider
{
    /**
     * 在容器內(nèi)注冊(cè)所有綁定费封。
     *
     * @return void
     */
    public function boot()
    {
        view()->composer('*.sidebar', function ($view) {
            $view->with('tags', Post::getTagweights(Post::getTags()));
            $view->with('latestComments', Comment::getLatest());
        });
    }

    /**
     * 注冊(cè)服務(wù)提供者。
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

最后我們需要再次修改視圖模板蒋伦，加入最新評(píng)論的顯示代碼弓摘。打開(kāi)文件 resources/views/partials/sidebar.blade.php，修改為如下內(nèi)容：

@section('sidebar')
    <section class="section">
        <header>
            <h3>Tag Cloud</h3>
        </header>
        <p class="tags">
            @forelse($tags as $tag => $weight)
                <span class="weight-{{ $weight }}">{{ $tag }}</span>
            @empty
                <p>There are no tags</p>
            @endforelse
        </p>
    </section>

    <section class="section">
        <header>
            <h3>Latest Comments</h3>
        </header>
        @forelse($latestComments as $latestComment)
            <article class="comment">
                <header>
                    <p class="small"><span class="highlight">{{ $latestComment->user }}</span> commented on
                        <a href="/posts/{{ $latestComment->post->id }}#comment-{{ $latestComment->id }}">
                            {{ $latestComment->post->title }}
                        </a>
                        [<em>{{ $latestComment->created_at->toDateTimeString('Y-m-d h:iA') }}</time></em>]
                    </p>
                </header>
                <p>{{ $latestComment->comment }}</p>
                </p>
            </article>
        @empty
            <p>There are no recent comments</p>
        @endforelse
    </section>
@show

至此凉敲，如果你打開(kāi)瀏覽器刷新頁(yè)面衣盾，你將會(huì)看到最近的評(píng)論位于標(biāo)簽云的下方，也能正確的顯示出來(lái)了爷抓。

模板引擎擴(kuò)展

到目前為止势决，我們一直以標(biāo)準(zhǔn)的日期格式顯示博客的評(píng)論日期。一個(gè)更好的方法將是顯示評(píng)論被發(fā)布多久蓝撇，如 3 小時(shí)前發(fā)布果复。我們可以向評(píng)論模型中添加一個(gè)方法來(lái)達(dá)到目的，但是我們?cè)趧e的模型也可能要用到這個(gè)功能渤昌，因此我們通過(guò)擴(kuò)充模版引擎來(lái)實(shí)現(xiàn)會(huì)更好虽抄。Laravel 的模板引擎 Blade 提供擴(kuò)展接口可以讓我們定義自己的模板命令走搁。

我們將創(chuàng)建一個(gè)新的模板標(biāo)記，可以使用如下：

@datetime($comment->created_at)

添加擴(kuò)展

打開(kāi)文件 app/Providers/AppServiceProvider.php迈窟，編輯內(nèi)容如下所示：

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        \Blade::directive('datetime', function($expression) {
            return "<?php echo with{$expression}->diffForHumans(); ?>";
        });
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

我們通過(guò)自定義命令私植，使用 directive 方法注冊(cè)命令。當(dāng) Blade 編譯器遇到該命令時(shí)车酣，它將會(huì)帶參數(shù)調(diào)用提供的回調(diào)函數(shù)曲稼。with 輔助函數(shù)會(huì)簡(jiǎn)單地返回指定的對(duì)象或值，并允許使用便利的鏈?zhǔn)秸{(diào)用湖员。最后此命令生成的 PHP 會(huì)是：

<?php echo with($var)->diffForHumans(); ?>

更多詳細(xì)內(nèi)容可以閱讀文檔 擴(kuò)充 Blade

更新視圖

現(xiàn)在我們可以更新側(cè)邊欄上評(píng)論的顯示時(shí)間贫悄，使用剛建立的模板命令來(lái)讓時(shí)間更為直觀。打開(kāi)文件 resources/views/partials/sidebar.blade.php娘摔，將輸出時(shí)間信息的標(biāo)記部分更改更改為如下所示：

[<em>@datetime($latestComment->created_at)</time></em>]

如果你現(xiàn)在訪問(wèn)首頁(yè)窄坦，刷新頁(yè)面，你可以看到最新評(píng)論已經(jīng)可以更佳直觀的顯示評(píng)論發(fā)布的時(shí)間凳寺。

讓我們也來(lái)更新一下文章的評(píng)論列表的視圖鸭津，打開(kāi)位于 resources/views/comments/index.blade.php，將其內(nèi)容更新為如下所示：

@forelse($comments as $i => $comment)
    <article class="comment {{ $i % 2 == 0 ? 'odd' : 'even' }}" id="comment-{{ $comment->id }}">
        <header>
            <p><span class="highlight">{{ $comment->user }}</span> commented {{ $comment->created_at->format('l, F j, Y') }}</p>
        </header>
        <p>{{ $comment->comment }}</p>
    </article>
@empty
    <p>There are no comments for this post. Be the first to comment...</p>
@endforelse()

自此我們通過(guò)擴(kuò)展模板引擎讓評(píng)論的發(fā)布時(shí)間顯示更為直觀友好了肠缨。

格式化 URL

目前每個(gè)博客文章的網(wǎng)址只是通過(guò)編號(hào)表示來(lái)顯示曙博，雖然從功能的角度來(lái)完全可以接受，但它對(duì) SEO 并不好怜瞒。例如 url http://localhost:8000/1 并沒(méi)有提供關(guān)于博客內(nèi)容的任何信息，像 http://localhost:8000/a-day-with-laravel 則會(huì)好得多般哼。為了達(dá)到這個(gè)目的吴汪，我們將把這個(gè)博客標(biāo)題格式化并將其作為這個(gè) URL 的一部分。標(biāo)題將刪除所有非 ASCII 字符蒸眠，并用 - 替換它們漾橙。

更新路由

首先，我們打開(kāi)路由配置文件 app/Http/routes.php楞卡，增加新的文章詳情頁(yè)的路由配置霜运，在 routes.php 中增加如下配置：

Route::get('{id}/{slug}', 'PostsController@show');

格式化

緊接著我們打開(kāi) Post 類，文件位于 app/Post.php 新增如下方法：

public static function slugify($text)
{
    // replace non letter or digits by -
    $text = preg_replace('#[^\\pL\d]+#u', '-', $text);

    // trim
    $text = trim($text, '-');

    // transliterate
    if (function_exists('iconv'))
    {
        $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);
    }

    // lowercase
    $text = strtolower($text);

    // remove unwanted characters
    $text = preg_replace('#[^-\w]+#', '', $text);

    if (empty($text))
    {
        return 'n-a';
    }

    return $text;
}

模型和數(shù)據(jù)遷移

由于我們要通過(guò)格式化的標(biāo)題也能訪問(wèn)文章信息蒋腮，所以我們要儲(chǔ)相應(yīng)的格式化信息淘捡，那么我們就需要給文章表增加一個(gè)新的字段 slug。
我們通過(guò)一下命令建立一個(gè)新的遷移腳本池摧，目的是向 posts 表中添加這個(gè)新的字段：

php artisan make:migration add_slug_to_posts_table --table=posts

然后打開(kāi)遷移文件 xxxx_xx_xx_xxxxxx_add_slug_to_posts_table.php焦除，更改其內(nèi)容為如下所示：

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class AddSlugToPostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('posts', function (Blueprint $table) {
            $table->string('slug');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('posts', function (Blueprint $table) {
            $table->dropColumn('slug');
        });
    }
}

讓我們執(zhí)行腳本遷移讓改動(dòng)立即生效：

php artisan migrate

為了讓設(shè)置文章標(biāo)題時(shí)能自動(dòng)添加格式化的 slug 信息，我們可以給模型 Post 定義一個(gè)屬性修改器作彤，打開(kāi) app/Post.php膘魄，添加如下方法：

public function setTitleAttribute($value)
{
    $this->attributes['title'] = $value;
    $this->attributes['slug'] = self::slugify($value);
}

我們定義了 title 的屬性修改器乌逐，會(huì)當(dāng)我們嘗試在模型上設(shè)置 title 的值時(shí)自動(dòng)調(diào)用此修改器。
我們利用這個(gè)屬性修改器來(lái)自動(dòng)設(shè)置 slug 的值创葡。

接下來(lái)浙踢，我們通過(guò)數(shù)據(jù)庫(kù)客戶端訪問(wèn)數(shù)據(jù)庫(kù)，將 posts 和 comments 表清空（truncate 操作)灿渴。
然后重新執(zhí)行我們之前的數(shù)據(jù)填充操作：

php artisan db:seed

這樣我們的我們重新生成了 Post 數(shù)據(jù)洛波，可以看到數(shù)據(jù)庫(kù)中每條文章的 slug 字段都已經(jīng)自動(dòng)生成好了。

更新視圖中的路由信息

接下來(lái)逻杖，我們要對(duì)首頁(yè)的文章和側(cè)邊欄的文章鏈接進(jìn)行修改奋岁，使用我們的格式化 URL 來(lái)替換原來(lái)的鏈接地址。
打開(kāi) resources/views/pages/index.blade.php荸百，找到博客文章鏈接的位置修改為如下內(nèi)容：

<header>
    <h2><a href="/{{ $post->id }}/{{ $post->slug }}">{{ $post->title }}</a></h2>
</header>

緊接著我們打開(kāi)側(cè)邊欄的視圖文件 resources/views/partials/sidebar.blade.php闻伶，將文章鏈接修改為如下所示：

<header>
    <p class="small"><span class="highlight">{{ $latestComment->user }}</span> commented on
        <a href="/{{ $latestComment->post->id }}/{{ $latestComment->post->slug }}#comment-{{ $latestComment->id }}">
            {{ $latestComment->post->title }}
        </a>
        [<em>@datetime($latestComment->created_at)</time></em>]
    </p>
</header>

最后我們還需要評(píng)論控制器 CommentsController 作出一些調(diào)整，目的是讓用戶發(fā)表評(píng)論后跳轉(zhuǎn)到相應(yīng)的評(píng)論所在位置够话。
打開(kāi) app/Http/Controllers/CommentsController.php蓝翰，修改 store 方法為如下所示：

public function store(CommentRequest $request, $postId)
{
    $post = Post::findOrFail($postId);

    $comment = new Comment;
    $comment->user = $request->get('user');
    $comment->comment = $request->get('comment');
    $comment->post()->associate($post);
    $comment->save();

    return redirect("/{$post->id}/{$post->slug}#comment-{$comment->id}");
}

現(xiàn)在你可以刷新瀏覽器，訪問(wèn)首頁(yè)來(lái)點(diǎn)擊博客文章看看我們是否將格式化的標(biāo)題信息加入了到了 URL 當(dāng)中女嘲，同時(shí)我們?cè)诎l(fā)布完評(píng)論之后畜份，也會(huì)立即定位到所在評(píng)論信息。

資源管理

在我們的項(xiàng)目開(kāi)發(fā)中涉及到一些靜態(tài)資源的管理欣尼，比如 css爆雹，js 的管理。這時(shí)我們可以利用到 Laravel Elixir愕鼓。

Laravel Elixir 是官方推薦的靜態(tài)資源管理工具钙态，此工具合理的定義項(xiàng)目的開(kāi)發(fā)流程，尤其針對(duì)前端開(kāi)發(fā)菇晃，解決了很多通用問(wèn)題册倒，如；Sass 編譯器磺送，靜態(tài)資源文件的版本與緩存清除等驻子。

它提供了簡(jiǎn)潔流暢的 API，讓你能夠在你的 Laravel 應(yīng)用程序中定義基本的 Gulp 任務(wù)估灿。Elixir 支持許多常見(jiàn)的 CSS 與 JavaScrtip 預(yù)處理器崇呵，甚至包含了測(cè)試工具。

安裝及配置

在開(kāi)始使用 Elixir 之前甲捏，你必須先確定你的機(jī)器上有安裝 Node.js演熟。

Node 可以通過(guò)下面的鏈接下載：
https://nodejs.org/en/download/

Mac 系統(tǒng)的用戶建議通過(guò) brew install node 進(jìn)行安裝。

安裝完成后，可以通過(guò)下面命令查看：

node -v

接著芒粹，你需要全局安裝 Gulp 的 NPM 擴(kuò)展包：

npm install --global gulp

最后的步驟就是安裝 Elixir兄纺，進(jìn)入你項(xiàng)目目錄，你會(huì)發(fā)現(xiàn)根目錄有個(gè)名為 package.json 的文件化漆。想像它就如同你的 composer.json 文件估脆，只不過(guò)它定義的是 Node 的依賴擴(kuò)展包，而不是 PHP 的座云。

編輯 package.json 文件疙赠，將內(nèi)容修改為如下所示：

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^4.0.0"
  }
}

執(zhí)行下面的命令安裝依賴包：

npm install

優(yōu)化 NPM 安裝 Gulp 和 Laravel Elixir 的下載速度

樣式表

我們將位于 public/css 目錄下的 screen.css，blog.css朦拖，sidebar.css 文件移動(dòng)到 resources/assets/css 下圃阳。
接下來(lái)我們做的是將多個(gè) CSS 樣式合并成單個(gè)的文件，我們打開(kāi)項(xiàng)目目錄下的 gulpfile.js 定義 Elixir 任務(wù)：

elixir(function(mix) {
    mix.styles([
        'screen.css',
        'blog.css',
        'sidebar.css'
    ]);
});

styles 方法的默認(rèn)讀取路徑為 resources/assets/css 目錄璧帝，而生成的 CSS 會(huì)被放置于 public/css/all.css捍岳。
可以通過(guò)傳遞第二個(gè)參數(shù)至 styles 方法，將生成的文件輸出至指定的位置:
mix.styles(['normalize.css','main.css'], 'public/assets/css');

在項(xiàng)目目錄下執(zhí)行 gulp 來(lái)執(zhí)行 Elixir 任務(wù)睬隶，我們可以看到我們生成了預(yù)期的 public/css/all.css 文件锣夹。

打開(kāi)我們的視圖布局模板文件 resources/views/layouts/app.blade.php，可以修改 stylesheets 部分的內(nèi)容苏潜，使用我們合并后的 CSS 文件：

@section('stylesheets')
    <link href="{{ asset('css/all.css') }}" type="text/css" rel="stylesheet" />
@show

JS

至于 Javascript银萍，雖然我們這里沒(méi)有涉及到 JS 的內(nèi)容，不過(guò)如果你之后也需要對(duì) JS 有合并的需求也可以這么添加 Elixir 任務(wù)：

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

scripts 方法假設(shè)所有的路徑都相對(duì)于 resources/assets/js 目錄恤左，且默認(rèn)會(huì)將生成的 JavaScript 放置于 public/js/all.js贴唇。

壓縮

當(dāng)你應(yīng)用發(fā)布到生產(chǎn)環(huán)境時(shí)，你可以通過(guò)下面的命令來(lái)壓縮所有 CSS 及 JavaScript：

// 運(yùn)行所有任務(wù)并壓縮所有 CSS 及 JavaScript...
gulp --production

壓縮這些靜態(tài)資源的好處最明顯的就是縮小其文件大小提高傳輸相應(yīng)速度飞袋。

其它

這里我們只是使用了 Elixir 來(lái)做簡(jiǎn)單的合并和壓縮滤蝠，它的功能不止這些，Elixir 支持許多常見(jiàn)的 CSS 與 JavaScrtip 預(yù)處理器授嘀，甚至包含了測(cè)試工具。使用鏈?zhǔn)秸{(diào)用锣险，Elixir 還能讓你流暢地定義開(kāi)發(fā)流程蹄皱。這非常適合前端的開(kāi)發(fā)流程化，是個(gè)不可多得好工具芯肤。
更多內(nèi)容還請(qǐng)關(guān)注相應(yīng)的文檔內(nèi)容 Laravel Elixir巷折。

總結(jié)

通過(guò)這個(gè)部分的實(shí)踐，我們又接觸到了 Laravel 的許多新內(nèi)容崖咨，包括 Laravel 視圖組件以及靜態(tài)資源文件的管理锻拘。我么還對(duì)主頁(yè)進(jìn)行了改進(jìn)，并在側(cè)邊欄添加了一些組件。

在下一章我們繼續(xù)探討測(cè)試相關(guān)的內(nèi)容署拟。我們將使用 PHPUnit 進(jìn)行單元和功能測(cè)試婉宰。我們還會(huì)編寫模擬 Web 請(qǐng)求的功能測(cè)試，填寫表單和點(diǎn)擊鏈接推穷，然后檢查返回的響應(yīng)心包。