() translation by (you can also view the original English article)
Sebagai seorang web designer ada tiga bahasa yang pastinya anda alami: CSS, HTML dan JavaScript. Dalam tutorial ini anda akan meningkatkan command line untuk mengembangkan kemampuan anda dengan tiga bahasa tersebut menjadi lebih berdaya dan efisien.
Anda akan belajar bagaimana menggunakan command line untuk:
- Mengkompilasi preprocessor (Stylus, Sass dan LESS) code untuk CSS
- Autoprefix CSS
- Compress, combine dan clean CSS
- Kompilasi Jade untuk HTML
- Concatenate dan minify JavaScript
Catatan: tutorial ini mengasumsikan anda telah menyelesaikan tutorial berikutnya. Jika belum, anda akan merasa terbantu untuk kembali dan mengikuti tutorial tersebut sebelum melanjutkan.
CSS Preprocessors
Jika anda tidak pernah bekerja dengan CSS preprocessors sebelumnya letakkan dulu segalanya dan mulailah mencoba. Setelah anda menemukan preprocessor yang anda kira cocok dengan coding style anda, anda akan tidak akan melakukan coding dalam raw CSS lagi.
Tiga preprocessor yang umumnya menjadi pilihan adalah Stylus, Sass / SCSS dan LESS. Tuts+ memiliki cukup banyak tutorials dan courses untuk membantu anda mempelajari bagaimana cara menulis dalam syntax ketiga preprocessor tersebut.
Dalam tutorial ini kita akan mengcover bagaimana anda dapat menggunakan command line untuk mengcompile code untuk masing - masing dari ketiganya.
Stylus
Setiap pengguna preprocessor mempunyai favoritnya, dan favorit saya adalah Stylus. Itu menggunakan minimal syntax yang dapat ditulis dengan cepat, memiliki fungsi yang powerful, dan didukung oleh library third party seperti Jeet dan Kouto-Swiss.
Anda dapat membaca tentang Stylus di: http://stylus-lang.com/
Menginstall Stylus
Untuk menginstall Stylus secara global, mengaktifkannya untuk menggunakannya dalam mengcompile file ".styl", jalankan command ini:
1 |
[sudo] npm install stylus -g |
Mengcompile Stylus
Cara termudah untuk mengcompile dengan Stylus adalah dengan menggunakan command ini:
1 |
stylus < example.styl > example.css
|
Command ini akan mengcompile "example.styl" menjadi "example.css" dalam direktori yang sama.
Untuk memecahnya kita mempunyai stylus untuk memulai command. Kemudian kita menggunakan sebuah < example.styl untuk mengindikasikan Stylus sebuah file input, diikuti dengan > example.css untuk menunjukkan nama file CSS yang ingin kita buat.
Anda juga memiliki option untuk menambahkan flag ke dalam command ini, seperti menggunakan flag --compress untuk menghilangkan space putih dari file hasil CSS:
1 |
stylus --compress < example.styl > example.css |
Sebagai sebuah alternatif untuk mengcompile satu file pada satu waktu, anda dapat mengcompile seluruh file Stylus dalam satu direktori ke dalam file CSS dalam direktori lainnya. Untuk melakukan ini, setelah command stylus, tentukan folder sumber, kemudian gunakan flag --out diikuti dengan folder tujuan.
Sebagai contoh, untuk mengcompile seluruh file Stylus dari sebuah folder bernama "source_files" ke "assets/css" gunakan:
1 |
stylus source_files --out assets/css
|
Catatan: Folder tujuan anda compile harus sudah ada sebelum anda menjalankan command karena akan gagal jika tidak menemukan folder outputnya.
Ada beberapa option lain yang dapat anda berdayakan ketika menggunakan Stylus via command line. Untuk membaca semuanya kunjungi: http://stylus-lang.com/docs/executable.html
Sass / SCSS
Sass adalah preprocessor yang paling populer saat ini. Itu sangat powerful dalam membantu anda mencapai yang anda inginkan dan memiliki komunitas yang sangat besar dan aktif. Itu didukung oleh library third party terkenal seperti Compass, Bourbon dan Susy.
Baca lebih lanjut tentang Sass di: http://sass-lang.com/
Anda memiliki dua option ketika akan mengcompile Sass ke dalam mesin anda: anda dapat menggunakan baik Ruby, atau anda dapat menggunakan LibSass.
Sass pertama kali diciptakan untuk berjalan pada Ruby, dan jika anda mencari fitur dan dukungan 100% penuh, itu adalah option yang ingin anda pilih. Sebagai contoh, jika anda ingin menggunakan Compass cara termudah adalah dengan menempelkannya dengan kompilasi Ruby.
LibSass diciptakan sebagai sebuah alternatif, dan salah satu option tersedia adalah mengcompile sass via sebuah npm package. Pendekatan ini mengcompile sass lebih cepat, membawa waktu compile sekitar 5 detik melalui Ruby menjadi dibawah setengah detik melalui LibSass. Bagaimanapun juga, anda akan mendapatkan bahwa fitur tertentu dan third party code tidak didukung.
Yang mana yang anda pilih benar - benar tergantung pilihan pribadi anda, namun sebagai pedoman saya menyarankan untuk menggunakan LibSass untuk kecepatannya kecuali jika ada sesuatu yang spesifik (seperti Compass) untuk setiap anda membutuhkan Ruby compilation.
Apapun pilihan anda, kita akan mengcover menggunakan keduanya sehingga anda akan siap pada event yang manapun.
Menginstall Ruby Sass
Untuk mengcompile Sass via Ruby, pertama - tama anda perlu menginstall Ruby dalam mesin anda.
Jika anda menggunakan Mac anda beruntung karena Ruby sudah terinstall jadi anda tidak perlu melakukannya.
Jika anda menggunakan Windows, kunjungi http://rubyinstaller.org/ dan download dan jalankan installer yang anda temukan di sana. Berikutnya, install Sass dengan menjalankan command ini:
1 |
[sudo] gem install sass |
Sass akan otomatis didownload dan diinstall. Untuk memastikan instalasi sukses, jalankan command:
1 |
sass -v
|
Anda akan melihat nomor versi dan nama instalasi Sass ditampilkan dalam terminal:
Mengcompile dengan Ruby Sass
Untuk mengcompile sebuah file menggunakan Ruby sass cukup ketikkan sass, diikuti nama file input, spasi, kemudian nama file CSS yang ingin anda compile:
1 |
sass source_file.scss compiled_file.css |
Watch dengan Ruby Sass
Ruby Sass juga memiliki fungsi "watch" (kita akan mengulas lebih tentang watching nantinya) yang akan mengawasi perubahan file anda dan secara otomatis mengcompile ulang setiap kali disimpan.
Untuk menggunakannya, tambahkan flag --watch dalam command, kemudian pisahkan nama sumber dan compile file dengan titik dua bukan spasi:
1 |
sass --watch source_file.scss:compiled_file.css
|
Anda dapat juga menentukan seluruh direktori untuk watching dan output, tanpa perlu satu persatu:
1 |
sass --watch source/sass:assets/css |
Setelah watching diinisiasi anda akan melihat sesuatu seperti ini dalam terminal anda:
Mendapatkan Info Lebih Dalam Command
Untuk membaca semua tentang option yang tersedia via command line dengan Ruby Sass jalankan:
1 |
sass --help
|
Sebuah bacaan dokumen command line akan ditampilkan dalam terminal anda:
Anda dapat menggunakan flag --helpini untuk mendapatkan informasi lebih tentang tiap command yang anda gunakan. Cukup ketikkan nama command diikuti oleh --helpdan anda akan mendapatkan informasi yang sama seperti di atas.
Install LibSass / node-sass
Jika anda bekerja dengan LibSass, anda dapat memulai dengan metode yang sama yang digunakan untuk menginstall npm packages di awal tutorial ini.
LibSass itu sendiri ditulis dalam C/C++ namun ada variasi penerapannya, termasuk beberapa yang dilakukan untuk bekerja dengan Node.js. Dalam kasus ini kita akan menggunakan package node-sass.
Untuk menginstall node-sass secara global, jalankan command ini:
1 |
[sudo] npm install node-sass -g |
Compile dengan node-sass
Untuk mengcompile sebuah file ketikkan node-sass diikuti dengan nama file input dan nama file yang anda suka untuk file CSS output:
1 |
node-sass source_file.scss compiled_file.css |
Untuk mengendalikan direktori outup hasil compile file CSS tambahkan flag --outputdan direktori tujuan di antara nama file input dan output:
1 |
node-sass source_file.scss --output assets/css compiled_file.css
|
Watch dengan node-sass
Seperti Ruby Sass, node-sass juga menggunakan flag --watchuntuk mengaktifkan compilation otomatis ketika ada perubahan pada file anda:
1 |
node-sass --watch source_file.scss compiled_file.scss
|
Anda juga dapat menentukan seluruh direktori untuk watching, dan sebagai output, tanpa perlu satu - persatu:
1 |
node-sass --watch source/sass/* --output assets/css |
Ketika menggunakan node-sass untuk mengaktifkan watch pada seluruh direktori, pastikan untuk mencantumkan /* di bagian akhir untuk menentukan seluruh file di dalam direktori tersebut.
Menghentikan Proses "watch"
Ketika proses "watch" sedang berjalan anda dapat menghentikannya dengan cara:
- Menutup terminal
- Menekan kombinasi tombol CTRL + C
LESS
Preprocessor LESS juga sangat populer, dan mungkin merupakan yang paling terkenal untuk penggunaannya dalam framework Bootstrap milik Twitter. LESS merupakan preprocessor pertama yang bagus karena cara kerjanya sama seperti menulis dalam CSS langsung.
Baca lebih lanjut tentang LESS di: http://lesscss.org/
Menginstall LESS
Untuk menginstall LESS secara global, mengaktifkannya untuk mengcompile file ".less" kapanpun, jalankan command ini:
1 |
[sudo] npm install less -g |
Mengcompile LESS
Buka sebuah terminal dalam folder yang berisi file LESS yang ingin anda compile dan gunakan command lessc diikuti dengan nama file tersebut, simbol >, kemudian nama file CSS output yang anda inginkan:
1 |
lessc source_file.less > compiled_file.css
|
Autoprefixing CSS
Autoprefixer adalah sebuah npm package yang mengecek CanIUse.com untuk mendapatkan informasi terbaru tentang properties CSS mana yang memerlukan vendor prefixes dan yang mana yang tidak. Itu kemudian secara otomatis menangani penambahan vendor prefix yang diperlukan ke dalam code anda.
Ini dapat menjadi sangat membantu, kecuali jika anda ingin memonitor update browser anda secara konstan, anda dapat dengan mudah melihat diri anda mencantumkan browser prefixes yang anda tidak butuhkan lagi. Itu juga berarti anda dapat menulis semua CSS tanpa harus memikirkan tentang prefixes, dan biarkan Autoprefixer menyelesaikannya untuk anda.
Sebagai contoh, autoprefixer akan mengubah code berikut:
1 |
a { |
2 |
display: flex; |
3 |
}
|
menjadi ini:
1 |
a { |
2 |
display: -webkit-box; |
3 |
display: -webkit-flex; |
4 |
display: -ms-flexbox; |
5 |
display: flex; |
6 |
}
|
Baca lebih lanjut tentang Autoprefixer di: https://www.npmjs.com/package/autoprefixer
Menginstall Autoprefixer
Install Autoprefixer secara global dengan:
1 |
[sudo] npm install autoprefixer -g |
Autoprefix Sebuah File CSS
Untuk melakukan autoprefix sebuah file CSS gunakan command berikut:
1 |
autoprefixer style.css |
Tidak seperti mengcompile sebuah file preprocessor, ini tidak akan menciptakan file kedua secara standar. File target anda akan diperbarui, dengan penambahan prefixes yang benar secara langsung.
Jika anda ingin Autoprefixer untuk membuat file kedua, pisahkan file tambahkan flag --output diikuti dengan nama untuk file css prefixed:
1 |
autoprefixer unprefixed.css --output prefixed.css
|
Optimisasi CSS
Anda selalu ingin CSS yang anda masukkan dalam website dibagi menjadi bagian terkecil mungkin. Untuk mencapai ini anda dapat menggunakan teknik optimisasi:
- Compression - menghilangkan ruang putih dan komentar
- Cleaning - mengubah code itu sendiri untuk mendapatkan ruang yang lebih sedikit
Compressing Dengan Preprocessors
Stylus, Ruby Sass dan node-sass semuanya memiliki kemampuan untuk mengcompress CSS selama compilation.
Dalam Stylus, cantumkan flag --compress:
1 |
stylus --compress < source_file.scss > compiled_file.css |
Dalam Ruby Sass cantumkan flag --style, diikuti dengan compressed:
1 |
sass source_file.scss compiled_file.css --style compressed
|
Dalam node-sass tambahkan flag --output-style diikuti dengan compressed:
1 |
node-sass --output-style compressed source_file.scss compiled_file.css
|
Cleaning dan Compressing Dengan clean-css
Jika anda tidak menggunakan CSS preprocessor, atau anda hanya ingin optimisasi code maksimum, anda dapat menggunakan clean-css package yang akan menempatkan file CSS anda masuk lebih dalam proses compression.
Proses compression reguler biasanya hanya menghilangkan ruang putih dan komentar dari CSS anda. Clean-css package dapat juga melakukan hal - hal seperti:
- Menggabungkan selector name yang sama
- Menggabungkan properties yang sama dalam style yang sama
- Membulatkan angka yang memiliki jumlah desimal yang banyak
- Menghilangkan simbol ";" dan spasi pada akhir selector styles
Menggabungkan selector yang sama dapat sangat berguna, sebagai contoh, jika anda ingin memiliki semua layout untuk class tertentu diaktifkan pada file "layout.css", sementara coloring untuk class yang sama diaktifkan pada "colors.css".
Membulatkan angka itu bagus untuk ketika anda menggunakan fungsi preprocessor untuk mengubah nilai menjadi satuan rem dan anda berakhir dengan sesuatu seperti 2.3649858573rem. Dengan clean-css angka tersebut akan dibulatkan menjadi dua desimal, membuatnya menjadi lebih rapi yaitu 2.36rem.
Anda dapat membaca lebih jauh tentang clean-css di: https://github.com/jakubpawlowicz/clean-css
Menginstall clean-css
Install clean-css secara global dengan command:
1 |
[sudo] npm install clean-css -g |
Menggunakan clean-css
Untuk membersihkan sebuah file CSS gunakan:
1 |
cleancss style.css |
Catatan: Walaupun nama package "clean-css" memiliki tanda kutip, pastikan untuk menggunakan cleancss tanpa tanda kutip untuk menjalankan command.
Untuk menentukan sebuah nama file baru untuk clean-css gunakan flag -o diikuti dengan nama file yang baru, sebelum nama file yang anda targetkan:
1 |
cleancss -o cleaned.css style.css
|
Ada beberapa option lainnya untuk command clean-css, anda dapat membaca semuanya di: Bagaimana Menggunakan Clean CSS CLI.
HTML & JavaScript
Jade
Jade adalah bahasa menakjubkan yang dicompile ke dalam HTML, dan membuatnya memungkinkan anda untuk menulis code secara singkat sehingga pengembangannya menjadi lebih cepat, dan juga membuat templating system sendiri sehingga anda dapat menghemat dalam menulis ulang code.
Baca lebih lanjut tentang Jade di: https://www.npmjs.com/package/jade
Menginstall Jade
Untuk menginstall Jade secara global jalankan command:
1 |
[sudo] npm install jade -g |
Mengcompile Jade
Jade, diciptakan oleh orang yang sama yang menciptakan Stylus, menggunakan syntax command dasar yang sama yaitu tanda < dan > untuk mengcompile sebuah file:
1 |
jade < index.jade > index.html
|
Command ini akan mengcompile "index.jade" menjadi "index.html" dalam direktori yang sama.
Untuk mengcompile seluruh file Jade dalam direktori tertentu gunakan:
1 |
jade dir_name |
Untuk menentukan direktori tempat meletakkan file HTML anda letakkan flag --out di antara nama direktori input dan output:
1 |
jade src_dir --out html_dir
|
Untuk menggunakan fungsi watch Jade untuk compilation otomatis saat penyimpanan, letakkan flag --watch tepat setelah command jade.
Untuk File Tunggal:
1 |
jade --watch < index.jade > index.html |
Atau Untuk Direktori Penuh:
1 |
jade --watch dir_name
|
1 |
jade --watch dir_name --out html_dir |
Concatenating & Minifying File JavaScript
Sama seperti kita menginginkan optimisasi file CSS, begitu juga kita ingin mengirimkan file JavaScript dalam cara paling efisien.
Adalah biasa jika kita memiliki banyak file JS dimasukkan ke dalam proyek kita, seperti membutuhkan Modernizr, jQuery dan code buatan kita sendiri sebagai contoh, namun kita juga ingin meminimalisasi jumlah http requests yang dibuat situs kita. Sebagai tambahan kita ingin memastikan waktu loading JavaScript kita super cepat.
Cara terbaik untuk menangani kedua issue tersebut adalah dengan bersamaan menggabungkan (concatenate) file JavaScript ke dalam sebuah file tunggal, yang berarti kita hanya perlu satu http request untuk loading, dan meminimalkan file hasil ke ukuran terkecil.
Kita akan menggunakan package UglifyJS untuk menangani proses ini.
Untuk menginstall uglify-js secara global jalankan:
1 |
[sudo] npm install uglify-js -g |
Untuk menggabungkan dua file JavaScript kemudian menghilangkan ruang putih dan komentar dari file hasil, gunakan command uglifyjs diikuti dengan nama tiap - tiap file sumber anda di antaranya. Setelah mencantumkan flag --output dan nama file baru anda dan sudah dikecilkan:
1 |
uglifyjs input1.js input2.js --output input.min.js
|
Seperti tindakan standar untuk menghilangkan ruang putih dan komentar, anda dapat juga menambahkan compression yang akan benar - benar mengubah code untuk mengurangi ukurannya. Untuk melakukan ini tambahkan flag --compress pada bagian akhir command:
1 |
uglifyjs input1.js input2.js --output input.min.js --compress |
Option optimisasi lainnya adalah untuk "mengoyakkan (mangle)" code, yang akan melakukan hal - hal seperti memotong - motong variabel, fungsi dan nama argument menjadi karakter tunggal. Untuk menggunakan option ini tambahkan flag --mangle di bagian akhir command:
1 |
uglifyjs input1.js input2.js --output input.min.js --mangle |
Anda dapat juga menggunakan baik compression dan mangling dengan memasukkan flag keduanya:
1 |
uglifyjs input1.js input2.js --output input.min.js --mangle --compress |
Baca lebih lanjut tentang command yang dapat anda jalankan dengan UglifyJS di: https://www.npmjs.com/package/uglify-js
Catatan Tentang Meminimalisasi JavaScript Pihak Ketiga
Jika anda menggabungkan dan / atau meminimalisasi scripts pihak ketiga seperti jQuery, Modernizr dan sebagainya, pastikan anda menggunakan versi luas file - file tersebut. Umumnya adalah sebuah ide yang jelek untuk mengecilkan ulang file yang sudah dikecilkan karena anda dapat merusak fungsinya.
Anda dapat mengenali file yang telah dikecilkan dimana mereka akan mengikuti nama "name.min.js", sementara versi luas file tersebut adalah "name.js".
Dalam Tutorial Berikutnya
Sekarang anda tahu bagaimana cara untuk menyelesaikan beberapa tugas yang berguna dengan bermacam - macam variasi command, namun bagaimana jika anda dapat menyelesaikan seluruh tugas proyek anda yang membutuhkan waktu yang sama dengan satu command tunggal?
Dalam tutorial berikutnya anda akan belajar bagaimana melakukannya dengan persis, menggunakan task runners untuk mengatur semua tugas yang diperlukan proyek anda sehingga semua compilation, autoprefixing, combining, dan optimisasi dapat diselesaikan serempak dan hanya dalam beberapa detik.
Kita berjumpa kembali dalam tutorial berikutnya!
