Laravel Mix 初探

简介

针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API,用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤,基本可以使到 80% 的webpack用例都变得简单明了。

Laravel 上面的安装

Laravel 5.4 以上默认已经安装了 Laravel Mix,

在开发机配置了nodenpm的基础上,仅仅只需要运行下面的命令即可安装:

npm install

如果你是在window开发机上面进行开发,那么,你可能还需要在运行上面命令的时候带上--no-bin-links

npm install --no-bin-links

什么时候该使用 --no-bin-links?

配置 Laravel Mix

现在在根目录下就应该可以看到一个webpack.mix.js文件,他是 Laravel Mix 的配置文件,和我们平时看到的 webpack.config.js 长得不太一样,大部分的时间我们都放在配置这个文件上面。

    let mix = require('laravel-mix');

    /*
     |--------------------------------------------------------------------------
     | Mix Asset Management
     |--------------------------------------------------------------------------
     |
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel application. By default, we are compiling the Sass
     | file for your application, as well as bundling up your JS files.
     |
     */

    mix.js('src/app.js', 'dist/')
       .sass('src/app.scss', 'dist/');

上面三行代码,就是预先配置好的 mix, 它目前可以做的事情就是编译 src/app.jsdist/, src/app.scssdist/, 看起来非常简洁优雅。

Laravel Mix 还有更多配置:

// 完整的API
// mix.js(src, output);
// mix.react(src, output); <-- 常用!和上面 mix.js() 一样, 但是注册的是 React Babel 编译。
// mix.extract(vendorLibs);  <-- 提取依赖库
// mix.sass(src, output);
// mix.standaloneSass('src', output); <-- 更快,但是和 webpack 无关
// mix.fastSass('src', output); <-- mix.standaloneSass()的别名.
// mix.less(src, output);
// mix.stylus(src, output);
// mix.postCss(src, output, [require('postcss-some-plugin')()]);
// mix.browserSync('my-site.dev'); <-- 可以自动监控你的文件变化,并将更改注入浏览器,而无需手动刷新
// mix.combine(files, destination);
// mix.babel(files, destination); <-- 和 mix.combine() 一样, 但是包含了 Babel 编译.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); <-- 启用 sourcemaps
// mix.version(); <-- 启用打版本号,需要在html中修改
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- 将传递给 Webpack 的 ProvidePlugin.
// mix.webpackConfig({}); <-- 覆盖 webpack.config.js,而不需要直接编辑webpack.config.js。
// mix.then(function () {}) <--每次Webpack完成构建时都会触发
// mix.options({
//   extractVueStyles: false, <-- 将.vue组件样式提取到文件,而不是内联。
//   processCssUrls: true, <-- 理/优化相关样式表url()。设置为false,如果你不想让他们触摸。
//   purifyCss: false, <-- 删除未使用的CSS选择器。
//   uglify: {}, <-- Uglify特定的选项 https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
//   postCss: [] <-- Post-CSS 选项: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });

构建

配置完成后,有几个命令可以开始构建项目。

npm run dev

这个命令仅仅用于产生一个生产就绪的构建文件,并没有把我们静态资源进行压缩,不可发布到线上。

npm run watch

基本和npm run dev构建出来的文件一样,但是可以监测到静态资源文件的变化并且自动构建更新静态资源。

这里可以配合Browsersync,它可以自动监控你的文件变化,并将更改注入浏览器,而无需手动刷新。你可以通过调用 mix.browserSync() 方法来启用这个功能的支持:

// my-domain.dev 为开发域名
 mix.browserSync('my-domain.dev');
// 或者...
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.dev'
});

注意:当你使用 npm run watch 命令的时候 Browsersync 会启动一个localhost:3000的服务。现在,当你修改webpack.mix.js文件监控下的静态资源或者 Laravel 的 PHP 文件时,浏览器会即时刷新页面以响应你的更改。但是这里 Browsersync 会进行 my-domain.dev________的转发,所以为了方便开发,需要手动先配置一个 my-domain.dev 或者开发机的其他端口,然后localhost:3000 的请求就会发送到 my-domain.dev

npm run hot

当一段JavaScript被改变时,不仅会刷新页面,还会在浏览器中维护组件的当前状态。

npm run production

将编译我们所有的静态资源,并产生一个生产就绪的构建。它将运行所有的Mix 任务,并且会压缩文件输出。

基本例子

让我们用一些小的 CSS 和 JS 创建一个简单的 HTML。假设我们的目录结构如下所示:

app/
|__public/ #webroot
|    |__js/  # JS文件
|    |__css/  # CSS文件
|    |__media/  # 图片或者其他媒体资源
|
|__resorces/
|    |__scripts/ # 源JS文件
|    |__styles/ # 源Sass文件爱你
|
|__src/ # 我们希望将文件夹“按原样”复制到公共目录中的文件夹。
|
package.json
webpack.mix.js

接下来写一个简单的 Laravel Mix 配置文件, webpack.mix.js

  let mix = require('laravel-mix');
    mix.js('resources/scripts/app.js', 'public/js/app.js')
       .sass('resources/styles/app.scss', 'public/css/app.css')
       .copyDirectory('src', 'public');

