Temui Elixir, cara Laravel untuk menyusun aset

menyelaraskan aliran kerja laravel anda dengan elixir: panduan komprehensif

Banyak pemaju web menggunakan pelbagai alat untuk meningkatkan aliran kerja mereka dan mengekalkan kod lean. Walau bagaimanapun, alat yang memerlukan penyusunan, seperti CSS dan preprocessors JavaScript, kadang -kadang boleh melambatkan proses. Di sinilah pelari tugas seperti Gulp dan Elixir Shine. Tutorial ini meneroka Elixir, alat node.js mesra pengguna yang dibina oleh Jeffrey Way, yang direka untuk memudahkan pengurusan tugas Gulp, terutamanya dalam rangka kerja Laravel.

Panduan ini memberi tumpuan kepada kompilasi aset di Laravel, tetapi juga menyentuh kebolehgunaannya yang lebih luas.

Konsep Utama:

Elixir Streamlines Compilation Asset dengan membungkus tugas -tugas Gulp dalam antara muka node.js bersih.

• Pemasangan memerlukan node.js, gulp, dan pakej
(melalui npm).
• laravel-elixir Elixir menggunakan laluan sumber dan output lalai, tetapi ini boleh disesuaikan melalui argumen kaedah atau objek konfigurasi.
• Sokongan terbina dalam termasuk kompilasi preprocessor CSS, pemprosesan JavaScript, dan versi aset.
• Tugas -tugas tersuai mudah dibuat menggunakan API Elixir, dan ia mengintegrasikan dengan lancar dengan templat bilah Laravel.
• Elixir mengautomasikan dan menyelaraskan alur kerja, menyokong pelbagai preprocessors CSS dan JavaScript, meningkatkan kecekapan pembangunan Laravel.

Prasyarat dan pemasangan:

node.js:
1. penting apabila gulp berjalan dalam node.js. Homestead Peningkatan pengguna sudah mempunyai ini.
Gulp:
2. Elixir bergantung pada Gulp. Pasang secara global menggunakan NPM: (kecuali sudah dipasang melalui Homestead bertambah baik). npm install --global gulp
Laravel Elixir:
3. Projek Laravel biasanya termasuk dalam . Pasang menggunakan laravel-elixir dalam direktori root projek anda. Untuk persekitaran bukan laraver: package.json npm install npm install laravel-elixir --save

Sebelum anda memulakan:

Elixir mengandaikan fail sumber (

,

, .less, dan lain -lain) tinggal di .sass, dengan output ke .coffee secara lalai. ./resources/assets/ ./public/

Tugas Elixir ditakrifkan dalam gulpfile.js anda menggunakan fungsi elixir, yang mengambil panggilan balik dengan objek mix (menyediakan semua kaedah yang tersedia).

elixir(function(mix) {
  mix.less('styles.less');
});

lulus array atau wildcard menyusun dan menggabungkan pelbagai fail ke dalam app.css atau app.js. Nama fail tunggal menghasilkan fail output yang dinamakan secara identik. Lalai ini boleh disesuaikan.

Contoh praktikal:

• penyusunan kurang:

elixir(function(mix) {
    mix.less("styles.less");
});

Compiles resources/assets/less/styles.less to public/css/styles.css. Kompilasi SASS menggunakan mix.sass(). Elixir mengendalikan awalan vendor.

• Menyusun CoffeaScript:

elixir(function(mix) {
    mix.coffee(['controllers.coffee', 'services.coffee']);
});

menyusun fail kopi dari resources/assets/coffee/ ke public/js/app.js.

Teknik lanjutan:

• Pelbagai fail: sass(), less(), coffee() menerima fail tunggal, wildcard, tatasusunan, atau tiada argumen (untuk semua fail dalam direktori lalai).

• jalur sumber/output adat:

  • argumen: hujah kedua menentukan direktori output:

    elixir(function(mix) {
      mix.less(['file1.less', 'file2.less'], 'custom/path');
    });

  • Laluan penuh: awalan dengan ./ untuk menentukan laluan relatif kepada akar projek.

  • Objek Config: Kaedah pilihan adalah mengubah css.output dan js.output dalam objek Elixir config (dibincangkan kemudian).

• Concatenation: Gunakan scripts() untuk JavaScript dan styles() untuk CSS. Ini menerima argumen untuk laluan sumber dan output, sama seperti kaedah penyusunan. scriptsIn() dan stylesIn() menggabungkan semua fail dalam direktori yang ditentukan.

• Jade to Blade: Memerlukan laravel-elixir-jade (npm install laravel-elixir-jade@0.1.8 --save-dev). Kaedah jade() menyusun jed ke templat bilah.

• Versi fail: mix.version() Mendapat hash ke filename, mencegah masalah caching. Gunakan penolong elixir() dalam templat bilah untuk merujuk fail versi.

• Konfigurasi

  : tingkah laku Elixir dikawal melalui objek config dalam node_modules/laravel-elixir/Config.js. Mengatasi lalai dengan mengubahsuai objek elixir.config dalam gulpfile.js atau membuat fail elixir.json dalam root projek anda.

• Tugas -tugas tersuai: Memperluas fungsi Elixir menggunakan kaedah extend untuk membuat tugas gulp tersuai.

senario dunia nyata (laravel/angular):

Bahagian ini memperincikan contoh lengkap yang menunjukkan keupayaan Elixir dalam projek Laravel/Angular. Ia meliputi mengkonfigurasi elixir, menyusun kurang dan coffeescript, menyusun jed ke bilah, dan aset versi. Lengkap gulpfile.js disediakan, mempamerkan kaedah chaining.

tugas menjalankan:

Run gulp untuk melaksanakan semua tugas elixir. gulp watch memantau fail untuk perubahan dan secara automatik menjalankan tugas -tugas. Tugas individu boleh dijalankan (mis., gulp less). Gunakan gulp --production untuk pengurangan.

Kesimpulan:

Elixir memudahkan pengurusan tugas Gulp, menyediakan antara muka mesra pengguna untuk tugas kompilasi aset biasa. Fleksibiliti, kesesuaian, dan integrasi dengan Laravel menjadikannya alat yang berharga untuk menyelaraskan aliran kerja pembangunan. Panduan ini memberikan gambaran keseluruhan yang komprehensif, tetapi penjelajahan lanjut dokumentasi Elixir digalakkan untuk fungsi maju.

Atas ialah kandungan terperinci Temui Elixir, cara Laravel untuk menyusun aset. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!