Bermula dengan Alat CLI Yayasan 6 '

Yayasan 6 Alat baris perintah Bermula Panduan

Yayasan 6 menyediakan pelbagai cara untuk digunakan dan alat. Anda boleh memuat turun fail statik, atau menggunakan pelancaran yeti (aplikasi desktop untuk Mac, versi Windows akan datang tidak lama lagi).

Little dikenali sebagai Yayasan 6 juga menyediakan satu set alat baris arahan, yang akan diterangkan dalam artikel ini. Yayasan 6 adalah rangka kerja front-end yang sangat fleksibel yang mempunyai alat pemaju yang kuat sebagai tambahan kepada banyak ciri CSS yang jelas dan plugin JavaScript.

mata utama

Yayasan 6 menyediakan satu set alat baris arahan yang memberikan pemaju kawalan yang lebih besar ke atas proses membina, termasuk kompilasi SCSS, sambungan, pemampatan, pengoptimuman imej, dan templat.
Untuk menggunakan alat CLI Yayasan 6, pemaju perlu memasang NodeJS, NPM, Git, Gulp, dan Bower. Anda boleh memasang Yayasan-CLI menggunakan
• . npm install --global foundation-cli
Yayasan CLI menggunakan Gulp dan Bower di latar belakang. Gulp adalah tugas yang memakan masa dalam aliran kerja pembangunan automatik, manakala Bower adalah pengurus pakej web yang membolehkan pemaju memuat turun dan memasang perpustakaan front-end dari baris arahan.
Menggunakan Yayasan CLI, pemaju boleh memuat turun dan memasang templat kosong untuk tiga kerangka asas (tapak, aplikasi, dan e -mel). Templat-templat ini pra-konfigurasi untuk bekerja dengan Gulp dan Bower.
Alat Yayasan CLI juga pra-konfigurasi dengan BrowserSync untuk menyegerakkan ujian penyemak imbas dan tambah nilai masa nyata. Ciri ini membolehkan pemaju melihat perubahan masa nyata pada pelbagai peranti dan resolusi, dengan itu meningkatkan kecekapan pembangunan front-end.

Bilakah anda menggunakan alat CLI Yayasan?

Anda mungkin tertanya -tanya, kerana anda boleh menggunakan fail JavaScript dan CSS statik (yang berfungsi dengan baik), mengapa mengganggu menggunakan alat CLI? Anda mungkin memerlukan struktur standard dan proses yang mudah digunakan, yang OK.

Saya percaya anda boleh mencapai matlamat anda dengan cara ini, tetapi saya faham bahawa banyak pemaju mahu lebih banyak kawalan ke atas proses membina. Ini termasuk kompilasi SCSS, sambungan, mampatan, pengoptimuman imej, dan templat. Saya lebih suka menggunakan alat tambahan ini. Oleh itu, dalam beberapa kes, alat CLI mungkin menjadi pilihan yang lebih baik.

Jika anda menggunakan baris arahan dengan kerap dan tidak pasti apa yang ditawarkan Yayasan 6 dalam hal ini, atau anda tidak menggunakan baris arahan dan mungkin ingin mempelajari sesuatu yang baru, artikel ini adalah untuk anda.

Dapatkan digunakan

Pertama, anda perlu memasang alat NodeJs dan NPM (biasanya dipasang dengan NodeJs). Anda juga memerlukan Git, Gulp, dan Bower, dan Yayasan-CLI akan menggunakan semua alat ini. Anda boleh menjalankan arahan berikut untuk memasang:

$ npm install --global gulp bower

Pada sesetengah sistem, anda mungkin memerlukan akses super, terutamanya apabila memasang pakej NPM di seluruh dunia, jadi anda mungkin perlu menggunakan

sebelum arahan yang diterangkan dalam artikel ini. sudo

Memasang Foundation-CLI

