Cara Membuat Perintah CSS-Minify Laravel

Dalam artikel ini, anda akan belajar cara menggunakan alat baris Artisan Command Laravel, dan bagaimana untuk membuat arahan tersuai. Perhatikan bahawa anda perlu mengenali kerangka Laravel untuk mendapatkan sebahagian besar artikel ini.

Takeaways Key

Leverage Laravel Artisan: Gunakan alat baris perintah Artisan Laravel untuk membuat arahan tersuai untuk pengorbanan CSS, meningkatkan kecekapan aliran kerja dalam projek pembangunan web.
• Penciptaan Perintah Custom: Mudah membuat arahan tersuai menggunakan `PHP Artisan Command: Make` dengan Pilihan untuk Penamaan, Simpan, dan Namespacing, yang membolehkan fungsi yang disesuaikan dalam aplikasi Laravel anda.
• Pilihan Minifikasi: Melaksanakan pilihan dalam arahan anda untuk mengendalikan CSS Fail Concatenation dan pemeliharaan komen, memberikan fleksibiliti berdasarkan keperluan pembangunan yang berbeza.
• Pendaftaran Perintah: Pastikan untuk mendaftarkan arahan baru anda dalam sistem artisan Laravel untuk menjadikannya boleh dilaksanakan, sama ada melalui fail `artisan.php` atau pembekal perkhidmatan untuk pembangunan pakej.
• Pelaksanaan dan output: Gunakan arahan untuk meminimumkan fail CSS, dengan bendera pilihan untuk pemeliharaan dan pemeliharaan komen, dan meningkatkan maklum balas arahan dengan mesej bermaklumat semasa proses pelaksanaan.
• apa yang kita bina

Dalam tutorial ini kita akan membina arahan untuk meminimumkan aset CSS kami, yang akan digunakan seperti ini:

output_path: (diperlukan) jalan untuk menyimpan fail minified, (style.css -> style.min.css).

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

file1 ... filen: (diperlukan) senarai fail untuk minify.
-Komen: (Pilihan) Tambahkan pilihan ini untuk menyimpan komen.
-Concat: (Pilihan) Menggabungkan fail minified ke dalam satu fail yang dipanggil All.min.css.
• apakah arahan laravel

Artisan adalah nama utiliti baris perintah di Laravel. Ia dilengkapi dengan satu set perintah yang telah ditetapkan, yang boleh anda senaraikan dengan senarai Artisan PHP. Jika anda ingin menunjukkan bantuan untuk arahan tertentu, anda boleh menggunakan arahan bantuan php artisan.

Membuat Perintah Minifier CSS

Untuk membuat perintah artisan, anda boleh menggunakan perintah: membuat perintah. Perintah ini menerima satu hujah:

Nama: Nama kelas untuk arahan.

• dan tiga pilihan:

-perintah: nama yang harus ditaip untuk menjalankan perintah.

-Path: Secara lalai arahan disimpan dalam folder App/Commands, bagaimanapun, anda boleh mengubahnya dengan pilihan ini.
-ruang nama: Anda boleh menggunakan pilihan ini untuk ruang nama set arahan anda, mis. Dalam perintah perintah: Buat, perintah membuat di bawah ruang nama arahan.
• Sekarang, untuk membuat perintah kami, kami akan menggunakan arahan Artisan PHP: Buat CSSMINCOMMAND -Kommand = CSSMinWhich akan membuat fail CSSMINCOMMAND.PHP dalam direktori App/Commands kami.

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

kelas cssmincommand kami memanjangkan IlluminateConsolecommand dan mengatasi dua kaedah (getArguments, getOptions).

• GetArguments: Fungsi ini mengembalikan pelbagai argumen yang harus diserahkan kepada perintah, (contohnya: senarai fail yang kita lalui ke perintah cssmin).
• GetOptions: Mengembalikan senarai pilihan atau suis yang anda boleh lulus ke arahan. (mis. -Comments).

NOTA: Pilihan mungkin atau mungkin tidak mempunyai nilai, -Comments hanya bendera yang mengembalikan benar jika ia diserahkan kepada perintah, sedangkan --ouptput = 'awam/aset' akan mengembalikan nilai.

