社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > 后端开发 > php教程 > 如何创建Laravel CSS-Minify命令

如何创建Laravel CSS-Minify命令

Joseph Gordon-Levitt
发布： 2025-02-21 08:30:14
原创
308 人浏览过

如何创建Laravel CSS-Minify命令

>在本文中，您将学习如何使用Laravel的Artisan命令行工具以及如何创建自定义命令。请注意，您需要熟悉Laravel框架才能充分利用本文。

>

钥匙要点

  • 利用Laravel Artisan：利用Laravel的Artisan命令行工具为CSS Minification创建自定义命令，提高了Web开发项目的工作流效率。
  • >自定义命令创建：轻松地使用`php工匠命令：用命名，存储和命名区的选项创建自定义命令，允许在Laravel应用程序中量身定制功能。
    • >
  • 缩小选项：在您的命令中实现选项来处理CSS文件串联和评论保存，提供了基于不同开发需求的灵活性。
  • 命令注册：确保在Laravel的Artisan系统中注册您的新命令，以使其可执行，无论是通过'artisan.php`文件还是用于包装开发的服务提供商。
    • >
  • 执行和输出：使用命令来缩小CSS文件，并具有可选的串联和注释保存标志，并在执行过程中提高命令反馈。
我们在建造什么

在本教程中，我们将构建一个命令来缩小我们的CSS资产，将其使用：

<span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>
登录后复制
登录后复制
登录后复制
登录后复制
output_path ：（必需）保存缩小文件的路径，（style.css-> style.min.css）。
  • file1 ... fileen ：（必需）要缩小的文件列表。
    • >
  • - 注释：（可选）添加此选项以保持注释。
  • - concat ：（可选）将缩小文件串成一个名为all.min.css的文件
  • 什么是laravel命令
    • Artisan是Laravel的命令行实用程序的名称。它带有一组预定义命令，您可以使用PHP工匠列表列出。如果要显示特定命令的帮助，则可以使用PHP Artisan帮助命令。>
创建CSS minifier命令

要创建一个工匠命令，您可以使用命令：make命令。此命令接受一个参数：

>名称：命令的类名称。

和三个选项：
    • - 命令：应输入运行命令的名称。
>

- 路径：默认情况下，命令存储在应用程序/命令文件夹中，但是，您可以使用此选项更改该命令。

- 名称空间：您可以使用此选项来命名您的一组命令，例如在命令命令中：make，make命令在命令名称空间下。
    >
    • 现在，要创建我们的命令，我们将使用php工匠命令：make cssmincommand -command = cssmin，他们将在我们的app/commands目录中创建一个cssmincommand.php文件。
  • >>>>>>>>>>
    <span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    我们的cssmincommand类扩展了IlluminateConsolecommand并覆盖两种方法（getArguments，getOptions）。

    >
    • > getArguments：此功能返回应该传递给命令的一系列参数（例如：我们传递给CSSMIN命令的文件列表）。
      • > getOptions：返回您可能传递给命令的选项列表或开关。 （例如 - -Comments）。
    注意：选项可能具有或可能没有值， - comments只是一个标志，如果将其传递给命令，则返回true，而-ouptput ='public/public/Assets'将返回一个值。>

    执行您的命令时，将调用火法，因此我们需要放置命令逻辑。

    注册命令

    如果您尝试运行我们的命令PHP Artisan cssmin'Args'您将获得命令“ CSSMIN”。

    要注册一个命令，您需要将其添加到artisan.php文件：>

    >如果您不想将命令放入artisan.php文件中，则可以创建一个单独的文件并包含它，或者如果您创建一个软件包，则可以在服务提供商中注册。

    参数

    在我们的getArguments方法中，我们将定义输出和文件。 
    <span>use Illuminate<span>\Console\Command</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputOption</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputArgument</span>;
