[Laravel 5.5]如何使用Laravel Mix将Pug编译成.blade.php


介绍

这是第一篇文章。
Laravel初学者，最近决定从FuelPHP切换到Laravel。自从我决定使用Laravel之后，我就尝试使用Laravel-Mix，无论如何我都想介绍Pug，这是一个备忘录。
如果您有任何建议，请发表评论。

菜单

  • 什么是Laravel Mix？
  • 环境
  • 编译帕格
  • 将Pug编译成.blade.php
  • 奖金表不起作用

什么是Laravel Mix？

Laravel最近似乎发布了5.5，所以我决定使用最新版本。
Laravel Mix是自5.4以来实现的功能，类似于Webpack的包装器API。基本用法如链接到标题的官方网站上所述。
为了简单说明，如果执行以下命令，则node.js和scss文件将立即编译为js和css，并且还将执行更改监视。

1
npm run watch-poll

根据

设置，您还可以输入源地图。我感谢这个工具，所以我想越来越多地使用它。

以前它以前被命名为Laravel Elixir，并且似乎使用gulp的策略已更改为使用npm script。
您可以通过搜索找到详细信息和更改的差异。我提到了此人的博客。 (从Laravel Elixir到Laravel Mix)

环境

由于这次还将使用Laravel开发服务器应用程序，因此假设暂时可以使用Laravel开发环境。
有关Laravel的安装过程，请参阅本文等。总结了所有需要的内容。 (Laravel 5.4的环境构建)
我是5.5，但环境构建过程很少会因版本而异。

*由于Laravel Mix本身作为npm软件包分发，因此即使您不使用Laravel也可以使用Laravel Mix。但是，由于我没有耕种，因此不确定在这种情况下是否可以使用此处介绍的方法。我认为有可能。
我认为此人的博客将有助于在这种情况下构建环境。 (使用Laravel Mix，您只需3行设置即可创建一个webpack / Sass / JS构建环境)
<铅>

参考：我的开发环境规格

<表格>

主机操作系统

客户操作系统

PHP

节点

npm


<身体>

Windows 10

CentOS7.1

7.1

v6.11.1

3.10.10


即用型Laravel Mix

在

中，让我们构建一个可以立即使用Laravel Mix的环境。
假定已安装节点和npm。供参考，我从yum安装。

  • 安装Laravel package.json。在package.json所在的目录中执行以下命令。

npm install --force
*此时，如果Windows是主机OS，则尝试将符号链接粘贴到node_modules中时可能会发生错误。单击此处了解详细信息和解决方法(尽管它是英语，但即使是不懂英语的人也可以通过查看书面命令来理解它。我也不会说英语。)

一旦安装，Laravel Mix本身即可使用！
尝试在node_modules所在的目录中执行以下命令。
npm run dev
显示成功编译，并已创建app / public / js / app.js和app / public / css / app.css。
这里的用法基本上与官方网站上描述的一样，我认为可以毫无问题地使用它。
您可以通过设置webpack.mix.js来编译更少数量的文件，例如js，scss。 (当然，如果文件数量增加，则一次编译将花费更长的时间，因此我认为在每种环境中都必须进行优化。)
只要将Typescript设置为tsconfig.json，就可以使用以下描述将其立即编译为webpack.mix.js。

webpack.mix.js

1
mix.ts('hogehoge.ts' 'public/js');

编译pug

如果您可以使用JS和CSS进行编译，那么您还希望编译HTML！
我用谷歌搜索，如果我做不到。
结果，我到达了已发布的npm软件包。

laravel-mix-pug

  • 我找到了，所以请立即安装
    npm install laravel-mix-pug --save-dev

  • 由于它正常结束，请尝试根据发布的信息使用它。

webpack.mix.js

1
2
3
4
5
6
let mix = require('laravel-mix');
mix.pug = require('laravel-mix-pug');

mix.js('resources/assets/js/test.js', 'public/js')
   .sass('resources/assets/sass/test.scss', 'public/css')
   .pug('resources/assets/pug/test.pug', 'resources/views');

执行

npm run dev！

1
2
3
4
5
6
TypeError: Cannot read property 'seeds' of undefined
    at MixPugTask.run (/home/vagrant/src/node_modules/laravel-mix-pug/src/MixPugTask.js:25:32)
    at CustomTasksPlugin.runTask (/home/vagrant/src/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:34:14)
    at Mix.tasks.forEach.task (/home/vagrant/src/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:9:44)
    at Array.forEach (native)
....(中略)

错误。 .. ..
TypeError：无法读取未定义的属性"种子"。
起初，我认为这是一个错误，说"找不到'种子'(未定义)。"
用英语来说，它是"未定义的"种子"。
因此，您找不到的是调用"种子"而不是"种子"的原始变量。
让我们看一下相应的js文件。

MixPugTask.js

