Laravel Mix 初探

原创

志航

修改于 2018-11-02 10:00:08

4.3K0

修改于 2018-11-02 10:00:08

简介

针对 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
        })
    

});