Jika anda sudah mempunyai Yayasan 5 CLI yang dipasang pada komputer anda, anda hanya boleh mengakses satu arahan (bergantung pada konfigurasi persekitaran baris arahan anda). Oleh itu, lebih baik memadam alat lama terlebih dahulu. Anda boleh melakukan ini menggunakan arahan berikut:

$ npm install --global gulp bower

dan pasang alat CLI baru:

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

Anda boleh membaca lebih lanjut mengenai pemasangan dalam dokumentasi yayasan.

Jika anda tidak mahu memasang Yayasan-CLI pada sistem anda dan telah memasang Gulp dan Bower pada masa lalu, hanya klon repositori yang mengandungi templat asas dan gunakan perintah GULP dan NPM dan bukannya perintah asas. Segala-galanya sepatutnya sama seperti ketika menggunakan Yayasan-CLI.

Apakah yang ditawarkan oleh Yayasan CLI?

Seperti yang disebutkan sebelumnya, CLI asas menggunakan Gulp dan Bower di latar belakang. Apa itu Gulp dan Bower? Gulp adalah toolkit yang membantu anda mengautomasikan tugas membosankan atau memakan masa dalam aliran kerja pembangunan anda. Di sini, kita boleh mempertimbangkan kompilasi SCSS, mampatan, sambungan, dan juga melaksanakan pemampatan imej atau tugas berguna yang lain. Bower adalah pengurus pakej web yang membolehkan anda memuat turun dan memasang perpustakaan depan dari baris arahan. Sebagai contoh, memasang jQuery hanya memerlukan satu baris arahan: bower install jquery.

Yayasan CLI Muat turun dan pasang templat kosong untuk tiga kerangka asas (tapak, aplikasi, dan e -mel). Semua templat ini bersedia untuk bekerja dengan Gulp dan Bower dan pra-konfigurasi dengan tugas-tugas Gulp dan sumber pemasangan bower. Ini sama dengan alat seperti yeoman.

Menggunakan Yayasan CLI

Selepas memasang Yayasan-CLI, anda boleh mula menggunakannya dengan menjalankan arahan berikut:

$ npm install --global foundation-cli

seperti yang anda lihat, kami menggunakan foundation bukan foundation-cli. Di samping itu, kami hanya melihat template premium Zurb untuk asas untuk tapak. Kita perlu menggunakan logo --framework untuk memilih bingkai yang betul, dan kita juga perlu menggunakan logo --template untuk memilih templat yang betul. Anda juga boleh memilih templat asas, tetapi saya fikir templat lanjutan jauh lebih baik jika anda ingin melihat lebih dekat.

Selepas memasang, anda harus mempunyai folder projek (nama disediakan semasa proses pemasangan). Juga, semua kebergantungan perlu dipasang di sana. Yang perlu anda lakukan sekarang ialah masuk ke dalam projek yang baru dibuat dan masuk ke dalam folder dan lari:

$ foundation new --framework sites --template zurb

Ini adalah sihir! Ini akan menjalankan tugas membina dan pelayan serta perintah menonton. Ini bermakna ia mencetuskan semua tugas Gulp yang dikonfigurasikan yang dapat anda lihat dalam kod anda. Oleh itu, apabila anda menjalankan arahan ini, anda harus melihat beberapa maklumat di konsol. Maklumat yang paling penting pada masa ini ialah:

$ foundation watch

Berikut adalah maklumat mengenai pelayan yang anda jalankan. Yang pertama adalah aplikasi sebenar anda, dan anda juga mempunyai pelayan UI untuk ujian BrowserSync (kami akan membincangkannya kemudian). Anda dapat melihat bahawa fail aplikasi anda disediakan dari direktori Dist, anda boleh mengakses http://localhost:8000 dalam penyemak imbas anda dan melihat template pelancaran Standard Foundation 6.

Lihat Kandungan Dalaman

Saya fikir ini adalah bahagian yang paling menarik, tetapi sebelum kita sampai ke tahap ini, kita perlu menyelesaikan semua proses pemasangan.

struktur folder, gulpfile.js, sumber javascript/css

