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'])
});
如果运行该命令后，全端资源有缓存影响，我们可以在上边的配置文件中，对输出的资源加版本：
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">
</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
相关推荐
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18
81463166 2020-07-17