</span>
<span>class CssminCommand extends Command{
</span>    <span>protected $name = 'cssmin';
</span>    <span>protected $description = 'Command description.';
</span>    
    <span>public function __construct(){
</span>		<span><span>parent::</span>__construct();
</span>	<span>}
</span>    
    <span>public function fire(){
</span>		<span>//
</span>	<span>}
</span>	
	<span>protected function getArguments(){
</span>		<span>return array(
</span>			<span>array('example', InputArgument<span>::</span>REQUIRED, 'An example argument.'),
</span>		<span>);
</span>	<span>}
</span>    
	<span>protected function getOptions(){
</span>		<span>return array(
</span>			<span>array('example', null, InputOption<span>::</span>VALUE_OPTIONAL, 'An example option.', null),
</span>		<span>);
</span>	<span>}
</span><span>}</span>
    登录后复制
    登录后复制
    登录后复制
    要定义一个参数，我们需要传递一系列值：

    名称：检索参数时要使用的密钥名称。

    >


    模式：可以具有三个选项之一：

    > 
    <span>Artisan<span>::</span>add( new CssMinCommand );
</span>
<span>//or through the container
</span><span>Artisan<span>::</span>add( App<span>::</span>make("CssMinCommand") );</span>
    登录后复制
    登录后复制
      > inputargument :: Required：需要参数。
    • Inputargument ::可选：参数是可选的。
      • >
    • inputargument :: is_array：参数接受多个值（ex：file1 ... fileen）。

      但是，您可以将它们结合起来，例如Inputargument :: iS_array | InputArgument ::必需（必需参数，必须是一个数组）。
      • >
        • >描述：打印命令帮助时有用。
        • > defaultValue：如果未提供参数。
      • >
      ，所以我们的getArguments方法将是：

      >

      • 注意：使用IS_Array参数时，应该是返回的参数数组中的最后一个。 （显然）。
      • >选项
      • 我们的CSSMIN命令只有两个选项。为了定义一个选项，我们通过数组：

    <span>array( 'name', 'mode', 'description', 'defaultValue' )</span>
    登录后复制
    登录后复制
    >名称：您选项的名称（例如：注释）。

    >

    快捷方式：您选项的较短版本（例如： - Verbose和-v）。

    >

    模式：可以是四个选项之一（inputoption :: value_is_array，inputoption :: value_optional，inputoption :: value_required，inputoption :: value_none），前三个值与参数相似。 

    <span>protected function getArguments(){
</span>        <span>return array(
</span>            <span>array(
</span>                <span>'output', 
</span>                <span>InputArgument<span>::</span>REQUIRED,
</span>                <span>'Path to output directory'
</span>            <span>),
</span>            <span>array(
</span>                <span>'files', 
</span>                <span>InputArgument<span>::</span>IS_ARRAY | InputArgument<span>::</span>OPTIONAL ,
</span>                <span>"List of css files to minify"
</span>            <span>),
</span>        <span>);
</span>    <span>}</span>
    登录后复制
    登录后复制
    value_none：指示该选项是布尔旗（ex： - verbose）。
    • 描述：在打印命令帮助时有用。
    • >
      • > defaultValue：如果未提供选项值。
    • >

      ，所以我们的getOptions方法将是：
        >
      <span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制

      >运行命令

      当我们的火法被称为时，我们需要收集我们的论点和选择。我们可以单独的功能为我们做到这一点：

      > 
      <span>use Illuminate<span>\Console\Command</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputOption</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputArgument</span>;
</span>
<span>class CssminCommand extends Command{
</span>    <span>protected $name = 'cssmin';
</span>    <span>protected $description = 'Command description.';
</span>    
    <span>public function __construct(){
</span>		<span><span>parent::</span>__construct();
</span>	<span>}
</span>    
    <span>public function fire(){
</span>		<span>//
</span>	<span>}
</span>	
	<span>protected function getArguments(){
</span>		<span>return array(
</span>			<span>array('example', InputArgument<span>::</span>REQUIRED, 'An example argument.'),
</span>		<span>);
</span>	<span>}
</span>    
	<span>protected function getOptions(){
</span>		<span>return array(
</span>			<span>array('example', null, InputOption<span>::</span>VALUE_OPTIONAL, 'An example option.', null),
</span>		<span>);
</span>	<span>}
</span><span>}</span>
      登录后复制
      登录后复制
      登录后复制

      参数和选项方法以键作为参数并返回适当的值。>

      为了保持我们的示例清洁和简单，我们将使用此简单功能和小的修改来进行缩小过程。

      <span>Artisan<span>::</span>add( new CssMinCommand );