Mari kita lihat struktur folder projek yang baru dibuat. Folder yang paling penting ialah src dan dist. Kerja pembangunan anda terutama dilakukan dalam folder src, dan semua fail pengeluaran akan disediakan dalam folder dist. Pelayan yang anda jalankan juga menyajikan fail dari folder tersebut. Ini bermakna anda boleh menyediakan ruang kerja seperti yang diperlukan, tetapi akhirnya, fail siap pengeluaran akan berada di folder dist, yang mana yang anda ingin sediakan sebagai produk siap.

Jadi, bagaimana ini dilaksanakan? Mari kita lihat dokumen yang paling penting di sini - gulpfile.js. Jika anda tidak biasa dengan Gulp, anda mungkin ingin menyemak tutorial pengenalan ini. Gulp tidak kelihatan seperti menakutkan kerana pada mulanya, tetapi penting kerana ini adalah di mana semua sihir berlaku.

Gulp didasarkan pada banyak plugin Gulp yang menambah ciri tambahan melalui pakej NPM yang mudah. Dalam projek asas baru ini, mereka ditakrifkan dalam package.json. Mereka juga akan dimuat turun secara automatik dan dipasang semasa menjalankan foundation new (seperti yang disebutkan di atas), jadi anda tidak perlu bimbang mengenainya.

Apabila anda membuka fail Gulp, anda dapat melihat bahawa setiap tugas (seperti bersih, salinan, sass, dan javascript) ditakrifkan dengan cara yang sama menggunakan plugin Gulp khas yang bertanggungjawab untuk bahagian kerja khusus ini. Di samping itu, seperti yang anda lihat di bahagian bawah fail, terdapat tugas -tugas utama seperti "membina" atau "lalai" yang mengagregatkan tugas lain. Boilerplate asas dikonfigurasi supaya anda pada dasarnya tidak perlu berbuat apa -apa. Sudah tentu, anda boleh menyesuaikan seperti yang diperlukan.

Dengan konfigurasi ini, anda boleh menulis SCSS dalam folder dan fail JavaScript dalam folder src/assets/scss. Anda juga boleh meletakkan imej dalam folder src/assets/js. Apabila anda menjalankan src/assets/img atau foundation watch, semua fail ini akan disalin ke folder foundation build. Bergantung pada pilihan, mereka boleh dimampatkan, atau imej boleh dioptimumkan. Semua ini dikonfigurasikan dalam dist. gulpfile.js

Konfigurasi Gulp dan pluginnya adalah topik artikel lain. Sekarang mari kita lihat fail .html dan gunakan Panini untuk membuat susun atur dan hubungan canggih.

templat panini dan hendal

Panini adalah alat yang hebat dan mudah yang dibina oleh pasukan asas. Dengan Panini, anda boleh membuat halaman dengan susun atur yang konsisten dan bahagian yang boleh diguna semula.

Dalam folder

anda, anda mempunyai fail HTML statik yang boleh anda gunakan dengan segera. Sudah tentu, jika anda hanya mempunyai satu fail, semuanya mudah. Masalah mungkin berlaku apabila anda ingin membuat banyak fail HTML dengan beberapa bahagian yang sama. Ia boleh menjadi footer, sidebar, header, atau banyak elemen lain yang disebut "bahagian". dist

Tanpa Panini, anda perlu menyalin semua kod pendua ke dalam setiap fail HTML, dan jika anda perlu menukar, anda mesti membuat perubahan secara manual dalam setiap fail atau cari dan gantikan dalam editor teks. Dengan Panini, anda boleh melakukan semua ini di satu tempat semasa mengedit, dan semua fail akan diedit dan disalin ke dalam folder dist.

Sama pentingnya, Panini didasarkan pada perpustakaan templat hendal. Ia juga boleh menyusun markdown dalam fail HTML anda. Untuk maklumat lanjut mengenai Panini, lihat dokumentasi Yayasan.

