Siapkan Alat Pembangunan Anda

Bangun situs multi-perangkat Anda dari nol. Pelajari cara mempercepat development dan membuat situs yang dimuat cepat bersama serangkaian alat proses pembangunan. Setiap situs harus memiliki versi development dan versi produksi.

Versi development memiliki semua file HTML, CSS, JS dan file gambar yang membentuk situs Anda dalam format rapi yang akan membuat Anda senang menggunakannya.

Versi produksi akan mengambil file-file ini, mengecilkannya, menyatukan / menggabungkannya dan mengoptimalkan berbagai file seperti gambar.

Developer web harus memikirkan jutaan hal sekaligus dan langkah pembangunan adalah salah satu yang paling penting, namun yang paling rumit dimulai. Anda harus merencanakan semua tugas yang perlu diotomatisasi seperti: Kompresi gambar, minifikasi CSS, penggabungan JavaScript, pengujian responsif, pengujian unit, dan daftarnya terus berlanjut...

Ikuti panduan ini untuk mempelajari cara terbaik menyusun alur kerja sehingga situs yang sudah Anda buat mengikuti semua praktik terbaik sejak awal Anda memulainya.

TL;DR

  • Alat proses pembangunan Anda harus mengoptimalkan kinerja; alat tersebut harus secara otomatis mengecilkan dan menggabungkan JavaScript, CSS, HTML, dan gambar.
  • Gunakan alat seperti LiveReload agar proses development Anda lebih lancar.

Sebelum memulai pengkodean, Anda perlu mempertimbangkan cara mengoptimalkan dan membangun versi produksi situs Anda. Dengan menyiapkan alur kerja ini dari awal akan mencegah kejutan tidak menyenangkan di akhir proyek dan Anda bisa menambahkan alat ke dalam alur kerja yang mempercepat development, yang melakukan tugas-tugas monoton untuk Anda.

Apa yang dimaksud dengan proses pembangunan?

Proses pembangunan adalah serangkaian tugas yang dijalankan pada file proyek Anda, yang mengompilasi dan menguji kode selama development dan digunakan untuk membuat versi deployment situs Anda. Proses pembangunan sebaiknya bukan serangkaian tugas yang Anda jalankan di akhir alur kerja development.

Alat yang paling populer untuk mengimplementasikan proses pembangunan adalah Gulp dan Grunt, keduanya adalah alat baris perintah. Jika Anda belum memiliki pengalaman menggunakannya, gunakan Gulp, kami menggunakannya untuk Web Starter Kit dan menyarankan agar Anda melakukan hal yang sama.

Ada beberapa alat yang memiliki GUI dan mungkin sedikit lebih mudah dipahami namun kurang fleksibel.

Platform yang Didukung & Nama Alat (Bantu)
OS X / Windows Prepros
OS X CodeKit
OS X HammerForMac

Tugas apa yang sebaiknya ada dalam proses pembangunan?

Di bagian berikut ini, kita akan melihat tugas paling umum yang sebaiknya Anda miliki dalam proses pembangunan dan tugas yang disarankan untuk Grunt dan Gulp.

Ini memerlukan banyak uji coba agar masing-masing bagian bisa disiapkan sesuai yang diinginkan dan bisa menciutkan nyali jika Anda baru mengenal proses pembangunan.

Untuk contoh proses pembangunan yang baik, lihat panduan memulai Web Starter Kit, yang membahas cara menggunakan Web Starter Kit dan menjelaskan apa yang dilakukan setiap perintah di file Gulp. Ini bisa digunakan sebagai cara cepat untuk persiapan, kemudian Anda bisa membuat perubahan jika diperlukan.

Jika Anda ingin membuat proses pembangunan sendiri dan masih baru dengan Gulp atau Grunt, panduan memulai cepat akan menjadi tempat terbaik untuk mulai memasang dan menjalankan proses pembangunan Anda yang pertama:

Gunakan penggabungan & minifikasi agar situs lebih cepat

Bagi mereka yang tidak familier dengan istilah penggabungan dan minifikasi, penggabungan berarti menggabungkan beberapa file bersama-sama, yaitu menyalin dan menempelkan sejumlah file menjadi satu. Alasan kami melakukannya adalah karena browser akan lebih efisien mengambil sebuah file, daripada mengambil banyak file kecil.

Minifikasi adalah proses mengambil file dan mengurangi jumlah karakter keseluruhan, tanpa mengubah cara kerja kode. Sebuah contoh yang bagus tentang hal ini adalah membuang komentar, atau mengambil nama variabel panjang dan membuatnya lebih kecil. Ini akan mengecilkan ukuran file, sehingga pengunduhan lebih cepat.

Gunakan modul berikut untuk minifikasi:

Tipe File Gulp Grunt
CSS gulp-csso grunt-contrib-cssmin
JS gulp-uglify grunt-contrib-uglify
HTML gulp-minify-html grunt-contrib-htmlmin

Untuk penggabungan, gunakan yang berikut ini:

Tipe File Gulp Grunt
CSS (Sass) gulp-sass atau gulp-useref grunt-contrib-sass atau grunt-usemin
JS gulp-useref grunt-usemin atau grunt-codekit

Catatan: Anda bisa menggunakan Sass dengan memanfaatkan fitur 'import' (Lihat Web Starter Kit untuk contohnya).

Optimalkan gambar Anda

Optimalisasi gambar merupakan langkah penting untuk membantu mempercepat situs; Anda akan terkejut dengan sejauh mana bisa memperkecil gambar tanpa kehilangan kualitas. Meta data dibuang dari gambar karena tidak diperlukan browser untuk menampilkan gambar, misalnya, informasi tentang kamera yang digunakan untuk mengambil foto.

Untuk mengoptimalkan gambar, Anda bisa menggunakan modul ini.

Gulp & Grunt
gulp-imagemin grunt-contrib-imagemin

Jangan sampai salah dengan awalan vendor

Kadang-kadang sedikit membosankan saat menyertakan semua awalan vendor untuk CSS yang Anda gunakan. Gunakan auto-prefixer untuk menambahkan awalan yang perlu Anda sertakan secara otomatis:

Gulp vs Grunt
gulp-autoprefixer grunt-autoprefixer

Catatan
Jika suka, Anda bisa menambahkan paket Sublime untuk menambahkan awalan secara otomatis.

Jangan biarkan editor teks Anda memuat ulang secara live

Pemuatan ulang secara live akan memperbarui situs di browser setiap kali Anda membuat perubahan. Setelah menggunakannya sekali, Anda tidak akan bisa melepaskannya lagi.

Web Starter Kit menggunakan browser-sync untuk dukungan Live Reload.

Gulp vs Grunt
browser-sync grunt-contrib-connect & grunt-contrib-watch