</span>
<span>//or through the container
</span><span>Artisan<span>::</span>add( App<span>::</span>make("CssMinCommand") );</span>
      登录后复制
      登录后复制
      现在要处理我们的参数（文件），我们将制作一个单独的方法来完成这项工作。>

      >最后，我们的火法只会调用这两种方法：> 
      <span>array( 'name', 'mode', 'description', 'defaultValue' )</span>
      登录后复制
      登录后复制

      提示：您也可以使用呼叫方法运行外部命令。> 

      <span>protected function getArguments(){
</span>        <span>return array(
</span>            <span>array(
</span>                <span>'output', 
</span>                <span>InputArgument<span>::</span>REQUIRED,
</span>                <span>'Path to output directory'
</span>            <span>),
</span>            <span>array(
</span>                <span>'files', 
</span>                <span>InputArgument<span>::</span>IS_ARRAY | InputArgument<span>::</span>OPTIONAL ,
</span>                <span>"List of css files to minify"
</span>            <span>),
</span>        <span>);
</span>    <span>}</span>
      登录后复制
      登录后复制
      要测试我们的命令，我们将将一些CSS文件复制到我们的public/css目录中，然后运行命令。

      第一个命令将在public/css目录上创建两个文件（style.min.css，willsive.min.css）。
      <span>array('name', 'shortcut', 'mode', 'description', 'defaultValue')</span>
      登录后复制
      >

      因为我们使用了 - comments和 - concat标志，所以我们将获得一个名为all.min.css的文件，其中包含两个文件，其中剩下的两个文件。

      > 
      <span>protected function getOptions(){
</span>        <span>return array(
</span>            <span>array('comments', 'c', InputOption<span>::</span>VALUE_NONE, 'Don\'t strip comments' , null),
</span>            <span>array('concat', null, InputOption<span>::</span>VALUE_NONE, 'Concat the minified result to one file' , null),
</span>        <span>);
</span>    <span>}</span>
      登录后复制
      我们的命令不是很描述性，也不提供任何消息或通知！

      >

      改进命令

      在我们继续之前，在最终的github存储库之前，我将为我们的命令创建一个新标签，以便您可以切换和测试每个标签。

      使命令有点冗长，Laravel为我们提供了一些输出功能：

      这将输出：

      在仅显示消息之外，您可以向用户询问信息，例如：> 

      <span>private function init(){
</span>    <span>// retrun an array
</span>    <span>$this->files = $this->argument('files');
</span>    <span>// return a string
</span>    <span>$this->output_path = $this->argument('output');
</span>    <span>// return true if passed, otherwise false
</span>    <span>$this->comments = $this->option('comments');
</span>    <span>// return true if passed, otherwise false
</span>    <span>$this->concat = $this->option('concat');
</span><span>}</span>
      登录后复制
      如果用户类型与y/n。

      >

      询问方法将向用户询问输入，而不仅仅是y/n，如果将其留为空，则返回默认值。

      >如何创建Laravel CSS-Minify命令选择方法将为用户提供一个编号列表以供您选择，如果将其剩下，则返回默认值。

      >

      秘密方法将提示用户提出问题并隐藏键入，但是将返回用户输入。 

      <span>private function minify( $css, $comments ){
</span>        <span>// Normalize whitespace
</span>        <span>$css = preg_replace( '/\s+/', ' ', $css );
</span>
        <span>// Remove comment blocks, everything between /* and */, unless preserved with /*! ... */
</span>        <span>if( !$comments ){
</span>            <span>$css = preg_replace( '/\/\*[^\!](.*?)\*\//', '', $css );
</span>        <span>}//if
</span>        
        <span>// Remove ; before }
</span>        <span>$css = preg_replace( '/;(?=\s*})/', '', $css );
</span>
        <span>// Remove space after , : ; { } */ >
</span>        <span>$css = preg_replace( '/(,|:|;|\{|}|\*\/|>) /', '', $css );
</span>
        <span>// Remove space before , ; { } ( ) >
</span>        <span>$css = preg_replace( '/ (,|;|\{|}|\(|\)|>)/', '', $css );
</span>
        <span>// Strips leading 0 on decimal values (converts 0.5px into .5px)
</span>        <span>$css = preg_replace( '/(:| )0\.([0-9]+)(%|em|ex|px|in|cm|mm|pt|pc)/i', '.', $css );
</span>
        <span>// Strips units if value is 0 (converts 0px to 0)
</span>        <span>$css = preg_replace( '/(:| )(\.?)0(%|em|ex|px|in|cm|mm|pt|pc)/i', '0', $css );
</span>
        <span>// Converts all zeros value into short-hand
</span>        <span>$css = preg_replace( '/0 0 0 0/', '0', $css );
</span>
        <span>// Shortern 6-character hex color codes to 3-character where possible
</span>        <span>$css = preg_replace( '/#([a-f0-9])\1([a-f0-9])\2([a-f0-9])\3/i', '#', $css );
</span>
        <span>return trim( $css );
</span>    <span>}//minify</span>
      登录后复制
      实际上，Laravel只是使Symfony的游戏机API更简单，更详细，如果您想挖进去，还有更多。
        >
      • >让我们的命令更加详细，并使用户对执行的任务进行更新。>

        我们的功能现在打印一些有用的消息，以跟踪正在发生的事情。>

      • 注意：这将在GitHub存储库上标记为我们命令的V2。
        • 创建应用程序时，我们被用来倾倒可用路由的列表（PHP Artisan路线）。

        • Symfony提供了一个函数，可让您轻松打印这样的桌子。检查文档中的示例。我们将看到接下来如何使用一些Symfony控制台助手。

        >

        使用Symfony Console Helper

        为了说明某些符号助手的使用，我们将使用进度助手来保持用户有关工作进度的最新信息。

        在我们的初始方法结束时，我们将需要从助手那里取得进度，然后开始我们的进度标准。

        启动方法接受两个参数，$ this->输出是Symfony控制台中的consoleouput实例。第二个参数是最大步骤数。

        > 
      <span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      >每次我们在processFiles方法中处理文件时，我们都会将进度栏推进一步，当作业完成时，我们将结束进度栏并打印通知消息。

      >您可以尝试使用多个文件的命令或删除睡眠功能线以查看实时效果。

      <span>use Illuminate<span>\Console\Command</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputOption</span>;
