Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Command Line Untuk Web Design: Memperkuat Front End Code

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
How to Install NPM and Bower
The Command Line for Web Design: Automation With Grunt

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (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:

Mengcompile Stylus

Cara termudah untuk mengcompile dengan Stylus adalah dengan menggunakan command ini:

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:

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:

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:

Sass akan otomatis didownload dan diinstall. Untuk memastikan instalasi sukses, jalankan command:

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:

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:

Anda dapat juga menentukan seluruh direktori untuk watching dan output, tanpa perlu satu persatu:

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:

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:

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:

Untuk mengendalikan direktori outup hasil compile file CSS tambahkan flag --outputdan direktori tujuan di antara nama file input dan output:

Watch dengan node-sass

Seperti Ruby Sass, node-sass juga menggunakan flag --watchuntuk mengaktifkan compilation otomatis ketika ada perubahan pada file anda:

Anda juga dapat menentukan seluruh direktori untuk watching, dan sebagai output, tanpa perlu satu - persatu:

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:

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:

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:

menjadi ini:

Baca lebih lanjut tentang Autoprefixer di: https://www.npmjs.com/package/autoprefixer

Menginstall Autoprefixer

Install Autoprefixer secara global dengan:

Autoprefix Sebuah File CSS

Untuk melakukan autoprefix sebuah file CSS gunakan command berikut:

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:

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:

Dalam Ruby Sass cantumkan flag --style, diikuti dengan compressed:

Dalam node-sass tambahkan flag --output-style diikuti dengan compressed:

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:

Menggunakan clean-css

Untuk membersihkan sebuah file CSS gunakan:

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:

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:

Mengcompile Jade

Jade, diciptakan oleh orang yang sama yang menciptakan Stylus, menggunakan syntax command dasar yang sama yaitu tanda < dan > untuk mengcompile sebuah file:

Command ini akan mengcompile "index.jade" menjadi "index.html" dalam direktori yang sama.

Untuk mengcompile seluruh file Jade dalam direktori tertentu gunakan:

Untuk menentukan direktori tempat meletakkan file HTML anda letakkan flag --out di antara nama direktori input dan output:

Untuk menggunakan fungsi watch Jade untuk compilation otomatis saat penyimpanan, letakkan flag --watch tepat setelah command jade.

Untuk File Tunggal:

Atau Untuk Direktori Penuh:

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:

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:

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:

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:

Anda dapat juga menggunakan baik compression dan mangling dengan memasukkan flag keduanya:

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.