What is laravel mix used for?

laravel mix is ​​used to manage front-end tasks. It is a front-end task automation management tool that can use the workflow mode to execute the specified tasks in sequence; Mix provides a simple and smooth API, allowing developers to Define Webpack compilation tasks for Laravel applications to easily manage front-end resources.

The operating environment of this tutorial: Windows 7 system, Laravel 6 version, DELL G3 computer.

What is laravel mix? What is the use?

Laravel Mix is ​​a front-end task automation management tool that uses the workflow model to execute specified tasks in sequence. Mix provides a simple and smooth API that allows you to define Webpack compilation tasks for your Laravel applications. Mix supports many common CSS and JavaScript preprocessors, and you can easily manage front-end resources with simple calls.

Default What is laravel mix used for? and folder structure

The default Sass What is laravel mix used for? is in resources/assets/sass/app.scss (the content of the What is laravel mix used for? is completely The same), and the default JS What is laravel mix used for? is in resources/assets/js/app.js (because the What is laravel mix used for? is exactly the same, so if you want to learn more about the infrastructure of Vue in 5.3, you can check Matt Stauffer wrote the front-end structure of 5.3 this post).

If you dig into the bootstrap What is laravel mix used for? referenced in app.js ( resources/assets/js/bootstrap.js ), you will see that we use Axios instead of Vue-Resource to set up X-CSRF-TOKEN (Vue-Resource will no longer work after 2016).

If you run npm run dev on the Mix project, you can see:

By default, we generate The location of the What is laravel mix used for?s is the same as Elixir: public/css/app.css and public/js/app.js.

Main Mix Methods

As you can see, you can easily use Mix with Sass and JS. Sass, obviously, runs a Sass What is laravel mix used for? and outputs it as CSS. Use JS methods to support ECMAScript 2015 syntax, compile .vue What is laravel mix used for?s, minify code for production, and perform other processing of JavaScript What is laravel mix used for?s.

You can also use the .less method to compile Less into CSS:

mix.less('resources/assets/less/app.less', 'public/css');

Use the combine method to combine What is laravel mix used for?s in Together:

mix.combine([
    'public/css/vendor/jquery-ui-one-thing.css',
    'public/css/vendor/jquery-ui-another-thing.css'
], 'public/css/vendor.css');

Copy What is laravel mix used for?s or directories with copy:

mix.copy('node_modules/jquery-ui/some-theme-thing.css', 'public/css/some-jquery-ui-theme-thing.css');
mix.copy('node_modules/jquery-ui/css', 'public/css/jquery-ui');

Unlike Elixir, Source Maps are turned off by default and can be used in webpack.mix Call the following method in .js to enable it:

mix.sourceMaps();

By default, Mix will notify you of the compilation results in the form of system notifications. If you do not want them to run, you can use disableNotifications() Method disabled.

Mix.manifest.json and cache clearing

Those familiar with Elixir may notice that the output image above is a little different from Elixir: Mix is ​​generating an out-of-the-box manifest What is laravel mix used for? public/mix-manifest.json. Of course, Elixir also generates the manifest What is laravel mix used for?: public/build/rev-manifest.json, and unlike Mix's direct production, it only generates it when it determines that the cache clearing (versioning) feature is enabled.

These manifest What is laravel mix used for?s are used to map front-end What is laravel mix used for?s to versioned copies of front-end What is laravel mix used for?s, for example: /js/app.js and /js/app-86ff5d31a2. Mapping between js. With this What is laravel mix used for?, you can use a simple reference in HTLM to point to the referenced versioned What is laravel mix used for?. For example <script src="%7B%7B%20mix('js/app.js')%20%7D%7D"></script> .

Unlike Elixir, even if you don't use cache clearing, Mix will generate this What is laravel mix used for?, but it is just a guide map:

{
  "/js/app.js": "/js/app.js",
  "/css/app.css": "/css/app.css"
}

