README

Cooker v7.0.5

Cooker 是由 genericmilk 开发的一款易于使用的前端编译器，旨在紧密集成 Laravel，为构建您的 Web 应用程序提供一个强大、快速且适合初学者的起点。

Cooker 致力于成为那些不想被 Node 和 NPM 的复杂环境所拖累，但又希望获得类似功能的人的绝佳中间解决方案。

入门指南
- Cooker 是什么？为什么我应该使用它？
- 安装 Cooker
配置
功能和助手
扩展 Cooker
升级 Cooker

Cooker 是什么？为什么我应该使用它？

Cooker 是一个 composer 包，可以快速轻松地将小文件（如 .less、.scss、.js 等）编译成大文件（如 app.css 和 app.js），其中包含所有应用程序的代码，并具有智能加载功能，根据您所在的页面进行加载。

您可能已经习惯了其他平台提供的类似功能，例如 Webpack 等。

非标准文件，如 LESS 和 SCSS，需要编译成 CSS，以便浏览器理解它们。但是，通过将前端的所有内容包含在一个编译器中，可以大大提高开发体验。

Cooker 通过大幅降低入门门槛，并提供一个独特的 Laravel 前端资源系统，旨在取代 NPM、Webpack 和 Laravel mix 等大型服务。

Cooker 可无限定制，部署和使用非常容易。它还非常轻量，通过强大的文件压缩和缓存技术加速应用程序。

安装 Cooker

在安装 Cooker 之前，请记住以下“注意事项”，因为 Cooker 的安装程序将替换一些 Laravel 目录以进行安装

请备份您在 /resources/js 和 /resources/sass 文件夹中的所有内容。Cooker 将替换这些文件夹，因为它正在接管您应用程序的前端运行。
请确保您正在使用至少 PHP 8.2 和 Laravel 10，因为这是 Cooker 的先决条件

完成上述列表后，您确认已准备好继续操作，请将以下两个命令复制并粘贴到终端中，同时处于您的 Laravel 应用程序的根目录中

composer require genericmilk/cooker
php artisan cooker:init

这将安装 Cooker 及其依赖项，并安装 Cooker 的配置文件，并指导您设置环境。

如果您正在承担一个使用 Cooker 编写的项目，请参阅“编译资源”来构建应用程序文件。

设置烤箱

当您首次运行 php artisan cooker:init 时，它将一个 cooker.php 文件发布到您的 Laravel 应用程序的 /config 目录。

此文件（以下称为“Cooker 的配置文件”）是您可以调整 Cooker 运行方式以及指定 Cooker 使用以构建文件“烤箱”的位置。

厨具使用烤箱来构建生成的javascript或css文件。我们将这种组合和解析过程称为“烹饪”。

配置中列出的每个烤箱输出一个文件。不同的烤箱代表不同类型的文件，无论是javascript、LESS、SASS、Styl等。

例如；您可能有一个用于账单的javascript文件和另一个用于下拉菜单的脚本。您希望将这些脚本组合在一起，以便两者都能在输出中可用，以便浏览器一起加载账单和下拉菜单脚本。

每个烤箱通过以下方式处理输出文件：