</span><span>use Symfony<span>\Component\Console\Input\InputArgument</span>;
</span>
<span>class CssminCommand extends Command{
</span>    <span>protected $name = 'cssmin';
</span>    <span>protected $description = 'Command description.';
</span>    
    <span>public function __construct(){
</span>		<span><span>parent::</span>__construct();
</span>	<span>}
</span>    
    <span>public function fire(){
</span>		<span>//
</span>	<span>}
</span>	
	<span>protected function getArguments(){
</span>		<span>return array(
</span>			<span>array('example', InputArgument<span>::</span>REQUIRED, 'An example argument.'),
</span>		<span>);
</span>	<span>}
</span>    
	<span>protected function getOptions(){
</span>		<span>return array(
</span>			<span>array('example', null, InputOption<span>::</span>VALUE_OPTIONAL, 'An example option.', null),
</span>		<span>);
</span>	<span>}
</span><span>}</span>
      登录后复制
      登录后复制
      登录后复制

      注意：此版本将在最终存储库上标记为V3。

      结论如何创建Laravel CSS-Minify命令 在本文中，我们了解了如何创建和扩展Laravel命令。 Laravel有很多可以探索的内置命令，您还可以检查我们在Github上的最终存储库以测试最终结果。问题？评论？您想查看更多工匠司令部教程吗？让我们知道！

      Laravel CSS Minify Command

      上的常见问题（常见问题解答）

      在Laravel中缩小CSS的目的是什么？它涉及删除不必要的字符，例如从CSS文件中的空格，评论和线路中断。此过程减少了CSS文件的大小，这又减少了需要传输给客户端的数据量。这可以显着改善您的网站或应用程序的负载时间，提供更好的用户体验。

      > Laravel Mix如何帮助CSS Minification？

      Laravel Mix是一种功能强大的工具，可提供流利的工具用于定义WebPack的API为您的Laravel应用程序构建步骤。它支持几个常见的CSS和JavaScript前处理器，包括缩小。通过使用Laravel Mix，您可以轻松地使用单个命令来缩小CSS文件，而无需手动删除不必要的字符。这不仅节省了时间，而且还可以确保您的CSS文件尽可能优化。

      我可以在不使用laravel mix的情况下缩小CSS文件吗？

      是的，您可以在不使用laravel的情况下缩小CSS文件混合。有几种在线工具和NPM软件包可以帮助您缩小CSS文件。但是，建议使用Laravel Mix，因为它与Laravel无缝集成，并提供了一种简单便捷的方法来管理和优化您的CSS文件。

      >

      >在Laravel中缩小CSS时可能会遇到的潜在问题？

      > >在Laravel中缩小CSS通常是一个简单的过程，如果您的CSS文件包含语法错误，您可能会遇到问题。这些错误会导致缩小过程失败，从而导致不优化的CSS文件。因此，重要的是要确保您的CSS文件在尝试缩小它们之前是无错误的。

      如果在CSS Minification期间遇到问题，我如何在CSS Minification in Laravel中的CSS Minification中调试问题？在Laravel中，您可以使用Laravel Mix的源地图功能进行调试。源地图是将缩小的CSS文件映射回原始源文件的文件，使您可以轻松地跟踪和解决任何问题。

      我可以在Laravel中自动化CSS Minification的过程？是的，您可以使用Laravel Mix的版本控制功能来自动化Laravel中CSS缩小的过程。每当您运行生产构建命令时，此功能都会自动减小CSS文件。这样可以确保您的CSS文件始终得到优化，而无需每次手动缩小它们。

      > CSS Minification如何影响我的Laravel应用程序的性能？

      css Minification可以显着提高性能您的Laravel申请。通过减少CSS文件的大小，您可以减少需要传输到客户端的数据量。这可能会导致加载时间更快，提供更好的用户体验。

      >我可以使用Laravel Mix缩小其他类型的文件吗？

      是的，除了CSS文件，也可以使用Laravel Mix缩小JavaScript文件。这可以进一步优化您的Laravel应用程序，减少需要将需要传输到客户端的数据量。

      >缩放和串联CSS文件之间有什么区别？不必要的字符降低大小，同时串联CSS文件涉及将多个CSS文件组合到一个文件中。这两个过程都可以帮助优化您的Laravel应用程序，但它们的目的不同。缩小缩小每个单独的CSS文件的大小，同时通过将多个文件组合到一个。

      >我如何确保如何正确提供我的CSS文件？为了确保正确提供了缩小的CSS文件，您可以使用Laravel Mix的版本操作功能。此功能将唯一的哈希附加到您缩小的CSS文件的文件名上，以确保客户端始终接收您的CSS文件的最新版本。

以上是如何创建Laravel CSS-Minify命令的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：分形：实用的演练 下一篇：Beta的PHP 5.6结束
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2798
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2926
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2441
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2356
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2426
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板