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

发表于 更新于
年纪越大,越没有人会原谅你的穷

简介

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

1
2
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
2
3
4
5
6
7
8
9
10
11
12
// 1.安装package.json 包
npm install

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

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

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

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

webpack.mix.js 添加版本

1
2
3
4
5
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引入资源方法修改：

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

Laravel-elixir

旧版本用的是laravel-elixir处理的，只需执行gulp命令即可整合前端的资源,gulpfile.js为入口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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'])
});

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

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

在前端 HTML 页面引入打包后的 css 或 js 资源时，可以用全局的方法 elixir这样写：

1
2
3
4
5
6
7
<!-- 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命令：

1
gulp

https://segmentfault.com/a/1190000008666954