Mari kita lihat struktur folder templat Panini dalam projek. Kita perlu membuka folder src. Di sini kita mempunyai data, susun atur, halaman dan separa. Seperti yang anda harapkan, dalam folder susun atur kita boleh menulis perancah susun atur utama kami. Di sini kita boleh menentukan header dan footer yang akan diulang di semua halaman.

Jika anda mahu menggunakan hanya satu susun atur, hanya namakan fail default.html. Anda akan menemui fail demo seperti dalam projek kami. Jika anda ingin menggunakan pelbagai susun atur, anda boleh membuat lebih banyak fail dengan Tag Badan Khas {{> body}} (lihat default.html contoh), dan anda perlu menggunakan tag khas dalam halaman untuk memberitahu pengkompil yang susun atur halaman harus digunakan. Ini dipanggil perkara depan, seperti yang ditunjukkan di bawah:

$ npm install --global gulp bower

Tanda -tanda ini harus diletakkan di bahagian atas kandungan fail halaman. Ini hanya terpakai kepada halaman yang akan menggunakan susun atur ini, dan semua halaman lain akan menggunakan susun atur lalai.

Mari kita lihat folder halaman. Dalam folder ini, anda akan menemui fail index.html, yang merupakan halaman demo kandungan. Seperti yang anda lihat, ia tidak mempunyai sebarang tag HTML atau badan. Ini kerana ia hanya akan disuntik ke dalam susun atur default.html yang dibincangkan sebelum ini. Sudah tentu, anda boleh menambah halaman yang sama, tetapi beberapa halaman boleh menggunakan susun atur yang berbeza.

Jika anda mahukan beberapa elemen HTML yang kecil dan boleh diguna semula, anda boleh membuatnya dalam folder PartIal. Tiada fail dalam projek demo kami, tetapi ia sangat mudah. Cuma buat fail dengan coretan HTML dan namakan fail. Kemudian, dalam fail susun atur atau fail halaman anda, anda boleh mengimport bahagian ini dengan menggunakan sesuatu seperti {{> my-partial-file}} (perhatikan bahawa tiada sambungan fail). Itu sahaja. Semua kandungan akan disambungkan, disusun dan disalin ke dalam folder dist.

Terdapat juga folder yang dipanggil data. Di sini anda boleh menyediakan beberapa data dalam format fail .json atau .yml. Sebagai contoh, katakan saya mempunyai fail myList.json dalam folder data, yang mempunyai kandungan berikut:

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

Dalam halaman susun atur atau sebahagian daripada fail HTML, saya boleh menggunakan sesuatu seperti yang berikut:

$ npm install --global foundation-cli

Ini membolehkan anda melangkah ke atas data JSON dan menghasilkan beberapa HTML. Kita harus mendapatkan senarai item dengan nama dalam array.

Seperti yang anda lihat, Panini adalah alat yang sangat berguna apabila anda ingin membuat struktur HTML yang kompleks dan tidak mahu mengulangi diri anda.

BrowserSync: Menyegerakkan Ujian Penyemak Imbas dan Tambah nilai masa nyata

Ciri terakhir yang dikonfigurasikan dari alat CLI asas yang saya telah dibincangkan ialah BrowserSync. Seperti yang anda ketahui, kerja front-end sukar kerana anda perlu menguji laman web anda pada banyak peranti dan banyak resolusi. Sekarang bayangkan anda mempunyai meja besar di mana banyak peranti yang berbeza menyambung ke laman web anda. Apabila anda mengklik sesuatu atau tatal melalui halaman, semua peranti akan melakukan perkara yang sama. Ini hebat kerana anda dapat melihat secara real time apa yang perlu diperbetulkan dan apa yang tidak berfungsi dengan baik.

Projek -projek yang kami buat secara automatik memberikan alamat IP luaran anda (lihat di atas). Anda boleh mendapatkannya dan tampal ke pelayar pada semua peranti yang berbeza untuk menyambung ke enjin BrowserSync yang sama dan mula menguji.