上面配置文件的意思是,我们有一个应用的根目录叫做public, 然后他的主页是 index.html

使用mix.js()resources/scripts/app.js构建到public/js/app.js

使用mix.sass()resources/styles/app.scss构建到public/css/app.css

基本上所有 Laravel Mix的配置和上面的文件都大大同小异。

常用的case

版本控制和清理缓存

开发者经常会使用在编译后的资源文件名加上时间戳或者是唯一的token作为版本号,强迫浏览器加载全新的资源文件,而不是缓存的文件。每次都要手动打版本号确实让人不太爽,但是你可以使用 Laravel Mix de version()

它会自动为所有编译文件的文件名附加一个唯一的哈希值,从而实现更方便的缓存清除功能:

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

生成版本化文件后,你不会知道确切的文件名。因此,你应该在你的视图中使用 Laravel 的全局辅助函数 mix 来正确加载名称被哈希后的文件。mix 函数会自动确定被哈希的文件名称:

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

产生的效果大概是这样的:

<link rel="stylesheet" href="/css/app.css?id=587234682346">

每次构建都重新打版本号又会导致很慢,那你还可以这样

// 你可以指示版本控制过程仅在 npm run production 运行期间进行
mix.js('resources/assets/js/app.js', 'public/js');
if (mix.inProduction) {
    mix.version();
}

切换默认的 Vue 到 React

Laravel 默认前端框架还是 Vue,如果想切换到 React :

php artisan preset react

配置 postCss例子

例如需要配置 Laravel mix 初探

/\*\*

- postCss autofix
 \*/
mix.options({
    postCss: 
        require('autoprefixer')({
            browsers: 'last 2 versions',
            cascade: false
        })
    

});

更多 webpack 配置

Laravel Mix实际上已经预先配置好了 webpack.config.js文件,它会在 Laravel Mix 运行时被引用,如果需要添加一些自定义配置,可以将其他 webpack 配置传递给 mix.webpackConfig()方法。

如果这个还是不能满足要求,你完全可以自定义你的 Webpack 配置, 拷贝node\_modules/laravel-mix/setup/webpack.config.js 到你的应用的根目录,然后编辑你的package.json文件,并将所有的--config引用指向新复制的配置webpack.config.js

Example"scripts": {

"dev": "NODE\_ENV=development webpack --progress --hide-modules --config=webpack.config.js",
"watch": "NODE\_ENV=development webpack --watch --progress --hide-modules --config=webpack.config.js",
"hot": "NODE\_ENV=development webpack-dev-server --inline --hot --config=webpack.config.js",
"production": "NODE\_ENV=production webpack --progress --hide-modules --config=webpack.config.js"
}

总结

正如你在 demo 中所见一样, Laravel Mix 节约了我们很多的时间,可以不用太担心不会配置 Webpack。如果你之前没有使用过webpack,这是一个很好的入门工具。如果您以前使用过, Laravel Mix 有助于简化整个过程。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

5079
来自专栏Django中文社区

让 Django 完成翻译:迁移数据库

我们已经编写了博客数据库模型的代码,但那还只是 Python 代码而已,Django 还没有把它翻译成数据库语言,因此实际上这些数据库表还没有真正的在数据库中创...

3429
来自专栏Phoenix的Android之旅

零基础三分钟写一个Flutter App

这个教程是面向完全没有接触过Flutter开发,从0开始搭建Flutter开发环境到写第一个Flutter app的。 正常情况只需要半个小时就可以看到app。

1441
来自专栏web前端教室

10.7-*春燕同学的学习周总结【web前端零基础课】

一个完整的nodejs的应用,由以下三部分组成:1,引入require模块,2,用createServer创建一个服务器,3,接收、响应请求(回调)

893
来自专栏Albert陈凯

MAC上iTerm 2安装与使用

iTerm2是MAC下最好用的终端工具,并且还是免费的。iTerm2 是配置完毕开箱即用的 tmux,有标签变色、智能选中等特色功能。在日常开发中,我们难免会与...

4112
来自专栏前端杂货铺

Callbacks vs Events

  前言:本文翻译自Dean Edwards的一篇文章,原文地址:http://dean.edwards.name/weblog/2009/03/callbac...

2254
来自专栏张善友的专栏

入门:添加一个支持获取单一资源以及支持POST,PUT和DELETE方法

WCF Web API支持多个宿主环境:自宿主(windows服务或者控制台)和IIS宿主(asp.net webform/mvc)。这个入门文章主要演示在AS...

1957
来自专栏函数式编程语言及工具

PICE(6):集群环境里多异类端点gRPC Streaming - Heterogeneous multi-endpoints gRPC streaming

   gRPC Streaming的操作对象由服务端和客户端组成。在一个包含了多个不同服务的集群环境中可能需要从一个服务里调用另一个服务端提供的服务。这时调用服...

953
来自专栏前端说吧

SASS环境搭建及HBuilder中sass预编译配置

3806
来自专栏Theo Tsao

Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传

Ionic Native - Camera GitHub - cordova-plugin-camera Ionic Native - Image Picker...

1651

扫码关注云+社区