Laravel Mix 初探

简介

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

Laravel 上面的安装

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

在开发机配置了 node 和 npm 的基础上，仅仅只需要运行下面的命令即可安装：

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.js 到 dist/ , src/app.scss 到 dist/ , 看起来非常简洁优雅。

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 有助于简化整个过程。