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: Merancah Proyek Baru

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Live Reload & BrowserSync
The Command Line for Web Design: Wrapping Up

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

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:

Sekarang anda dapat melanjutkan dan menginstall Foundation CLI dengan command ini:

Membuat Sebuah Proyek Foundation

Sekarang kapanpun anda ingin memulai sebuah proyek Foundation baru, buka terminal dimana anda ingin membuatnya dan jalankan command

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:

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:

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:

  1. Cari dan install sebuah Yeoman generator untuk jenis proyek yang ingin anda buat, misalnya generator-h5bp untuk proyek HTML5 Boilerplate.
  2. Ketik yo <generator_handle> untuk membuat sebuah proyek baru, misalnya yo 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:

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:

Merancah Proyek

Arahkan terminal dimanapun anda suka untuk merancah proyek baru anda dan jalankan:

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:

Untuk mengaktifkan local preview dengan auto compilation dan auto reload jalankan:

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:

Merancah Proyek

Untuk merancah proyek baru gunakan command ini:

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:

Merancah Proyek

Untuk merancah proyek GWSK gunakan command:

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:

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:

Untuk membangun seluruh proyek jalankan command ini:

Untuk mendapatkan feedback tentang kecepatan proyek anda gunakan:

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:

Kesimpulan

Sekian tentang tutorial ini - Anda sekarang memiliki kumpulan tools untuk memulai dan menjalankan beberapa front-end framework umum, semuanya melalui kekuatan command line!

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.