Laravel CSS-Minifyコマンドを作成する方法

この記事では、Laravelの職人コマンドラインツールの使用方法と、カスタマイズされたコマンドを作成する方法を学びます。この記事を最大限に活用するには、Laravelフレームワークに精通する必要があることに注意してください。

キーテイクアウト

Laleveray Laravel Artisan：Laravelの職人コマンドラインツールを利用して、CSS模倣のカスタムコマンドを作成し、Web開発プロジェクトのワークフロー効率を高めます。

カスタムコマンドの作成：「PHP Artisanコマンド：Make`を使用してカスタムコマンドを簡単に作成します。名前を挙げ、保存、名前を付けるオプションを使用して、Laravelアプリケーションでテーラード機能を可能にします。
• 縮小オプション：CSSファイルの連結とコメントの保存を処理するためのコマンドにオプションを実装し、さまざまな開発ニーズに基づいて柔軟性を提供します。
コマンド登録：「artisan.php」ファイルまたはパッケージ開発のためのサービスプロバイダーのいずれかを使用して、Laravelの職人システム内に新しいコマンドを登録するようにしてください。
• 実行と出力：コマンドを使用して、連結とコメントの保存のためのオプションのフラグを使用して、CSSファイルをマイニングし、実行プロセス中に有益なメッセージを使用してコマンドフィードバックを改善します。
• 何を構築していますか
このチュートリアルでは、CSSアセットを監督するコマンドを作成します。これは次のように使用されます。
• output_path ：（必須）ミニフォームファイルを保存するパス（style.css-> style.min.css）。
file1 ... filen ：（必須）マイニル化するファイルのリスト。

- コメント：（オプション）このオプションを追加してコメントを保持します

- concat ：（オプション）onifiedファイルをall.min.css。

laravelコマンドとは

<span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>

職人は、Laravelのコマンドラインユーティリティの名前です。事前定義されたコマンドのセットが付属しており、PHP Artisanリストでリストできます。特定のコマンドのヘルプを表示したい場合は、PHP Artisan Helpコマンドを使用できます。
• CSS Minifierコマンドの作成
• 職人コマンドを作成するには、コマンドを使用できます。コマンドを作成します。このコマンドは、1つの引数を受け入れます
• 名前：コマンドのクラス名。
および3つのオプション：

- コマンド：コマンドを実行するために入力する必要がある名前

- パス：​​デフォルトでは、コマンドはApp/Commandsフォルダー内に保存されますが、このオプションで変更できます。 今、コマンドを作成するには、PHP Artisanコマンドを使用します。CSSMINCOMMANDを作成します - COMMAND = CSSMINは、アプリ/コマンドディレクトリ内にCSSMINCOMMAND.PHPファイルを作成します。

<span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>

getArguments：この関数は、コマンドに渡すべき引数の配列を返します（例：CSSMINコマンドに渡すファイルのリスト）

• getoptions：コマンドに渡すことができるオプションまたはスイッチのリストを返します。 （例えば - コメント）。
注：オプションには値がある場合とない場合があります。コメントはコマンドに渡された場合に真実を返すフラグです。

コマンドが実行されると、火災方法が呼び出されるため、コマンドロジックを配置する必要があります。 コマンドの登録

コマンドPHP Artisan cssmin 'args'を実行しようとすると、「CSSMIN」が定義されていません。

コマンドを登録するには、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>

名前：引数を取得するときに使用するキー名。

モード：3つのオプションのいずれかを持つことができます：

<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 ::必須：引数が必要です。

• inputargument :: optional：引数はオプションです。
• inputargument :: is_array：引数は複数の値を受け入れます（ex：file1 ... filen）

  ただし、inputargument :: is_array |のように組み合わせることができますinputargument ::必須（引数が必要であり、配列である必要があります）

  説明：コマンドヘルプを印刷するときに役立ちます。
  • defaultValue：引数が提供されていない場合
  • したがって、getargumentsメソッドは次のとおりです
  • 注：IS_ARRAY引数を使用する場合、返された引数アレイの最後の引数である必要があります。 （明らかに）。
  オプション
  cssminコマンドには2つのオプションしかありません。オプションを定義するには、配列を渡します：
• 名前：オプションの名前（例：コメント）。

ショートカット：オプションの短いバージョン（ex：--verbose and -v）。

モード：4つのオプションのいずれか（inputoption :: value_is_array、input_optional、inputoption :: value_required、inputoption :: value_none）にすることができます。最初の3つの値は引数に似ています。

<span>array( 'name', 'mode', 'description', 'defaultValue' )</span>

value_none：オプションがブールフラグであることを示します（ex： - verbose）。

説明：コマンドヘルプを印刷するときに役立ちます

defaultValue：オプション値が提供されていない場合

<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>

したがって、私たちの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>

最後に、私たちの火災方法は2つの方法のみを呼び出します。

<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ファイルをパブリック/CSSディレクトリにコピーしてから、コマンドを実行します。

最初のコマンドは、public/cssディレクトリに2つのファイル（style.min.css、responsive.min.css）を作成します。

<span>array('name', 'shortcut', 'mode', 'description', 'defaultValue')</span>

- コメントと - concatフラグを使用したため、コメントが残っている2つのファイルを含む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とは異なるものを入力する場合、質問メッセージとデフォルト値の2つの引数を取ります。

askメソッドは、ユーザーにy/nのみではなく入力を依頼し、空のままにしている場合、デフォルト値が返されます。

選択方法は、ユーザーに選択できる番号付きリストを提供し、空のままにしている場合、デフォルトの値が返されます。

<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職人ルート）のリストをダンプすることに慣れています。

Symfonyは、そのようなテーブルを簡単に印刷できる関数を提供します。例については、ドキュメントを確認してください。次に、Symfony Console Helpersを使用する方法を確認します。 Symfony Console Helpersを使用して

Symfony Helpersの使用を説明するために、進行状況ヘルパーを使用して、ユーザーがジョブの進捗状況について最新の状態に保ちます。

initメソッドの最後に、ヘルパーセットからの進捗が必要になり、進行状況を開始します。

startメソッドは2つの引数を受け入れます。$ this-> outputは、symfonyコンソールからのコンソールoutインスタンスです。 2番目の引数は、ステップの最大数です。

<span>cssmin 'output_path' 'file1'...'fileN' --comments --concat</span>

プロセスファイルメソッドでファイルを処理するたびに、1つのステップで進行状況バーを進めます。ジョブが完了すると、進行状況バーを終了し、通知メッセージを印刷します。

複数のファイルを使用してコマンドを試したり、スリープ関数ラインを解除してライブ効果を確認できます。

<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コマンドをどのように作成および拡張するかを学びました。 Laravelには、探索できる多くの組み込みコマンドがあり、GitHubの最終リポジトリを確認して最終結果をテストすることもできます。質問？コメント？もっと職人のコマンドチュートリアルを見たいですか？お知らせください！ Laravel CSS Minify Command

に関するよくある質問（FAQ）

laravelでCSSを削除する目的は何ですか？

​​

laravelでCSSを削除することは、ウェブサイトまたはアプリケーションを最適化する上で重要なステップです。これには、CSSファイルからスペース、コメント、ラインブレイクなどの不要な文字を削除するプロセスが含まれます。このプロセスは、CSSファイルのサイズを削減し、クライアントに転送する必要があるデータの量を減らします。これにより、ウェブサイトまたはアプリケーションの負荷時間を大幅に改善し、ユーザーエクスペリエンスを向上させます。 LaravelアプリケーションのWebpackビルドステップを定義するためのAPI。これは、いくつかの一般的なCSSおよびJavaScriptの前処理をサポートしています。 Laravel Mixを使用することにより、不要な文字を手動で削除することなく、単一のコマンドでCSSファイルを簡単にマイニングできます。これにより、時間を節約するだけでなく、CSSファイルが可能な限り最適化されることも保証します。ミックス。 CSSファイルを削除するのに役立ついくつかのオンラインツールとNPMパッケージが利用可能です。ただし、Laravelミックスを使用することは、Laravelとシームレスに統合され、CSSファイルを管理および最適化するためのシンプルで便利な方法を提供するため、推奨されます。LaravelでCSSを模倣している間に直面する可能性のある問題は

LaravelでCSSを模倣することは一般に簡単なプロセスです。CSSファイルに構文エラーが含まれている場合、問題が発生する可能性があります。これらのエラーにより、模倣プロセスが故障し、最適化されていないCSSファイルが生じる可能性があります。したがって、CSSファイルがそれらを監督しようとする前に、CSSファイルがエラーがないことを確認することが重要です。 Laravelでは、Laravel Mixのソースマップ機能を使用してデバッグできます。ソースマップは、模倣されたCSSファイルを元のソースファイルにマッピングするファイルであり、問​​題を簡単にトレースして修正できるようにします。はい、Laravel Mixのバージョン機能を使用して、LaravelでのCSSミニフィケーションのプロセスを自動化できます。この機能は、制作ビルドコマンドを実行するたびにCSSファイルを自動的に模倣します。これにより、CSSファイルが毎回手動で削除することなく、常に最適化されます。 Laravelアプリケーションの。 CSSファイルのサイズを縮小することにより、クライアントに転送する必要があるデータの量を減らすことができます。これにより、読み込み時間が短縮され、ユーザーエクスペリエンスが向上します。

Laravel Mixを使用して他のタイプのファイルをマイニングできますか？ JavaScriptファイルをマイニングします。これにより、Laravelアプリケーションをさらに最適化し、クライアントに転送する必要があるデータの量を減らすことができます。 CSSファイルを連結するには、サイズを縮小するための不要な文字には、複数のCSSファイルを単一のファイルに結合することが含まれます。どちらのプロセスもLaravelアプリケーションを最適化するのに役立ちますが、さまざまな目的に役立ちます。模倣すると、個々のCSSファイルのサイズが削減されますが、連結すると、複数のファイルを1つに組み合わせることでHTTP要求の数が減少します。模倣されたCSSファイルが正しく提供されるようにするには、Laravel Mixのバージョン機能を使用できます。この機能は、マニーム化されたCSSファイルのファイル名に一意のハッシュを追加し、クライアントが常に最新バージョンのCSSファイルを受信するようにします。

以上がLaravel CSS-Minifyコマンドを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。