For users who have used Elixir before, another An interesting change: your build What is laravel mix used for?s now end up in the normal output directory, rather than a separate build directory, so your versioned JS What is laravel mix used for?s will appear in public/js/app-86ff5d31a2.js .

To enable cache busting in Mix, just append .version() to the Mix What is laravel mix used for?:

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

This is much simpler than passing the actual What is laravel mix used for?name, Just like in Elixir.

mix() Help

As mentioned above, you want to use mix() instead of elixir() to reference your resources, which works exactly the same way. But there is one thing. If you use Mix, you need to delete these default reference lines in the Laravel template:

<link>
...
<script></script>

Replace them in the following way:

<link>
...
<script></script>

Remember, this function is only in ## Find the string in #mix-manifest.json and return the mapped build What is laravel mix used for?. Used to ensure that when you clear the cache, it knows how to load the default What is laravel mix used for?.

代码拆分

Webpack 是对许多人来说很令人兴奋的部分，因为它提供了使代码结构化的智能能力。我还没能完全弄明白 webpack 的所有功能，Mix 也没把所有功能都打包支持，例如：tree-shaking。但它确实使你的自定义代码（它可能会经常更改）与你的供应商代码（这不应该）区分，使得用户在每次推送新版本时刷新所有供应商代码的可能性更小。

要利用这个特性，你需要使用 extract() 函数，它将你定义一个给定的库或者模块集合提取到一个单独的构建文件名为 vendor.js：

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue', 'jquery']);

在这种情况下，Mix 生成了三个文件：public/js/app.js 、public/js/vendor.js  和第三个 Webpack 特定文件 public/js/manifest.js。 为了运行顺利，得按照以下的顺序引入这三个文件：

<script></script>
<script></script>
<script></script>

如果清除了缓存，并且更改了应用自定义的代码， vendor.js  文件仍会缓存，也只有应用自定义的代码才会被清除缓存，这样你的网站会加载得更快。

自定义 Webpack 配置

如果你有兴趣添加自己的自定义 Webpack 配置，只需要传递你的 Webpack 配置：

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

（上面这个例子只是从文档复制粘贴来的~ 你真的有兴趣就自己去了解哈~）

顺便一提

说点有趣的东西吧，我想这或许能在 Webpack 文件中加点什么。 如果你想只在生产环境下复制点什么，你怎么会这样做？

会这么问是因为我发现在 Node 环境对象中，我们可以用 process.env 去访问。可以检查任何值，包括系统上的任何全局环境变量。这个发现可能可以让我们去做点其他有趣的事情，比如说有条件地检查 process.env.NODE_ENV  中的值：

if (process.env.NODE_ENV == 'production') {
    mix.webpackConfig({ ... });
}

但是在阅读源代码后，我发现 NODE_ENV 不是主要的检查。相反，是用了一个带有 inProduction  标志的配置对象去做这件事情。 这个文档里没有写，因此请谨慎使用，但你可以更新 Webpack 文件顶部的导入，然后使用该配置对象：

const { mix, config } = require('laravel-mix');

if (config.inProduction) {
    mix.webpackConfig({ ... });    
}

默认依赖关系

你可以查看 package.json  并查看每个项目包含的依赖项列表。 记住，这些是由默认的 app.js 和 bootstrap.js  来引用的，你可以删除 app.js  和 package.json  中的引用，并重新运行 npm install ，当然删除引用并不会删除源文件。

• Axios（一个简单且漂亮的 HTTP 客户端）

• Bootstrap Sass（由默认的 app.scss  文件来引入 Bootstrap 样式）

• jQuery

• Lodash（ 比 Underscore 更好）

• Vue 2

小结

Laravel Mix 是一个代替 Laravel Elixir 的构建工具。 具有与 Elixir 几乎相同的API，却是基于 Webpack 而不是 Gulp。             

【相关推荐：laravel视频教程】

The above is the detailed content of What is laravel mix used for?. For more information, please follow other related articles on the PHP Chinese website!