() translation by (you can also view the original English article)
Sejauh ini anda telah belajar bagaimana menggunakan command line untuk third party package management, memperkuat front end code, otomatisasi dengan task runners, live reloading dan browser synchronizing.
Pada tutorial terakhir dalam seri ini anda akan belajar bagaimana menggunakan command line untuk mulai berjalan dengan merancah proyek baru yang mempunyai semua third party code yang dibutuhkan, juga task management Grunt atau Gulp yang telah diatur, hanya dalam waktu singkat.
Ada lebih dari ribuan jenis proyek berbeda yang dapat anda gunakan untuk menyangga sementara menggunakan command line, namun dalam tutorial ini kita akan menelusuri empat dari mereka untuk dasar proyek:
- Foundation
- Bootstrap
- HTML5 Boilerplate
- Google Web Starter Kit
Foundation
Foundation memiliki CLI (command line interface) sendiri yang bagus untuk merancah proyek dengan framework Foundation. Mari kita lanjut tentang bagaimana menggunakan Foundation CLI untuk membuat sebuah proyek memaksimalkan Compass.
Menginstall CLI & Prasyarat Foundation
Bagian pertama merancah sebuah proyek Foundation baru adalah untuk menginstall CLI yang diperlukan. Sebelum itu, anda perlu memastikan anda memiliki lima prasyarat terinstall dalam sistem anda:
- Git
- NodeJS
- Bower
- Ruby
- grunt-cli package
Kita telah mengulas instalasi NodeJS, Git dan Bower dalam Menaklukkan 3rd Party Packages, instalasi Ruby diulas pada Memperkuat Front End Code, dan instalasi grunt-cli diulas di Otomatisasi Dengan Task Runners.
Setelah memastikan anda telah menginstall Ruby anda perlu menginstall Compass dan Bundler gems dengan command ini:
1 |
gem install compass
|
1 |
gem install bundle
|
Sekarang anda dapat melanjutkan dan menginstall Foundation CLI dengan command ini:
1 |
gem install foundation
|
Membuat Sebuah Proyek Foundation
Sekarang kapanpun anda ingin memulai sebuah proyek Foundation baru, buka terminal dimana anda ingin membuatnya dan jalankan command
1 |
foundation new project_name |
Anda lalu akan melihat folder proyek baru dengan struktur, seperti berikut:
Dari sini, anda perlu meletakkan terminal di dalam folder proyek aktual, misalnya di dalam "project_name".
Gem "bundler" yang anda install sebelumnya akan digunakan di sini untuk memastikan semua library yang diperlukan telah diinstall. Pastikan dengan menjalankan command:
1 |
bundle |
Anda hanya perlu melakukan ini sekali ketika anda pertama kali menciptakan proyek Foundation Compass.
Dalam browser, proyek baru anda akan tampak seperti ini:
Sekarang anda siap untuk memulai pegembangan proyek anda. Ada compiler Sass yang akan memonitor perubahan file ".scss" di dalam library, kemudian mengcompile ulang menjadi css. Aktifkan dengan command:
1 |
bundle exec compass watch
|
Yeoman
Yeoman merupakan sebuah tool yang didesain secara ekspres untuk merancah sebuah proyek baru. Itu bekerja di atas NodeJS, memadukan Bower untuk manajemen package, dan menggunakan Grunt atau Gulp untuk menjalankan task.
Setelah menginstall Yeoman proses dasar untuk merancah proyek baru menjadi:
- Cari dan install sebuah Yeoman generator untuk jenis proyek yang ingin anda buat, misalnya generator-h5bp untuk proyek HTML5 Boilerplate.
- Ketik
yo <generator_handle>untuk membuat sebuah proyek baru, misalnyayo h5bp
Baca lebih lanjut tt Yeoman di: http://yeoman.io/
Menginstall Yeoman
Untuk menggunakan Yeoman, anda perlu memiliki menginstall bower, grunt-cli dan secara global, dimana anda seharusnya sudah mengerti selama anda mengikuti semua tutorial sebelumnya.
Install Yeoman secara global dengan command:
1 |
npm install -g yo |
Sekarang anda siap untuk memulai dan menemukan generator dan merancah proyek baru.
Membuat Sebuah Proyek Bootstrap
Untuk merancah sebuah proyek Bootstrap kita akan menggunakan generator-gulp-bootstrap. Dibandingkan yang lainnya, generator ini menyediakan sebuah Bootstrap framework, jQuery & Modernizr, BrowserSync, compilation Sass otomatis via LibSass, automatic JS linting dan optimisasi gambar.
Menginstall Generator
Install generator secara global dengan:
1 |
[sudo] npm install -g generator-gulp-bootstrap |
Merancah Proyek
Arahkan terminal dimanapun anda suka untuk merancah proyek baru anda dan jalankan:
1 |
yo gulp-bootstrap |
Anda akan mendapatkan sebuah display kecil seperti ini dalam terminal anda, dan anda akan dapat memverifikasi bahwa anda ingin menggunakan Bootstrap dan Modernizr:
Setelah generator selesai berjalan anda akan memiliki sebuah struktur folder seperti ini:
Command
Untuk membangun proyek anda gunakan command:
1 |
gulp |
Untuk mengaktifkan local preview dengan auto compilation dan auto reload jalankan:
1 |
gulp watch |
Dalam sebuah browser, proyek Bootstrap baru anda akan tampak seperti ini:
Membuat Sebuah Proyek HTML5 Boilerplate
Untuk merancah sebuah proyek HTML5 Boilerplate baru kita akan menggunakan generator-h5bp.
Menginstall Generator
Install generator secara global dengan:
1 |
[sudo] npm install generator-h5bp -g |
Merancah Proyek
Untuk merancah proyek baru gunakan command ini:
1 |
yo h5bp |
Anda akan mendapatkan option untuk memilih apakah anda ingin docs dicantumkan atau tidak ke dalam proyek anda, kemudian generator akan berjalan.
Anda kemudian akan memiliki sebuah proyek HTML5 Boilerplate dengan struktur seperti ini:
Di dalam sebuah browser yang terlihat hanya sebuah pesan "Hello world!", namun jika anda melihat code anda akan melihat semuanya yang anda perlukan untuk membangun situs berbasis HTML5:
Membuat Sebuah Proyek Google Web Starter Kit
Web Starter Kit adalah sebuah proyek oleh Google, didesain sebagai "boilerplate & tooling untuk pengembangan multi-device". Anda dapat membaca lebih lanjut tentang fitur - fiturnya di: https://developers.google.com/web/starter-kit/
Untuk merancah kita akan menggunakan generator-mobile.
Menginstall Generator
Install generator secara global dengan:
1 |
[sudo] npm install yeoman/generator-mobile -g |
Merancah Proyek
Untuk merancah proyek GWSK gunakan command:
1 |
yo mobile |
Dalam terminal anda akan menjawab kumpulan pertanyaan berdasarkan proyek yang akan anda buat:
Ketika generator telah selesai berjalan proyek baru anda akan memiliki struktur ini:
Command
Untuk membuka sebuah BrowserSync yang didukung oleh preview localhost jalankan command ini:
1 |
gulp serve |
Preview situs anda akan tampak seperti ini:
Catatan: Setelah menjalankan command gulp serve anda mungkin akan melihat sebuah pesan error menyatakan browser-sync tidak dapat ditemukan. Jika demikian, install itu secara manual ke dalam folder anda dengan command ini:
1 |
[sudo] npm install browser-sync |
Untuk membangun seluruh proyek jalankan command ini:
1 |
gulp |
Untuk mendapatkan feedback tentang kecepatan proyek anda gunakan:
1 |
gulp pagespeed |
Command ini akan memberikan anda sebuah tulisan tentang data "pagespeed" dalam terminal seperti ini:
Dan jika anda memilih satu dari hosting option saat merancah proyek anda, publish situs anda dengan:
1 |
gulp deploy |
Kesimpulan
Sekian tentang tutorial ini - Anda sekarang memiliki kumpulan tools untuk memulai dan menjalankan beberapa front-end framework umum, semuanya melalui kekuatan command line!
