() translation by (you can also view the original English article)
Untuk waktu yang lama ketika bekerja dengan baris perintah dianggap berada di luar ranah web designer. Itu digunakan cukup banyak khusus untuk hal-hal seperti admin server dan manajemen file dan segala macam hal yang tidak ada hubungannya dengan rata-rata perancang web dari hari ke hari.
Mungkin itu yang terjadi di masa lalu, tetapi hari ini tidak bisa jauh dari kebenaran.
Saat ini, ada ribuan alat bertenaga baris perintah luar biasa yang tersedia khusus untuk bahasa akhir depan dan alur kerja. Manfaat besar yang mereka tawarkan berarti memanfaatkan baris perintah menjadi keterampilan yang semakin penting bagi desainer web.
Saya akui, untuk beberapa waktu setelah saya pertama kali menemukan jenis alat desain web ini saya sedikit “command line phobic.” Saya dipengaruhi oleh ide “untuk pemrogram bukan perancang”, dan saya selalu mencari opsi lain daripada memberi perintah pada baris perintah.
Kemudian, akhirnya, saya membuat risiko ketika sebuah proyek yang benar-benar saya inginkan untuk menggunakan interaksi yang tidak dapat dihindarkan melalui baris perintah. Saya sedikit terintimidasi pada awalnya, tetapi untuk kejutan yang sangat menyenangkan saya, saya dengan cepat menemukan diri saya berseru:
“This is awesome, I don’t know why I didn’t start learning this ages ago!”
Hari ini, saya menggunakan baris perintah di hampir semua proyek desain web dan saya tidak akan tanpanya. Ini sangat berguna di hampir setiap tahap dari proses desain web yang khas.
Tentang Seri Ini
Tetapi inilah masalahnya, bahkan sekarang saya tidak akan dapat melakukan sebagian besar hal-hal yang akan Anda temukan dalam tutorial 'memulai dengan command line' yang khas jika hidup saya bergantung padanya. Jika Anda tidak pernah belajar cara mkdir atau cd atau ls itu tidak penting. Sebenarnya, sebagai perancang web, Anda benar-benar tidak memerlukan hal-hal itu. Satu-satunya keterampilan baris perintah yang Anda butuhkan adalah yang secara langsung memudahkan membuat proyek desain web Anda lebih efisien.
Itulah mengapa seri ini bukan tentang "cara menjalankan perintah yang tidak jelas untuk tugas yang tidak pernah Anda lakukan." Juga bukan merupakan "proses pengembang rumit yang dibuat mudah untuk desainer". Ini adalah seri specifically for web designers, menunjukkan kepada Anda cara memanfaatkan alat yang sangat berguna khususnya untuk proyek desain web.
Setelah Anda mulai memasukkan baris perintah ke dalam proses desain Anda, itu akan membuka berbagai opsi baru, menghemat banyak waktu berharga Anda, dan, saya berjanji, Anda tidak akan pernah melihat ke belakang.
Mengapa Baris Perintah Sangat Bagus untuk Desain Web
Di seluruh Seri tutorial ini, Anda akan mempelajari proses yang didorong oleh baris perintah yang mungkin saja mengubah cara Anda mendekati desain web secara permanen.
Setelah memulai dengan hal-hal mendasar, kami akan langsung terjun ke keterampilan praktis yang dapat Anda gunakan langsung. Saat Anda melihat masing-masing topik yang akan kami bahas, Anda akan mulai melihat gambar yang membentuk mengapa baris perintah adalah alat yang harus dimiliki untuk desain web.
Topik Utama Tercakup
Mari kita cepat melalui topik yang akan kita bahas selama seri ini. Ada lima bidang subjek utama:
1. Menjinakkan Paket Pihak Ketiga
Desainer web sering menggunakan paket pihak ketiga seperti jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css dan daftar panjang lainnya. Sebelum baris perintah, menggunakan paket eksternal ini biasanya berarti:
- Mempertahankan daftar penanda situs di mana Anda dapat mengunduh versi terbaru dari setiap paket.
- Kunjungi situs web tersebut secara manual untuk mengunduh paket setiap kali Anda membutuhkannya.
- Mengulangi proses lagi setiap kali paket diperbarui.
- Mentransfer versi yang diperbarui secara manual ke setiap proyek yang digunakan.
Berurusan dengan manajemen paket secara manual lambat dan berat, tetapi dengan baris perintah yang merupakan sesuatu dari masa lalu.
Anda dapat menarik paket langsung ke proyek Anda hanya dengan mengetik beberapa kata, seperti:
bower install jquery
Anda dapat membuat paket tetap up to date dengan mengetik sekumpulan kata sederhana seperti:
bower update jquery
Tidak ada lagi mengunduh paket secara manual dari web atau meningkatkannya secara manual saat mereka diubah, dan itu hanya sedikit rasa dari hal-hal yang dapat Anda lakukan melalui pengelolaan paket baris perintah.
2. Powering Up Front End Code
Tiga bahasa yang paling sering Anda lihat digunakan dalam proyek desain web apa pun adalah CSS, HTML, dan JavaScript. Alat baris perintah membuka cara baru untuk membuat produksi dan pengiriman kode kami dalam bahasa ini lebih efisien dan kuat.
Salah satu hal yang paling kuat yang dapat kita gunakan baris perintah untuk dengan CSS adalah untuk mengkompilasi preprocessors, seperti Stylus, Sass / SCSS dan LESS. Dengan baris perintah Anda dapat dengan cepat mengkompilasi file preprocessor apa pun dengan mengetik beberapa kata. Anda juga dapat mengatur kompilasi otomatis sehingga file CSS Anda dikompilasi ulang setiap kali Anda mengubah file preprocessor Anda.
Melalui baris perintah kami juga dapat lebih meningkatkan alur kerja CSS kami dengan hal-hal seperti autoprefixing, pembersihan file, dan kompresi. Dengan cara yang sama kami juga dapat mengoptimalkan JavaScript kami dengan gabungan file dan minification.
Dan untuk HTML, kita mendapatkan akses ke bahasa seperti Jade yang memberi kita kemampuan menulis HTML dengan cepat, dan kemampuan untuk mengembangkan sistem template yang sederhana namun canggih untuk mencegah kita harus menulis ulang potongan kode yang berulang di seluruh proyek.
3. Otomatisasi dengan Task Runners
Mampu mengkompilasi ke CSS dengan beberapa kata, kemudian mengecilkan JavaScript dengan beberapa kata lain sangat bagus. Tetapi ketika segala sesuatunya benar-benar mulai mendapat kekuatan super adalah ketika Anda dapat melakukan everything yang dibutuhkan proyek Anda sekaligus dengan satu perintah.
Dengan menggunakan sesuatu yang disebut 'pelari tugas', perintah kata tunggal seperti gulp atau grunt dapat diatur untuk mengkompilasi file preprocessor Anda kemudian gabungkan, autoprefix, bersihkan dan kompres CSS yang dihasilkan, setelah itu file Jade Anda dikompilasi menjadi HTML, dan Anda File JS digabung dan diperkecil - semua dalam waktu beberapa detik.
Anda juga dapat mengatur pelari tugas untuk menangani hal-hal ini secara hands-free untuk Anda. Setelah menjalankan perintah seperti gulp watch atau grunt watch, Anda dapat melanjutkan dan mengerjakan file mentah proyek Anda sementara, di latar belakang, semua kompilasi dan pengoptimalan ditangani untuk Anda secara otomatis.
Pelari tugas benar-benar fleksibel dan dapat dikonfigurasi sesuai keinginan Anda, jadi tidak ada akhir bagi cara Anda mengatur proyek. Sederhanakan hal-hal yang sesuai dengan masing-masing situasi sesuai kebutuhan.
4. Reload Hidup, Sinkronisasi Browser * Pengujian Perangkat Multi
Refresh langsung memungkinkan Anda melepas jari dari tombol segarkan dan berkonsentrasi untuk mendapatkan umpan balik waktu nyata yang lancar pada perubahan desain saat Anda membuatnya.
Setelah Anda memiliki otomatisasi dengan pelari tugas di tempat, Anda dapat menambahkan pemuatan ulang langsung langsung ke dalam campuran, menghubungkannya dalam konfigurasi apa pun yang telah Anda buat untuk proyek Anda. Anda dapat memutuskan dengan tepat apa yang memicu pemuatan ulang langsung, baik itu kompilasi preprosesor, perubahan html, atau apa pun yang Anda sukai.
Sebagai bagian dari mengaktifkan pemuatan ulang langsung, Anda juga akan mendapatkan pratinjau situs yang dipasangkan di localhost, yaitu simulasi host web yang berjalan di komputer lokal Anda. Ini bagus untuk memastikan semuanya berjalan sesuai harapan melalui protokol https://, dibandingkan dengan file:// protocols.
Selain itu, Anda juga akan belajar untuk mendapatkan sinkronisasi peramban, di mana Anda mendapatkan satu URL yang dapat Anda tautkan ke beberapa peramban dan semuanya disinkronkan bersama. Misalnya, klik tombol nav di Chrome, lalu lihat bagaimana Firefox, Opera, dan Safari menanggapi tindakan yang sama secara bersamaan.
Sinkronisasi peramban ini juga tidak terbatas pada satu perangkat. Anda juga dapat membuka URL yang sama di tablet, ponsel dan perangkat lain pada koneksi yang sama dan meminta setiap orang menampilkan pratinjau yang disinkronkan. Ini semua datang bersama-sama untuk memberi Anda pengaturan sempurna untuk lintas peramban dan pengujian lintas perangkat.
Dan karena Anda membangun ini di atas pengaturan pelari tugas Anda, semuanya berjalan langsung dengan perintah dua kata seperti grunt start atau gulp start.
5. Perancah Proyek Baru
Perancah proyek baru secara manual dapat menjadi semacam rasa sakit. Mendapatkan seluruh folder dan pengaturan struktur file dan semua file yang terhubung dan dikonfigurasi untuk bekerja bersama dapat sangat memakan waktu.
Namun, dengan menggunakan baris perintah, Anda dapat men-scaffold semua jenis proyek dalam hitungan detik, sempurna ketika Anda ingin menggunakan kerangka kerja pihak ketiga yang populer dan kode starter seperti Foundation, Bootstrap, Boilerplate HTML5, dan Google Web Starter Kit.
Dengan metode yang akan kami bahas, proyek Anda yang baru dipetakan tidak hanya memiliki semua kode yang mereka butuhkan, tetapi pelari tugas mereka telah dikonfigurasikan sehingga hal-hal seperti kompilasi otomatis dan pratinjau host lokal siap untuk keluar dari kotak.
Bergerak
Saat itu, jika Anda siap, saya akan melihat Anda di tutorial pertama!