BrowserSync juga menyediakan perubahan masa nyata, jadi jika anda menyimpan sesuatu, ia akan muncul dalam tetingkap penyemak imbas tanpa menyegarkan halaman secara manual. Ia juga akan muncul pada semua peranti yang disambungkan, dan anda boleh mendapatkan semua ciri-ciri ini secara percuma tanpa sebarang kerja tambahan dengan templat Yayasan-CLI dan Zurb. Betapa hebatnya ini?

Kesimpulan

Saya secara peribadi berfikir pasukan Yayasan Zurb telah melakukan tugas yang baik untuk menyediakan pemaju dengan alat dan perancah yang berkuasa. Ini juga penting. Lebih daripada sekadar beberapa plugin dan gaya CSS yang siap digunakan dengan segera. Menggunakan Yayasan untuk Tapak 6 adalah pengalaman hebat. Bayangkan berapa banyak kerja pengaturcaraan backend yang boleh anda capai menggunakan alat CLI asas. Anda boleh membuat laman web dan blog statik, dan mereka juga boleh maju. Belum lagi, dalam banyak kes, blog statik dan laman web lebih cepat dan lebih baik.

Saya sangat mengesyorkan bahawa anda melihat lebih dekat di Panini. Anda juga boleh mencari beberapa dokumentasi dalam pakej NPM ReadMe. Ia boleh melakukan banyak ciri kuat yang saya tidak terangkan di sini, seperti kompilasi markdown atau pembantu tersuai. Anda juga boleh membaca tentang Gulp dan melihat dengan teliti semua tugas Gulp yang digunakan dalam template/projek Zurb yang dihasilkan oleh alat Yayasan-CLI.

Satu lagi perkara - Saya tidak menyebut fail CSS dan JavaScript yang dimampatkan. Jika anda menggunakan perintah foundation watch, akan ada fail CSS dan JavaScript dalam folder dist, tetapi mereka tidak akan dimampatkan. Jika anda mahukan fail siap pengeluaran dalam folder itu, hanya jalankan foundation build. Sekiranya anda ingin mengetahui lebih lanjut mengenai arahan Yayasan, jalankan arahan foundation help. Apabila anda perlu mengemas kini kebergantungan dalam projek anda, anda boleh menjalankan foundation update.

semua dalam semua, saya harap anda belajar sesuatu di sini. Jika anda mempunyai sebarang pertanyaan, sila beritahu saya dalam komen, atau lihat profil saya untuk cara yang berbeza untuk menghubungi saya.

Yayasan 6 FAQ Alat CLI (Soalan Lazim)

Apakah prasyarat untuk menggunakan alat CLI Yayasan 6?

Untuk menggunakan alat CLI Yayasan 6, anda perlu memasang Node.js (0.12 atau lebih baru) dan git pada sistem anda. Node.js adalah runtime JavaScript yang diperlukan untuk menjalankan antara muka baris arahan. GIT adalah sistem kawalan versi yang menjejaki perubahan dalam kod sumber semasa pembangunan perisian. Jika anda tidak memasangnya, anda boleh memuat turun Node.js dari laman web rasmi dan git dari laman web rasminya. Sebaik sahaja pemasangan selesai, anda boleh mula menggunakan alat CLI Foundation 6.

Bagaimana memasang alat CLI Yayasan 6?

Memasang alat CLI untuk Yayasan 6 adalah mudah. Buka terminal anda atau command prompt dan taipkan arahan berikut: npm install foundation-cli --global. Perintah ini memberitahu NPM (Pengurus Pakej Node) untuk memuat turun dan memasang CLI asas secara global supaya ia boleh digunakan dalam mana -mana direktori di komputer anda. Sebaik sahaja pemasangan selesai, anda boleh mengesahkannya dengan menaip foundation -v di terminal. Ini harus menunjukkan versi Yayasan CLI yang dipasang pada sistem.

Bagaimana untuk membuat projek baru menggunakan alat CLI Yayasan 6?

