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

187J3X1 发布于2019-06-27 15:44 / 517人阅读

摘要：之前的版本用的管理全段资源，版本开始使用的来管理。不过，并不是强制要求在开发期间使用它。发布问题标题标题编辑器容器内容发布问题实例化编辑器设置如果没有预加载，否则不会出现

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

三、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这样写：

然后再执行gulp命令：

gulp

实例应用

在 laravel5.4 中应用 select2 插件:
将 select2.min.css 和 select2.min.js文件经过 gulp编译后生成app.css 和 app.js打包后的文件,然后在总视图布局文件/layouts/app.blade.php中应用，




    
    
    

    
    

    {{ config("app.name", "Laravel") }}

    
    

    
    


    
        
            
                

                    
                    

                    
                    
                        {{ config("app.name", "Laravel") }}
                    
                

                
                    
                    
                         
                    

                    
                    
                        
                        @if (Auth::guest())
                            Login
                            Register
                        @else
                            
                                
                                    {{ Auth::user()->name }} 
                                

                                
                                    
                                        
                                            Logout
                                        

                                        
                                            {{ csrf_field() }}
                                        
                                    
                                
                            
                        @endif
                    
                
            
        
        @include("shared.messages")
        @yield("content")
    

    
    
    @yield("js")

在底部引用app.js代码，并添加区块布局 yield("js"),在继承该总布局页面时，有关应用js代码的需要放在 @section("js") 如select2 @endsection中，如下面的这个子页面 create.blade.php。

@extends("layouts.app")

@section("content")
    @include("vendor.ueditor.assets")
    
        
            
                
                    发布问题

                    
                        @include("shared.errors")
                        
                            {{ csrf_field() }}
                            
                                标题
                                
                            

                            
                                
                            

                            
                            内容
                            
                            
                        
                    
                
            
        
    

    
    @section("js")
    
    @endsection

@endsection

云服务器 GPU云服务器新特性新特性整理新特性总结 PHP新特性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/22516.html

Laravel 5.4 Mix执行 npm run dev时报错，提示cross-env not f

本文来自pilishen.com----原文链接; 欢迎作客我们的php&Laravel学习群：109256050《Npm Debug Series》是我们课程laravel实战实战系列课程的扩展阅读篇，虽然视频中我们已经将npm install过程中的常见问题及解决方案都说了，但是鉴于npm的问题相对频繁，有随时查阅之需，故有此系列文章。最近很多小伙伴在使用最新的laravel5.4来学习我...

NusterCache 2019-06-28 18:25 评论0 收藏0
Laravel学习笔记三-前端工作流

摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...

liuchengxu 2019-06-27 15:14 评论0 收藏0
Laravel优秀扩展包整理

摘要：本文整理上国内相对较常用及以上版本的扩展包代码生成文档对象云存储文档消息闪存文档编辑器代码提示文档文档文档图片处理文档微信开发文档语言包文档验证码文档社会化登陆文档系统日志文档前端构建工具文档跨域资源共享文档基于的用户认本文整理Github上国内相对较常用Laravel5及以上版本的扩展包 laravel-generator（代码生成） Github：https://github....

lykops 2019-07-01 12:21 评论0 收藏0
Laravel优秀扩展包整理

摘要：本文整理上国内相对较常用及以上版本的扩展包代码生成文档对象云存储文档消息闪存文档编辑器代码提示文档文档文档图片处理文档微信开发文档语言包文档验证码文档社会化登陆文档系统日志文档前端构建工具文档跨域资源共享文档基于的用户认本文整理Github上国内相对较常用Laravel5及以上版本的扩展包 laravel-generator（代码生成） Github：https://github....

kel 2019-08-30 15:52 评论0 收藏0
Laravel优秀扩展包整理

摘要：本文整理上国内相对较常用及以上版本的扩展包代码生成文档对象云存储文档消息闪存文档编辑器代码提示文档文档文档图片处理文档微信开发文档语言包文档验证码文档社会化登陆文档系统日志文档前端构建工具文档跨域资源共享文档基于的用户认本文整理Github上国内相对较常用Laravel5及以上版本的扩展包 laravel-generator（代码生成） Github：https://github....

LdhAndroid 2019-08-01 16:13 评论0 收藏0