Compiler les ressources (Mix)

• Introduction
• Installation et configuration
• Exécuter Mix
• Utiliser la feuille de style
  • Moins
  • Sass
  • Stylet
  • PostCSS
  • CSS simple
  • Traitement d'URL
  • Cartographie des ressources
• Utiliser JavaScript
  • Vendeur pour extraire
  • React
  • Vanilla JS
  • Personnalisation Configuration du Webpack
• Copier les fichiers et les répertoires
• Contrôle de version/Effacement du cache
• Rechargement de la synchronisation du navigateur
• Variables d'environnement
• Notifications

Présentation

Laravel Mix fournit une API pour définir les étapes de construction de Webpack pour utiliser les préprocesseurs CSS et JavaScript courants dans votre application. En enchaînant les appels à ces méthodes concises, les pipelines de ressources peuvent être définis de manière fluide. Par exemple :

Si vous ne savez pas comment démarrer avec Webpack et la compilation de ressources, vous allez adorer Laravel Mix. Cependant, vous n'êtes pas obligé de l'utiliser pour développer votre application ; vous pouvez utiliser n'importe quel outil de pipeline de ressources, voire aucun.

Installation et configuration

Installer Node

Avant de déclencher Mix, assurez-vous que Node.js et NPM sont installés sur la machine.

node -v
npm -v

Par défaut, Laravel Homestead inclut tout ce dont vous avez besoin ; mais si vous utilisez Vagrant, vous pouvez également installer les dernières versions de Node et NPM à l'aide des installateurs graphiques plus faciles à utiliser disponibles sur leur page de téléchargement.

Laravel Mix

Il ne reste plus qu'à installer Laravel Mix. Dans une nouvelle installation de Laravel, le fichier package.json 文件。默认的 package.json 文件包含了起步所需的所有东西，把它想像成 composer.json se trouve à la racine de la structure de répertoires, sauf qu'il définit des dépendances pour Node, pas pour PHP. Installez les dépendances auxquelles il fait référence en exécutant la commande suivante :

npm install

Exécuter Mix

Mix est ​​la configuration de niveau supérieur de Webpack, donc pour exécuter la tâche Mix, il vous suffit d'exécuter un script contenu dans le fichier package.json par défaut de Laravel : package.json 文件中的脚本：

// 运行 Mix 任务...
npm run dev
// 运行所有的 Mix 任务并最小化输出结果...
npm run production

监听资源变化

npm run watch 命令能够在终端持续运行并且监听相关文件的变化。一旦它发现改变，Webpack 将自动重新编译资源：

npm run watch

你会发现在特定环境下，文件发生改变并不会促使 Webpack 更新。如果系统中出现这种情况，不妨考虑使用 watch-poll 命令：

npm run watch-poll

使用样式表

webpack.mix.js 文件所有资源编译的切入点。把它想像为 Webpack 的轻量级配置封装。Mix 任务可以与如何编译资源的配置一起被链式调用。

Less

less 方法可用于将 Less 编译成 CSS。下面的语句将 app.less 文件编译为 public/css/app.css：

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

可以通过多次调用 less 方法完成多文件编译：

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

如果希望自定义编译后的 CSS 文件名，可以把完整的文件路径作为传递给 less 方法的第二个参数：

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

如果需要覆盖 隐含的 Less 插件选项 ，可以传递一个对象作为 mix.less() 的第三个参数：

mix.less('resources/less/app.less', 'public/css', {
    strictMath: true
  });

Sass

sass 方法能将 Sass 编译成 CSS。可以像下面这样使用这个方法：

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

和 less 方法类似，可以将多个 Sass 文件编译为各自的 CSS 文件，并为结果 CSS 自定义输出目录：

mix.sass('resources/sass/app.sass', 'public/css')  
 .sass('resources/sass/admin.sass', 'public/css/admin');

额外的 Node-Sass 插件选项 可以作为第三个参数：

mix.sass('resources/sass/app.sass', 'public/css', {
    precision: 5
  });

Stylus

与 Less 和 Sass 相似， stylus 方法将 Stylus 编译成  CSS：

mix.stylus('resources/stylus/app.styl', 'public/css');

还可以安装额外的 Stylus 插件，比如 Rupture 。先通过 NPM （npm install rupture）安装有插件，然后在调用 mix.stylus()

mix.stylus('resources/stylus/app.styl', 'public/css', {  
  use: [       
   require('rupture')()  
   ]
 });

mix.sass('resources/sass/app.scss', 'public/css') 
   .options({
        postCss: [        
            require('postcss-css-variables')()    
              ] 
           });

mix.styles([  
  'public/css/vendor/normalize.css',    
  'public/css/vendor/videojs.css'], 
  'public/css/all.css'
 );

.example {
    background: url('../images/example.png');
 }

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
 }

mix.sass('resources/app/app.scss', 'public/css') 
 .options({
      processCssUrls: false   
  });

.example {
    background: url("../images/thing.png");
  }

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

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

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

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

mix.react('resources/js/app.jsx', 'public/js');

mix.scripts([   
 'public/js/admin.js',    
 'public/js/dashboard.js'],
 'public/js/all.js'
 );

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

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

mix.copyDirectory('resources/img', 'public/img');

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

<script src="{{ mix('/js/app.js') }}"></script>

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
   }

mix.browserSync('my-domain.test');
// 或...
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
  });

MIX_SENTRY_DSN_PUBLIC=http://example.com

process.env.MIX_SENTRY_DSN_PUBLIC

mix.disableNotifications();