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

Laravel5.4 之前的版本用 gulp 的 laravel-elixir管理全段资源，Laravel5.4 版本开始使用webpack 的 Laravel Mix 来管理。

一、简介

Laravel Mix 提供了一套流式 API，使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链，你可以流式定义资源管道。例如：

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

如果你对如何开始使用 webpack 和前端资源编译感到困惑，那么你会爱上 Laravel Mix。不过，并不是强制要求在开发期间使用它。你可以自由选择使用任何前端资源管道工具，或者压根不使用。

二、webpack用法

Mix 是位于 webpack 顶层的配置层，所以要运行 Mix 任务你只需要在运行包含在默认 package.json 文件中的其中某个 NPM 脚本即可：

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

// 2.运行所有 Mix 任务...
npm run dev

// 运行所有 Mix 任务并减少输出...
// npm run production

// 3.监控前端资源改变
npm run watch

监控前端资源改变

npm run watch 命令将会持续在终端运行并监听所有相关文件的修改，Webpack将会在发现修改后自动重新编译资源文件：

npm run watch

webpack.mix.js 添加版本

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引入资源方法修改：

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

三、Laravel-elixir

旧版本用的是laravel-elixir处理的，只需执行gulp命令即可整合前端的资源

gulpfile.js为入口文件

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

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

如果运行该命令后，全端资源有缓存影响，我们可以在上边的配置文件中，对输出的资源加版本：

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

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

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

一、简介

二、webpack用法

三、Laravel-elixir

实例应用

相关推荐