在文件头部添加时间戳，以便快速识别上次任务运行的时间。您可以通过在配置文件中将stamped设置为false来关闭此功能
如果文件类型是js，则获取框架
使用NPM网络从cooker.json中获取任何包。有关将新包添加到您的项目或了解更多信息，请参阅将包添加到cooker
获取烤箱指定的任何预加载。预加载在配置中的preload数组中指定，可以是直接url或资源文件的完整路径。预加载可以作为字符串加载到生产环境和本地版本，也可以作为数组来指定两者之间的差异。预加载在构建时不会被压缩，因此建议您在生产环境中使用压缩版本。有关预加载的更多信息，请参阅开始使用预加载
自动获取任何库，并按文件名顺序从resources/<ovenDir>/libraries文件夹中获取，其中<ovenDir>由运行的烤箱定义。如果您使用的是Cooker提供的内置烤箱，这将是以烤箱名称的小写形式。如果您正在使用自己的烤箱，请参阅构建自己的烤箱。库在预加载之后加载，因此将单个脚本放在此文件夹中是一个好主意，以便在您的AppCode之前加载。库在构建时不会被压缩，因此建议使用压缩版本，以便它们也准备好用于生产。
创建一个新输出缓冲区，准备编译代码
如果配置了，当文件类型是js并且烤箱中的toolbelt配置设置为true时，Cooker将向文件中添加cookerToolbelt
Cooker最终将处理您的Appcode。然后从任务的input数组中按指定顺序加载输入文件。这些文件使用加载的烤箱进行解析，并在生产中自动压缩。例如，如果您正在使用Genericmilk\Cooker\Ovens\Less烤箱，您可以像下面这样引用文件，以便首先加载颜色和字体。引用的基本目录由烤箱提供（例如：/resources/less/*）

  'input' => [
      'colors.less',
      'fonts.less',
      'home.less',
      'about.less',
      ...
  ],

烹饪文件将发布到public/build文件夹中，其名称由任务的output字符串指定。（默认app.css或app.js等）

安装包

Cooker可以使用如unpkg或jsdelivr之类的NPM仓库，以便快速将文件添加到您的项目中。目前我们仅支持下载此环境的最新版本，默认文件是引用的文件。虽然我们将为您在生产中压缩它，但这可能不是特定的生产构建。

您还需要将以下内容添加到您的.gitignore文件中

cooker_packages

随着您指定脚本的进行，cooker_packages目录将充满您的脚本。接下来，请确保新的配置选项在您的config/cooker.php文件中可用（在烤箱之前）

'packageManager' => [
    'packagesList' => env('COOKER_PACKAGE_JSON_LOCATION', base_path('cooker.json')),
    'packagesPath' => env('COOKER_PACKAGE_PATH', base_path('cooker_packages')),
    'packageManager' => env('COOKER_PACKAGE_MANAGER', 'jsdelivr'),
],

要开始安装jQuery，请在已安装的Cooker版本上运行以下命令

php artisan cooker:install jquery

请根据需要将jquery替换为不同的包。Cooker将从NPM下载jQuery并将其部署到cooker_packages文件夹中。然后您将被要求运行一个烹饪作业，将jQuery混合到您的应用程序中。

编译资源

当运行 php artisan cook 命令时，Cooker 会编译资源。这可以与保存操作挂钩，例如 Visual Studio Code 中的 pucelle 的 "保存时运行" 功能，或者你可以使用 php artisan cooker:watch 函数来监视文件更改，以便检测何时运行该函数。

@cooker 助手

Cooker 提供了强大的控制器函数，你可以在 blade 文件或控制器中使用它！它将返回一个 HTML 元素，指示浏览器访问已编译文件的路径，并附带一个字符串以帮助浏览器进行缓存。当应用程序在 app.debug=false 模式下运行时，将在请求的 URL 末尾添加一个 Unix 时间戳。相反情况下，将指定构建文件的 MD5 哈希值。

要使用该助手，只需像这样包含它

@cooker('app.css')
@cooker('app.js')

你可以将 app.css 和 app.js 替换为已编译的文件名。

Cooker 工具带

默认情况下，Cooker 包含一个小的 JavaScript 文件，它在页面启动时加载并锁定。该对象位于 window.cookerToolbelt，目前包含以下工具：

cookerToolbelt.version 返回当前工具包版本
cookerToolbelt.isProd 返回一个布尔值，表示 JavaScript 文件是否使用生产模式构建
cookerToolbelt.autoRunIntelliPath 返回一个布尔值，表示 intelliPath 是否可以运行
cookerToolbelt.cookerVersion 返回当前 Cooker 版本
cookerToolbelt.namespace 返回一个字符串，表示在 oven 中定义的 JavaScript 命名空间

快速烹饪

Cooker 可以根据需要更改的内容快速构建大型库。例如，如果你有 10 个 oven，但只更改了 Oven 4 中的一个文件，则 Oven 4 将被构建，而其他文件将被跳过。我们称此过程为快速烹饪。如果你想关闭它，请转到 config/cooker.php 并将 canSpeedyCook 布尔值设置为 false

开发和生产模式

Cooker 将根据 config('app.debug') 的值自动压缩 css 和 js。你可以通过运行 php artisan cook 并分别使用 --dev 和 --prod 开关来覆盖此设置

开始使用预加载

预加载提供了一种从远程 URL 或本地 URL 将文件引入项目的绝佳方式。如果你有一个位于 CDN 上的文件并希望将其导入项目，而不必担心远程 URL 崩溃而导致你的站点崩溃，这将非常有用。要开始，请转到 config/cooker.php 并查看你选择的 Oven 数组。

接下来，检查 preload 数组。默认情况下，它将包含如何扩展该 oven 预加载的示例。要开始，你可以决定为生产模式和开发模式加载同一文件，或者区分两者。如果你想在本地运行生产脚本，但想使用未压缩的开发者脚本进行本地调试，这将非常有用。

如果你想区分两者，请向 preload 数组中添加一个新的数组，指定一个 dev 和 prod 键来表示为哪个平台加载哪个文件。例如：

[
    'dev' => 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',
    'prod' => 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'
]

如果你不希望区分两个平台（即如果你愿意在本地运行一个生产就绪的资产），只需指定一个目标字符串

'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css',

请注意，这些值可以是远程 URL 或本地文件。只需根据需要修改即可

构建自己的 Oven

你可以扩展 Cooker 以处理你提供的任何输入！这可能比默认的 Less 或 Scss 编译器提供的更符合你的需求，或者如果你想要实现一些开箱即用不支持的功能，比如 Styl 等，你可以通过创建自己的 oven 来实现。

烤箱仅仅是处理从作业数组中传给它的输入文件的控制器。只需创建一个具有 public static function 的控制器，命名为 cook，并接受一个 $job 参数即可开始。

您还需要定义厨师输出的 $format 格式（这可以是 css 或 js），以及厨师应该查找文件的 $directory 目录。

然后，您需要做的就是遍历每个 $job['input'] 并处理它们，就这么简单！尽情发挥吧！

按照以下示例开始吧！

class Styl extends Controller
{
	public $format = 'css';
	public $directory = 'styl';
    
	public static function cook($job){
      $p = new fancyParser(); // Could be anything you want or use here!   
      foreach($job['input'] as $input){
          $p->parseFile(resource_path($this->directory.'/'.$input)); // process this specific input file
      }
      return $p->getCss(); // return the rendered content
  }
  public static function compress($input){
    // Compress the script if we are running in production mode
    return $input;
  }
}

Cooker 面向对象 JavaScript

Cooker 提供了一种非常好的方式来组织和构建要编译成一个烹饪文件的 JavaScript 文件。所有 JavaScript 文件都使用面向对象的方法，这使得组件化和遍历大型文件变得超级简单。

文件使用作业中指定的第一个 JavaScript 文件作为基本对象进行烹饪。这应该是一个包含 JavaScript 对象的变量，其名称设置为配置中指定的值。例如，具有 app 命名空间的厨师应用程序需要以下结构

var app = {  
};

您的基对象应至少包含一个 boot() 函数。这将作为 <namespace>.boot() 在应用程序初始化时调用。这可以像下面这样使用

var app = {
  hey: 'Hello world',
  boot(){
    alert(this.hey);
  }
};

在这个例子中，当文档就绪时调用 app.boot();，将触发一个包含在 app.hey 中存储的字符串的 alert，app.hey 被设置为 "Hello world"。很酷吧？

您可以在 cooker 作业下的 input 中引用的其他脚本中扩展 app 对象。

要扩展您的脚本，只需创建顶级命名空间对象的一个子对象，如下所示

app.anotherObject = {
  boot(){
    alert('Hello from other file');
  }
};

然后您可以在烹饪的开始处从主对象调用此脚本

var app = {
  boot(){
    app.anotherObject.boot();
  }
};

这将触发一个 alert，内容为 "Hello from other file"，因为函数是在 app.anotherObject.boot() 中执行的

使用 Cooker 的要求

Cooker 在以下环境中运行最佳

Laravel 10
PHP >=8.2.0

genericmilk / cooker

维护者

详细信息