Apabila arahan anda dilaksanakan, kaedah api dipanggil, jadi ini adalah di mana kita perlu meletakkan logik arahan kita.

mendaftarkan arahan

Jika anda cuba menjalankan arahan kami php artisan cssmin 'args' anda akan mendapat arahan "cssmin" tidak ditakrifkan.

untuk mendaftarkan arahan, anda perlu menambahkannya ke fail artisan.php:

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

Jika anda tidak mahu meletakkan arahan anda dalam fail artisan.php, anda boleh membuat fail berasingan dan memasukkannya, atau jika anda membuat pakej, anda boleh mendaftarkannya dalam penyedia perkhidmatan anda.

Argumen

Dalam kaedah GetArguments kami, kami akan menentukan output dan fail kami.

Untuk menentukan hujah, kita perlu lulus pelbagai nilai:

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

Nama: Nama kunci yang akan digunakan semasa mengambil hujah.
• Mod
• : boleh mempunyai salah satu daripada tiga pilihan:
  inputArgument :: diperlukan: argumen diperlukan.
  inputArgument :: Pilihan: Argumen adalah pilihan.
  inputArgument :: is_array: argumen menerima pelbagai nilai (ex: file1 ... filen).
  Walau bagaimanapun, anda boleh menggabungkan mereka seperti inputArgument :: is_array | InputArgument :: diperlukan (argumen diperlukan dan mesti menjadi array).
  Penerangan: Berguna apabila mencetak bantuan arahan.
• DefaultValue: Jika hujah tidak disediakan.
jadi kaedah getArguments kami akan menjadi:

Nota: Apabila menggunakan argumen is_array, ia harus menjadi yang terakhir pada array argumen yang dikembalikan. (jelas).

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

Pilihan

Perintah CSSMIN kami hanya akan mempunyai dua pilihan. Untuk menentukan pilihan kami lulus array:

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

Nama: Nama pilihan anda (Ex: Comments).

• pintasan: versi pilihan anda yang lebih pendek (ex: --verbose dan -v).
mod: boleh menjadi salah satu daripada empat pilihan (inputoption :: value_is_array, inputoption :: value_optional, inputoption :: value_required, inputoption :: value_none), tiga nilai pertama adalah serupa dengan argumen.

• value_none: Menunjukkan bahawa pilihannya adalah bendera boolean (ex: --verbose).
Penerangan: Berguna apabila mencetak bantuan arahan.

• DefaultValue: Jika nilai pilihan tidak disediakan.
jadi kaedah getOptions kami ialah:

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

menjalankan perintah

Apabila kaedah api kita dipanggil kita perlu mengumpulkan hujah dan pilihan kita. Kita boleh membuat fungsi yang berasingan untuk melakukannya untuk kita:

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

Kaedah hujah dan pilihan mengambil kunci sebagai hujah dan mengembalikan nilai yang sesuai.

Untuk memastikan contoh kami bersih dan mudah kami akan menggunakan fungsi mudah ini dengan pengubahsuaian kecil untuk proses minifikasi.

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

Sekarang untuk memproses hujah -hujah kami (fail) kami akan membuat kaedah yang berasingan untuk melakukan pekerjaan.

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

Akhirnya, kaedah kebakaran kami hanya akan memanggil kedua -dua kaedah:

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

Petua: Anda juga boleh menjalankan arahan luaran menggunakan kaedah panggilan.

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

Untuk menguji arahan kami, kami akan menyalin beberapa fail CSS ke dalam direktori awam/CSS kami, dan kemudian jalankan arahan.

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

Perintah pertama akan membuat dua fail (style.min.css, responsif.min.css) pada direktori awam/CSS.

Kerana kami menggunakan bendera -komitmen dan -concat, kami akan mendapatkan fail yang dipanggil all.min.css yang mengandungi dua fail dengan komen yang tersisa.

Perintah kami tidak begitu deskriptif dan tidak memberikan sebarang mesej atau pemberitahuan!

Meningkatkan perintah

Sebelum kita meneruskan, pada repositori github terakhir saya akan membuat tag baru untuk arahan kami supaya anda dapat menukar dan menguji setiap satu.

