What is the usage of mix in laravel

In laravel, "laravel mix" is a front-end task automation management tool. Mix provides a simple and smooth API that can define Webpack compilation tasks for Laravel applications. Mix supports many CSS and JavaScript preprocessors. Front-end resources can be managed through calls.

#The operating environment of this article: Windows 10 system, Laravel version 6, Dell G3 computer.

What is the usage of mix in laravel

Install laravel mix

Laravel Mix is ​​a front-end task automation management tool. The workflow model is used to execute the 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.

Using Mix is ​​very simple. First, you need to use the following command to install npm dependencies. We will use Yarn to install dependencies. Before that, due to domestic network reasons, we also need to configure installation acceleration for Yarn:

yarn config set registry https://registry.npm.taobao.org

Use Yarn to install dependencies:

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn

Before the yarn command The purpose of adding SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass is to tell yarn to download the node-sass binary file from the Taobao mirror.

Use laravel mix

Modify the webpack.mix.js file.

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();

A version() is added at the end so that a parameter similar to the version number is added after each static file generated by Mix to avoid browser caching.

Modify the resources/sass/app.scss file

// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
/* universal */
body {
  font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}
/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
……

Run npm run watch-poll, and then css and js files will be generated.

view calls

<link href="{{ mix(&#39;css/app.css&#39;) }}" rel="stylesheet">

version control

Mix also generates the file public/mix-manifest.json, which does not need to be added to the repository, in .gitignore Add it in.

/public/js and /public/css are dynamically generated, so they are also ignored.

Modify ** .gitignore ** File:

/public/mix-manifest.json
/public/js
/public/css

Related recommendations: The latest five Laravel video tutorials

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