1
2
3
4
5
6
7
8
9
     17     run() {
     18
     19         let {files, dest, options} = this.data;
     20
     21         // Set destination folder
     22         this.dest = dest;
     23
     24         // Setup template seeder
     25         this.seedPath = options.seeds; // ←ここ！つまりoptionsがundefinedということ。

通过查看

laravel-mix-pug/src/index.js可以看到，在pug方法的第三个参数中未设置默认值。
因此，似乎会发生错误。
换句话说，没有第三个参数就不能使用它。这意味着分发者的用法在说谎(笑)

  • 牢牢指定第三个参数

webpack.mix.js

1
2
3
4
5
6
let mix = require('laravel-mix');
mix.pug = require('laravel-mix-pug');

mix.js('resources/assets/js/test.js', 'public/js')
   .sass('resources/assets/sass/test.scss', 'public/css')
   .pug('resources/assets/pug/test.pug', 'resources/views', {});

执行

npm run dev！

1
2
3
4
5
DONE  Compiled successfully in 48238ms

...(中略)

/resources/views/test.html  201 bytes          [emitted]

编译！

???等待。我制作了这个HTML，但是如果您使用Laravel进行开发，那么如果不使用扩展名.blade.php进行开发，好处不会很明显吗？ ??
因此，我至少要更改扩展名。

将Pug编译成.blade.php

最后是标题。
总之，当前分发的laravel-mix-pug仅具有输出为.html的功能。
但是，由于我只是在修改输出的扩展，因此让我们在稍早读取内部源代码的同时添加该处理。

顺便说一句，类似的软件包已分发给Laravel Elixir，这是Laravel Mix的第一阶段，似乎它可以选择使用Blade输出。 (Laravel-elixir-pug)
???为什么不见了？

在

中，我将介绍已修改的内容。
目标文件是laravel-mix-pug/src/MixPugTask.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//　17行目くらい
    run() {

        let {files, dest, options} = this.data;
+       options = options || {}; // ついでなので第3引数に空のオブジェクトを指定しなくてよいようにしておきます。

        // Set destination folder
        this.dest = dest;

        // Setup template seeder
        this.seedPath = options.seeds;
        this.locals = options.locals || {};
+       this.blade = options.blade || true; // 第3引数のオブジェクトでbladeと定義できるようにします。bladeを使うことが多いのでデフォルトtrueです。

...(中略)

//　146行目くらい
    prepareAssets(src) {
        let file = new File(src);
-       let output = path.join(this.dest, file.nameWithoutExtension() + '.html');
+       let extension = '.html';
+       // blade option
+       if(this.blade == true){
+           extension = '.blade.php';
+       }
+       let output = path.join(this.dest, file.nameWithoutExtension() + extension); // trueの場合は拡張子をblade.phpにして出力
        let asset = new File(output);

        Mix.addAsset(asset);

        return asset;
    }

完成！让我们对此进行编译！ (顺便说一句，让我们删除pug的第三个参数，这有点令人不愉快)。

1
2
3
4
5
DONE  Compiled successfully in 48238ms

...(中略)

/resources/views/test.blade.php 201 bytes          [emitted]

完成！
<铅>

就是这种情况，但是Github已经发布了拉取请求。 (在这里)
通过此修改，似乎将用于指定扩展本身的选项添加到了第三个参数。
一旦合并，就不再需要此修复程序。 (但是需要第三个参数吗？？？？)

顺便说一句，我不确定如何使用选项中定义的seeds。
如果有人熟悉它，请告诉我。我能以某种方式了解当地人。 ..

奖金表不起作用

当然，您现在可以以刀片模板格式编译pug，但是
如果保持原样，watch选项将不会对其进行监视。

npm run watch-poll

当使用

启动时，它将第一次编译，但是即使我更改添加到webpack.mix.js的Pug文件，该编译也不会运行。
我以各种方式关注Laravel Mix的来源，但似乎Pug文件未被识别为webpack.config.js的入口点。
另外，查看node_modules/laravel-mix/src/builder/webpack-entry.js，似乎无法从外部添加入口点。 (我之所以能够做到这一点，是因为node.js是一个超级初学者，并且我没有很好地遵循它。请不要吞下它。)

我试图通过玩源添加一个入口点。
node_modules/laravel-mix/src/builder/Entry.js

1
2
3
4
5
// 14行目くらい
     get() {
+        this.structure['pug/test.pug'] = ['/home/vagrant/src/resources/assets/pug/test.pug'] //　エントリポイントをハードコーディングで追加してみる
         return this.structure;
     }

现在运行。
npm run watch-poll

1
2
3
4
5
 ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/pug/test.pug

Module parse failed: /mnt/src/dim/resources/assets/pug/test.pug Unexpected token (2:7)

发生错误。似乎原因是说"什么是pug"，所以需要装载机。
(我只是一直在这里搜索错误，所以我不理解正确的理论……)

如果需要，请尝试安装加载程序。

npm install pug-loader --save-dev

您还需要让Laravel Mix读取此已安装的pug-loader。
需要以下webpackConfig设置。

webpack.mix.js

1
2
3
4
5
6
7
8
9
10
mix.webpackConfig({
            module: {
                rules: [{
                        test: /\.pug/,
                        enforce: "pre",
                        loader: 'pug-loader'
                    }]
            }
        })
        .pug('resources/assets/pug/test.pug', 'resources/views');

以此重新执行！
npm run watch-poll

1
2
3
4
5
DONE  Compiled successfully in 48238ms

...(中略)

/resources/views/test.blade.php 201 bytes          [emitted]

似乎可行，因此请尝试适当更新pug文件。

然后编译再次运行。哦，它正在被监视。 .. ..

但是我不能总是采用这种粗糙的方法，我目前正在寻找一种添加漂亮的Laravel Mix入口点的方法。因此以奖金的形式。
如果找到它，我会再次写它。