Untuk membuat arahan sedikit verbose, Laravel memberikan kami beberapa fungsi output:

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

Ini akan output:

di samping hanya memaparkan mesej, anda boleh meminta pengguna untuk mendapatkan maklumat, contohnya:

Kaedah mengesahkan mengambil dua argumen, mesej soalan dan nilai lalai jika pengguna menaip sesuatu yang berbeza daripada 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>

Kaedah Ask akan meminta pengguna untuk input dan bukan hanya y/n, dan jika ia dibiarkan kosong, nilai lalai dikembalikan.

• Kaedah pilihan akan memberi pengguna senarai nombor untuk dipilih, dan jika ia dibiarkan kosong, nilai lalai dikembalikan.

• Kaedah rahsia akan meminta pengguna dengan soalan dan menyembunyikan menaip, tetapi input pengguna akan dikembalikan.

• Malah, Laravel hanya membuat API Konsol Symfony lebih mudah dan lebih jelas, dan terdapat lebih banyak lagi jika anda mahu menggali.

mari kita membuat arahan kami lebih verbose dan pastikan pengguna dikemas kini mengenai tugas yang dilakukan.

• Fungsi kami kini mencetak beberapa mesej berguna untuk menjejaki apa yang sedang berlaku.

nota: Ini akan ditandakan sebagai v2 perintah kami di repositori GitHub.

Apabila membuat aplikasi, kami digunakan untuk membuang senarai laluan yang ada (laluan Artisan PHP).

<span>private function processFiles(){
</span>        <span>// array of minified css
</span>        <span>$css_result = [];
</span>        
        <span>foreach ( $this->files as $file ) {
</span>            <span>//read file content
</span>            <span>$file_content = file_get_contents( $file );
</span>            <span>//minify CSS and add it to the result array
</span>            <span>$css_result[] = $this->minify( $file_content, $this->comments );
</span>        <span>}//foreach
</span>        
        <span>// if the concat flag is true
</span>        <span>if( $this->concat ){
</span>            <span>// join the array of minified css
</span>            <span>$css_concat = implode( PHP_EOL, $css_result );
</span>            <span>// save to file
</span>            <span>file_put_contents($this->output_path . '/all.min.css', $css_concat);
</span>        <span>}//if
</span>        <span>else{
</span>            <span>foreach ($css_result as $key => $css) {
</span>                <span>//remove '.css' to add '.min.css'
</span>                <span>$filename = basename( $this->files[$key], '.css' ) . '.min.css';
</span>                <span>// save to file
</span>                <span>file_put_contents($this->output_path . '/' . $filename, $css);
</span>            <span>}//for
</span>        <span>}//else
</span>
    <span>}//processFiles</span>

Symfony menyediakan fungsi yang membolehkan anda mencetak jadual sedemikian dengan mudah. Semak dokumentasi untuk contoh. Kami akan melihat seterusnya bagaimana kita boleh menggunakan beberapa pembantu konsol Symfony.

Menggunakan Pembantu Konsol Symfony

Untuk menggambarkan penggunaan beberapa pembantu Symfony, kami akan menggunakan pembantu kemajuan untuk memastikan pengguna dikemas kini mengenai kemajuan kerja.

Pada akhir kaedah init kami, kami akan memerlukan kemajuan dari Helperset, kemudian mulakan bar kemajuan kami.

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

Kaedah permulaan menerima dua argumen, $ this-> output adalah contoh konsoleouput dari konsol Symfony. Hujah kedua adalah bilangan maksimum langkah.

Setiap kali kami memproses fail dalam kaedah ProcessFiles kami, kami akan memajukan bar kemajuan dengan satu langkah, dan apabila kerja selesai, kami akan menamatkan bar kemajuan dan mencetak mesej pemberitahuan.

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

anda boleh mencuba arahan dengan pelbagai fail atau uncomment garis fungsi tidur untuk melihat kesan langsung.

Nota: Versi ini akan ditandakan sebagai V3 pada repositori akhir.

Kesimpulan