Untuk membuat projek baru menggunakan alat CLI Yayasan 6, buka terminal dan menavigasi ke direktori di mana anda ingin membuat projek. Kemudian, taipkan arahan berikut: foundation new. Ini akan mendorong anda untuk memilih templat untuk projek anda. Anda boleh memilih dari templat asas, templat lanjutan, atau templat tersuai. Selepas memilih templat, CLI akan menggunakan teks projek

Buat direktori baru dan pasang semua kebergantungan yang diperlukan.

Apakah arahan yang berbeza yang terdapat dalam alat CLI untuk Yayasan 6?

Alat CLI untuk Yayasan 6 menyediakan beberapa arahan untuk membantu anda menguruskan projek anda. Beberapa arahan yang paling biasa digunakan termasuk: foundation new (buat projek baru), foundation watch (mulakan perubahan pelayan dan memantau perubahan fail), foundation build (menyusun fail ke dalam projek yang boleh digunakan untuk pengeluaran), dan foundation update (menggantikan projek mengemas kini kebergantungan kepada versi terkini).

Bagaimana untuk mengemas kini alat CLI Yayasan 6?

Untuk mengemas kini alat CLI Yayasan 6, anda boleh menggunakan arahan npm update. Buka terminal anda dan taipkan arahan berikut: npm update -g foundation-cli. Perintah ini memberitahu NPM untuk menyemak kemas kini ke pakej global Yayasan-CLI dan memasangnya apabila tersedia.

Bagaimana untuk menyahpasang alat CLI Yayasan 6?

Jika anda perlu menyahpasang alat CLI Yayasan 6, anda boleh menggunakan arahan npm uninstall. Buka terminal anda dan taipkan arahan berikut: npm uninstall -g foundation-cli. Perintah ini memberitahu NPM untuk memadam pakej global Yayasan-CLI dari sistem.

Bolehkah saya menggunakan alat CLI Yayasan 6 pada pelbagai projek?

Ya, anda boleh menggunakan alat CLI Yayasan 6 pada pelbagai projek. CLI dipasang secara global pada sistem, yang bermaksud anda boleh menggunakannya dalam mana -mana direktori. Untuk membuat projek baru, hanya navigasi ke direktori yang dikehendaki dan gunakan arahan foundation new.

Apakah perbezaan antara templat asas dan templat lanjutan dalam alat CLI Yayasan 6?

Templat asas dalam alat CLI di Yayasan 6 menyediakan titik permulaan yang mudah untuk projek itu, yang hanya memerlukan tetapan minimum. Templat lanjutan, sebaliknya, mengandungi alat dan konfigurasi tambahan untuk projek yang lebih kompleks. Ini termasuk pengkompil SASS, prefixer automatik, penyambung JavaScript, dan penjana peta sumber.

Bagaimana untuk menyusun projek pengeluaran saya menggunakan alat CLI Yayasan 6?

Untuk menyusun projek pengeluaran, gunakan perintah foundation build. Perintah ini menyusun fail SASS dan JavaScript anda, memampatkan CSS dan JavaScript anda, memampatkan imej anda, dan menyalin fail HTML anda ke dalam folder Dist. Folder ini mengandungi semua fail yang tersedia untuk pengeluaran untuk projek ini.

Bagaimana menyelesaikan masalah dengan alat CLI di Yayasan 6?

Jika anda menghadapi masalah menggunakan alat CLI Yayasan 6, terdapat beberapa langkah yang boleh anda ambil untuk menyelesaikan masalah. Pertama, pastikan versi terkini Node.js dan Git dipasang pada sistem anda. Jika masalah berterusan, cuba mengemas kini CLI dengan arahan npm update. Jika anda masih menghadapi masalah, anda boleh mendapatkan bantuan dari komuniti yayasan di forum rasmi mereka atau di halaman GitHub.

Atas ialah kandungan terperinci Bermula dengan Alat CLI Yayasan 6 '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!