Laravel5.4新特性-Laravel-mix和laravel-elixir比較

時間 2019-11-10

標籤 laravel5.4 laravel 特性 mix elixir 比較简体版

原文原文鏈接

Laravel5.4 以前的版本用 gulp 的 laravel-elixir管理全段資源，Laravel5.4 版本開始使用webpack 的 Laravel Mix 來管理。javascript

1、簡介

Laravel Mix 提供了一套流式 API，使用一些通用的 CSS 和 JavaScript 預處理器爲 Laravel 應用定義 Webpack 構建步驟。經過簡單的方法鏈，你能夠流式定義資源管道。例如：php

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

若是你對如何開始使用 Webpack 和前端資源編譯感到困惑，那麼你會愛上 Laravel Mix。不過，並非強制要求在開發期間使用它。你能夠自由選擇使用任何前端資源管道工具，或者壓根不使用。css

2、webpack用法

Mix 是位於 Webpack 頂層的配置層，因此要運行 Mix 任務你只須要在運行包含在默認 package.json 文件中的其中某個 NPM 腳本便可：html

// 1.安裝package.json 包
npm install

// 2.運行全部 Mix 任務...
npm run dev

// 運行全部 Mix 任務並減小輸出...
// npm run production

// 3.監控前端資源改變
npm run watch

監控前端資源改變前端

npm run watch 命令將會持續在終端運行並監聽全部相關文件的修改，Webpack將會在發現修改後自動從新編譯資源文件：java

npm run watch

webpack.mix.js 添加版本webpack

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

前端app.blade.php引入資源方法修改：laravel

<!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    
 <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}"></script>

3、Laravel-elixir

舊版本用的是laravel-elixir處理的，只需執行gulp命令便可整合前端的資源web

gulpfile.js爲入口文件npm

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

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

若是運行該命令後，全端資源有緩存影響，咱們能夠在上邊的配置文件中，對輸出的資源加版本：

mix.version(['app.js', 'app.css'])

在前端 HTML 頁面引入打包後的 css 或 js 資源時，能夠用全局的方法 elixir這樣寫：

<!-- Styles -->
    // <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">

 <!-- Scripts -->
    // <script src="{{ asset('js/app.js') }}"></script>
     <script src="{{ elixir('js/app.js') }}"></script>

而後再執行gulp命令：

gulp

實例應用

在 laravel5.4 中應用 select2 插件:
將 select2.min.css 和 select2.min.js文件通過 gulp編譯後生成app.css 和 app.js打包後的文件,而後在總視圖佈局文件/layouts/app.blade.php中應用，

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @if (Auth::guest())
                            <li><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="{{ route('register') }}">Register</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </nav>
        @include('shared.messages')
        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ elixir('js/app.js') }}"></script>
    @yield('js')
    <script>
        $('#flash-overlay-modal').modal();
    </script>
</body>
</html>

在底部引用app.js代碼，並添加區塊佈局 yield('js'),在繼承該總佈局頁面時，有關應用js代碼的須要放在 @section('js') 如select2 @endsection中，以下面的這個子頁面 create.blade.php。

@extends('layouts.app')

@section('content')
    @include('vendor.ueditor.assets')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">發佈問題</div>

                    <div class="panel-body">
                        @include("shared.errors")
                        <form action="/questions" method="post">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="title">標題</label>
                                <input type="text" name="title" value="{{ old('title') }}" class="form-control" placeholder="標題" id="title">
                            </div>

                            <div class="form-group">
                                <select class="js-example-basic-multiple  form-control" multiple="multiple">
                                    <option value="AL">Alabama</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                            </div>

                            <!-- 編輯器容器 -->
                            <label for="title">內容</label>
                            <script id="container" name="body" style="height:200px" type="text/plain">
                                {!! old('body') !!}
                            </script>
                            <button class="btn btn-success pull-right" type="submit">發佈問題</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 實例化編輯器 -->
    @section('js')
    <script type="text/javascript">
        var ue = UE.getEditor('container', {
            toolbars: [
                ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'link', 'insertimage', 'fullscreen']
            ],
            elementPathEnabled: false,
            enableContextMenu: false,
            autoClearEmptyNode:true,
            wordCount:false,
            imagePopup:false,
            autotypeset:{ indent: true,imageBlockLine: 'center' }
        });
        ue.ready(function() {
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 設置 CSRF token.
        });

        // select2,若是沒有預加載ready，不然不會出現
        $(document).ready(function () {
            $(".js-example-basic-multiple").select2();
        });
    </script>
    @endsection

@endsection

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。