Dalam artikel ini kita telah belajar bagaimana membuat dan memperluaskan arahan Laravel. Laravel mempunyai banyak arahan terbina dalam yang boleh anda pelajari, dan anda juga boleh menyemak repositori terakhir kami di GitHub untuk menguji hasil akhir. Soalan? Komen? Adakah anda ingin melihat lebih banyak tutorial arahan Artisan? Marilah kita tahu!

Soalan Lazim (Soalan Lazim) di Laravel CSS Minify Command

Apakah tujuan meminimumkan CSS dalam Laravel? Ia melibatkan proses mengeluarkan aksara yang tidak perlu seperti ruang, komen, dan pemecahan garis dari fail CSS. Proses ini mengurangkan saiz fail CSS, yang seterusnya mengurangkan jumlah data yang perlu dipindahkan kepada pelanggan. Ini dapat meningkatkan masa beban laman web atau aplikasi anda dengan ketara, memberikan pengalaman pengguna yang lebih baik. API untuk Menentukan Webpack Membina Langkah untuk Aplikasi Laravel anda. Ia menyokong beberapa CSS dan pra-pemproses JavaScript, termasuk minifikasi. Dengan menggunakan campuran Laravel, anda boleh dengan mudah meminimumkan fail CSS anda dengan satu arahan, tanpa perlu menghapuskan aksara yang tidak perlu secara manual. Ini bukan sahaja menjimatkan masa tetapi juga memastikan bahawa fail CSS anda dioptimumkan yang mungkin. Campurkan. Terdapat beberapa alat dalam talian dan pakej NPM yang boleh membantu anda meminimumkan fail CSS anda. Walau bagaimanapun, menggunakan campuran Laravel disyorkan kerana ia mengintegrasikan dengan lancar dengan Laravel dan menyediakan cara yang mudah dan mudah untuk mengurus dan mengoptimumkan fail CSS anda.

Apakah isu -isu yang mungkin saya hadapi semasa meminimumkan CSS di Laravel? Kesalahan ini boleh menyebabkan proses minifikasi gagal, mengakibatkan fail CSS yang tidak dioptimumkan. Oleh itu, penting untuk memastikan bahawa fail CSS anda bebas ralat sebelum cuba meminimumkannya. Di Laravel, anda boleh menggunakan ciri Peta Sumber Laravel Mix untuk debug mereka. Peta Sumber adalah fail yang memetakan fail CSS minified kembali ke fail sumber asal, yang membolehkan anda dengan mudah mengesan dan membetulkan sebarang isu. Ya, anda boleh mengautomasikan proses minifikasi CSS di Laravel dengan menggunakan ciri versi Laravel Mix. Ciri ini secara automatik meminimumkan fail CSS anda setiap kali anda menjalankan arahan membina pengeluaran. Ini memastikan bahawa fail CSS anda sentiasa dioptimumkan, tanpa perlu meminimumkannya secara manual setiap kali. aplikasi Laravel anda. Dengan mengurangkan saiz fail CSS anda, anda boleh mengurangkan jumlah data yang perlu dipindahkan kepada pelanggan. Ini boleh menghasilkan masa beban yang lebih cepat, memberikan pengalaman pengguna yang lebih baik. Untuk meminimumkan fail JavaScript. Ini dapat mengoptimumkan lagi aplikasi Laravel anda, mengurangkan jumlah data yang perlu dipindahkan kepada pelanggan. Watak -watak yang tidak perlu untuk mengurangkan saiz mereka, sementara menggabungkan fail CSS melibatkan menggabungkan pelbagai fail CSS ke dalam satu fail. Kedua -dua proses dapat membantu mengoptimumkan aplikasi Laravel anda, tetapi mereka melayani tujuan yang berbeza. Minifikasi mengurangkan saiz setiap fail CSS individu, sementara concatenating mengurangkan bilangan permintaan HTTP dengan menggabungkan beberapa fail ke dalam satu. Untuk memastikan bahawa fail CSS yang minifikasi anda disampaikan dengan betul, anda boleh menggunakan ciri versi Laravel Mix. Ciri ini menambahkan hash unik ke fail fail fail CSS anda yang minifikasi, memastikan pelanggan sentiasa menerima versi terkini fail CSS anda.

Atas ialah kandungan terperinci Cara Membuat Perintah CSS-Minify Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!