How To Install Bower Components

Indonesian (Bahasa Indonesia) translation by Sap (you can too view the original English article)

Kita biasanya menggunakan paket pihak ketiga dalam proyek desain web.

Kita memuat CSS pihak ketiga dari proyek-proyek seperti Bootstrap dan Foundation, dan skrip seperti jQuery dan Modernizr. Semakin banyak, kita juga menggunakan paket pihak ketiga sebagai bagian dari proses pengembangan, seperti compiler untuk preprosesor CSS atau alat pembersihan dan kompresi kode untuk memaksimalkan kecepatan dimuat dan dijalankannya situs kita.

Berurusan dengan semua paket ini dapat dengan cepat menjadi kekacauan pengunduhan manual, transfer file, dan pembaruan. Tentu, kita telah membuatnya berhasil, tetapi itu memakan waktu dan ketidaksempurnaannya sering meninggalkan proyek menggunakan kode yang sudah ketinggalan zaman. Sekarang ada cara yang lebih baik, menggunakan pengelola paket yang didukung baris perintah.

Dalam tutorial ini, Anda akan belajar cara menangani paket pihak ketiga hanya dengan mengetikkan dua hingga lima perintah kata.

Catatan: Jika Anda belum mengikuti tutorial pertama dalam seri ini, Grasping the Nuts, Anda akan merasa terbantu untuk melakukannya sebelum mulai di sini.

Manajer Paket "Dua Besar"

Untuk mulai menggunakan baris perintah untuk menangani paket pihak ketiga, hal pertama yang Anda perlukan adalah "sistem manajemen paket", atau "manajer paket". Dua pilihan yang jauh dan paling populer di kalangan desainer web saat ini adalah npm dan Bower, dan itu adalah sistem yang akan Anda pelajari untuk digunakan hari ini.

npm (via Node.js)

Anda mungkin pernah mendengar tentang Node.js, tas berdasarkan JavaScript yang dapat menggerakkan segalanya dari platform blog, ke pengkodean IDE, ke pusat media ke seluruh sistem operasi.

Bersamaan dengan instalasi Node.js, muncul npm pengelola paket, sistem yang sangat bermanfaat yang akan Anda lihat sering digunakan di seluruh rangkaian ini.

Bertentangan dengan apa yang mungkin Anda pikirkan, npm tidak mewakili "Node Package Manager." Secara resmi singkatan dari "npm bukan akronim" dan di bagian atas situs Anda akan melihat lelucon kecil muncul setiap penyegaran seperti "tidak pernah poke monkeys "dan" newts memamerkan dengan anggun. "

Pada saat ini npm menyediakan akses ke dan manajemen untuk 127.664 paket yang dirancang untuk semua jenis tujuan yang berbeda. Di antara item yang berguna untuk desain spider web, Anda akan menemukan paket seperti:

• Stylus
• node-sass
• LESS
• Jade
• UglifyJS
• Bower
• Grunt
• Gulp
• Yeoman
• Autoprefixer
• BrowserSync
• Foundation CLI
• UglifyJS
• clean-css
• Jeet.gs
• Kouto Swiss

Untuk keperluan tutorial ini, kita akan menggunakan npm bersama dengan Node.js, namun ini adalah entitas independen yang dapat digunakan dengan sistem lain seperti IO.js yang baru tiba.

Sebagai pemula, saya sarankan untuk mengikuti tutorial menggunakan Node.js, tetapi Anda mungkin ingin mengeksplorasi opsi lain nantinya.

Bower

Pengenalan saya untuk menggunakan baris perintah untuk manajemen paket pihak ketiga benar-benar datang melalui Bower. Seseorang memarahiku hanya dengan mengatakan

"Sudahkah Anda mencoba Bower? Itu mengagumkan!"

Saya tidak tahu apa yang akan digunakan untuk itu, jadi saya pergi ke www.bower.io dan satu melihat daftar paket yang tersedia adalah semua yang diperlukan untuk bola lampu mulai padam.

Perpustakaan paket bower mencakup hal-hal seperti:

• Bootstrap
• AngularJS
• jQuery
• Font Awesome
• HTML5 Average
• Animate.css
• Normalize.css
• Modernizr
• Underscore
• Flat UI
• jQuery UI
• Handlebars
• Masonry

Peluang sangat tinggi Anda menggunakan setidaknya satu atau dua paket di proyek Anda secara rutin. Bower membuatnya lebih cepat dan lebih mudah bagi Anda untuk terus melakukannya.

Kapan Menggunakan Bower vs npm

Dalam beberapa kasus, Anda mungkin menemukan paket tersedia di npm dan Bower. Jika demikian, versi apa yang harus Anda gunakan?

Kedua opsi ini akan menginstal dan memperbarui paket secepat satu sama lain. Tidak ada aturan yang keras dan cepat untuk digunakan, dan pada akhirnya Anda akan mengembangkan cara Anda sendiri dalam melakukan sesuatu, jadi saya hanya akan memberi Anda aturan umum yang dapat Anda gunakan untuk keputusan Anda saat ini.

Dari perspektif desain web, perbedaannya benar-benar bermuara pada bagaimana Anda akan menggunakan paket-paket itu, dan dua kasus penggunaan yang biasa Anda miliki adalah untuk penggunaan forepart vs. pengembangan yang digunakan.

Bower dirancang untuk manajemen paket front finish, jadi pilihlah jika Anda mencari sesuatu yang akan dikonsumsi oleh pengunjung situs melalui browser.

Di sisi lain, paket npm akan menjadi pilihan yang akan Anda gunakan jika Anda hanya akan menggunakan paket sebagai bagian dari proses pengembangan Anda dan tidak akan dimasukkan dalam produk jadi.

Memasang npm dan Bower

Instal Node.js dan npm

Untungnya, menginstal npm cukup lurus ke depan karena sudah dipaketkan dengan instalatur untuk Node.js. Kepala ke http://www.nodejs.org dan unduh penginstal untuk platform Anda. Pasang di komputer Anda dan npm akan dipasang bersama dengan itu, maka Anda akan baik untuk melanjutkan.

Penting! Bahkan jika Anda sudah menginstal Node.js di sistem Anda, ikuti langkah di atas untuk memastikan Anda memiliki versi terbaru. Jika Anda menjalankan versi usang beberapa langkah yang harus Anda ikuti saat Anda melalui seri ini mungkin tidak berfungsi.

Perbarui npm

Menurut situs npm, kemungkinan mungkin ada versi npm yang lebih baru yang tersedia daripada yang Anda dapatkan dibundel dengan instalasi Node.js Anda.

Untuk memastikan Anda menggunakan versi terbaru:

[sudo] npm install npm -g

Instal Git / MsysGit

Git, bersama dengan Node.js dan npm, merupakan prasyarat untuk menggunakan Bower. Git juga merupakan prasyarat untuk beberapa paket berorientasi desain web lainnya yang Anda inginkan untuk digunakan, jadi mari kita gunakan semua sistem Anda sebelum pindah.

Untuk Pengguna OSX

Untuk pengguna OSX Anda akan ingin pergi ke situs spider web Git utama, ambil penginstal biner dan jalankan seperti yang Anda lakukan dengan penginstal aplikasi lain: http://gitscm.com/download/mac

Untuk Pengguna Windows

Untuk menggunakan Bower di Windows, Anda justru membutuhkan versi khusus Git untuk windows yang bernama msysGit. Tekan tombol Download dan ambil penginstal yang dapat dieksekusi, tetapi jangan menjalankannya: http://msysgit.github.io

Alasan saya mengatakan untuk tidak menginstalnya adalah Anda harus berhati-hati memilih pengaturan yang tepat saat menjalankan penginstal. Ketika Anda melihat layar di bawah, pastikan untuk memeriksa Run Git dari Windows Command Prompt.

Untuk informasi lebih lanjut tentang menginstal msysGit sebagai prasyarat untuk Bower, lihat: Catatan untuk Pengguna Windows.

Instal Bower

Bower dapat diinstal melalui npm dengan menjalankan perintah ini:

[sudo] npm install -g bower

Pengguna Mac, karena kita menggunakan -g bendera untuk menginstal Bower secara global mengingat Anda mungkin perlu menyertakan sudo di awal perintah, lalu masukkan kata sandi Anda saat diminta.

Dasar-dasar dari npm dan Bower

Inisialisasi sebuah Proyek

Npm dan Bower bekerja dengan file manifes khusus yang berisi informasi tentang proyek dan daftar paket yang digunakannya. Dengan proyek-proyek npm file itu dinamai "package.json" dan dalam proyek Bower dinamakan "bower.json". Cara termudah untuk membuat file-file ini adalah dengan menggunakan perintah init yang terkait dengan masing-masing. Ayo lakukan itu sekarang.

Via npm

Dengan terminal Anda mengarah ke folder akar proyek Anda, jalankan perintah ini:

npm init

Ini akan menanyakan Anda serangkaian pertanyaan yang dapat Anda jawab di dalam terminal, dengan memberikan informasi file "package.json" Anda akan dibuat.

Baca lebih lanjut tentang perintah init npm di: https://docs.npmjs.com/cli/init

Via Bower

Sekali lagi, dengan final Anda menunjuk pada folder root proyek Anda, jalankan perintah ini:

bower init

Sama seperti proses inisialisasi npm Anda akan menjawab serangkaian pertanyaan, dan jawaban Anda akan membentuk file "bower.json" Anda.

Baca lebih lanjut tentang perintah init bower di: http://bower.io/docs/creating-packages/#bowerjson

Mencari Paket

Dengan proyek yang diinisialisasi, Anda siap untuk mulai membawa paket. Untuk melakukan ini, Anda perlu menemukan paket yang ingin Anda gunakan melalui npm atau Bower.

Anda harus mencari di lokasi yang tepat karena Anda perlu mengetahui nama paket yang benar dalam ekosistem npm atau Bower agar dapat menginstal dan memperbaruinya.

Melalui npm

Anda dapat mencari paket yang ingin Anda gunakan dengan npm melalui bilah pencarian di bagian atas beranda mereka.

Anda juga dapat menelusuri langsung melalui baris perintah dengan penelusuran npm <packet>, namun secara pribadi saya merasa lebih mudah menemukan apa yang saya cari langsung di situs npm.

Ketika Anda menemukan paket yang ingin Anda gunakan, catat nama paket.

Via Bower

Mencari paket Bower dapat dilakukan melalui http://bower.io/search/.

Seperti dengan npm, catat nama paket yang ingin Anda gunakan begitu Anda menemukannya.

Menginstal New Packages

Setelah menemukan paket yang ingin Anda gunakan, Anda siap untuk menginstalnya. Di sinilah Anda akan menggunakan nama paket yang Anda buat catatan. Dalam petunjuk di bawah, gunakan nama itu di mana pun Anda melihat <parcel> dalam sebuah perintah.

Via npm

Untuk memasang paket secara lokal, yaitu hanya di dalam folder proyek Anda, jalankan:

npm install <package>

Paket ini akan diunduh ke subfolder bernama "node_modules", membuatnya tersedia untuk digunakan dalam proyek Anda. Sebagai contoh:

Serta menginstal paket secara lokal ada juga pilihan untuk menginstal paket npm secara global.

Paket yang dipasang secara lokal hanya tersedia untuk digunakan dalam konteks proyek Anda, tetapi paket yang dipasang secara global dapat digunakan dari mana saja di komputer Anda. Misalnya, setelah paket "kurang" dipasang secara global, Anda dapat menggunakannya untuk mengumpulkan dokumen ".less", di mana saja di sistem Anda.

Untuk menginstal paket secara global, lampirkan flag -g ke perintah Anda:

[sudo] npm install <package> -g

Via Bower

Proses instalasi untuk paket Bower hampir sama dengan npm, menggunakan perintah:

bower install <package>

Perbedaannya adalah paket Bower ditempatkan ke subfolder bernama "bower_components", misalnya:

Karena Anda akan menggunakan Bower untuk menerapkan paket forepart cease dalam proyek-proyek tertentu, semua instalasi Anda dapat dilakukan secara lokal, jadi Anda tidak perlu menggunakan -thousand bendera.

Bekerja dengan Dependensi

Jika Anda tertarik untuk berbagi atau bahkan sekadar menggandakan dan memindahkan proyek yang telah Anda gunakan npm atau Bower, manajemen dependensi adalah hal yang hebat untuk diketahui. Biarkan saya menjelaskan alasannya.

Anda akan mengingat file manifes yang Anda buat sebelumnya; "Bundle.json" dan "bower.json". Ke masing-masing file ini Anda dapat menambahkan daftar paket proyek Anda tergantung pada.

Anda telah melihat bagaimana paket npm masuk ke folder bernama "npm_modules" dan Bower ke "bower_components". Nah hal yang keren adalah jika Anda ingin berbagi proyek Anda, Anda benar-benar dapat menghilangkan kedua folder tersebut, selama Anda memiliki daftar dependensi dalam file manifes Anda.

Ini dapat dengan mudah menghemat beberapa ratus megabyte, membuatnya lebih mudah untuk memindahkan proyek Anda.

Ketika orang lain memegang proyek Anda, mereka dapat menjalankan instalasi npm dan semua paket yang tercantum dalam file "bundle.json" akan secara otomatis diunduh ke folder "npm_modules" baru.

Demikian juga, perintah penginstalan bower akan secara otomatis mengunduh semua dependensi yang tercantum dalam file "bower.json" dan menempatkannya di binder "bower_components" yang baru.

Ketergantungan Produksi & Pengembangan

Ada dua jenis dependensi:

1. Ketergantungan produksi - dalam konteks desain web, ini mengacu pada paket yang akan digunakan di bagian depan, mis. Modernizr untuk kompatibilitas lintas browser.

2. Ketergantungan pengembangan - dalam konteks desain spider web ini mengacu pada paket yang digunakan selama pengembangan, mis. LESS untuk kompilasi file tanpa.

Bower dan npm memungkinkan Anda menentukan dependensi produksi dan pengembangan. Namun seperti yang telah kita bahas sebelumnya, Anda akan menggunakan Bower untuk paket ujung depan dan npm untuk paket pengembangan. Karena itu, kita akan mengatur paket Bower Anda untuk menjadi dependensi produksi, dan modul npm Anda menjadi dependensi pengembangan.

Metode untuk menetapkan dependensi sama di npm dan Bower, dan itu adalah menambahkan tanda ke perintah yang Anda gunakan untuk menginstal paket.

Instal sebagai Ketergantungan Pembangunan

Untuk menetapkan paket sebagai ketergantungan pengembangan, tambahkan tanda --salvage-dev, mis.

npm install <package> --relieve-dev

Paket ini akan dipasang dengan cara yang sama seperti yang telah Anda lihat, tetapi akan ditambahkan ke daftar devDependencies dalam file "parcel.json" Anda seperti:

Instal sebagai Production Dependency

Untuk menetapkan paket sebagai product dependency, tambahkan tanda --salve flag, east.1000.

bower install <packet> --save

Dalam hal ini paket akan ditambahkan ke daftar dependensi dalam file "bower." Seperti:

Catatan: ketika menginstal paket npm secara global dengan -chiliad flag, Anda tidak perlu khawatir tentang menggunakan tanda --save atau --save-dev.

Memperbarui Paket

Memperbarui paket juga merupakan perintah satu baris untuk Bower dan npm.

Melalui npm

Untuk paket yang diinstal secara lokal, jalankan perintah berikut di folder akar proyek Anda di mana folder "node_modules" Anda adalah:

npm update <package>

Untuk memperbarui paket yang dipasang secara global, tambahkan -g flag:

[sudo] npm update <parcel> -g

Anda juga dapat membiarkan nama paket keluar sehingga Anda dapat memperbarui semua paket Anda sekaligus.

Untuk memperbarui semua paket dalam proyek tertentu, arahkan last Anda ke binder akar dan jalankan:

npm update

Dan untuk memperbarui semua paket yang diinstal secara global, jalankan:

[sudo] npm update -one thousand

Via Bower

Memperbarui paket Bower pada dasarnya sama dengan npm. Dari folder akar proyek Anda, yang menyimpan folder "bower_components" Anda, jalankan perintah ini:

bower update <bundle>

Versi terbaru akan secara otomatis diunduh dan ditambahkan ke binder "bower_components" Anda.

Menggunakan Paket npm dan Bower

Setelah paket Anda diinstal, Anda mungkin ingin tahu bagaimana Anda benar-benar dapat menggunakannya, bukan?

Dengan paket Bower, prosesnya bisa sama seperti yang Anda gunakan untuk menarik aset secara normal, yaitu melalui script atau elemen link di HTML Anda, memuat file langsung dari folder "bower_components" Anda.

Namun ini tidak optimal dan ada cara yang lebih baik untuk melakukannya. Misalnya, Anda dapat menggabungkan semua file JS yang Anda gunakan dari paket Bower Anda ke dalam satu file terkompresi dan memuatnya.

Anda akan melihat demonstrasi tentang cara melakukan hal ini di tutorial Automation with Task Runners.

Paket yang diinstal melalui npm biasanya akan digunakan melalui skrip command line atau task runner.

Paket yang berbeda dilengkapi dengan kumpulan perintah bawaan sendiri yang dapat Anda gunakan untuk berbagai tugas yang berbeda seperti kompilasi, kompresi, penggabungan, dan banyak lagi. Tugas-tugas khusus paket ini pada gilirannya dapat diotomatisasi dengan menyiapkan pelari tugas untuk menjalankan banyak tugas sekaligus.

Anda akan belajar cara menggunakan paket npm dalam kedua cara ini di atas tutorial selanjutnya dari seri ini.

Di Tutorial Berikutnya

Selanjutnya, kita melangkah melalui bagaimana Anda dapat memanfaatkan baris perintah untuk menambahkan semua lapisan efisiensi baru ke kode ujung depan Anda, baik dalam cara Anda mengembangkannya dan cara menjalankannya setelah selesai.

Anda akan belajar cara menggunakan baris perintah untuk kompilasi preprocessor, CSS autoprefixing, pengoptimalan file JS dan CSS, dan kompilasi untuk penulisan singkat dan templaten HTML.

Saya akan melihat Anda di tutorial berikutnya, Memampatkan Kode Bagian Depan.

Source: https://webdesign.tutsplus.com/id/tutorials/how-to-install-npm-and-bower--cms-23451

Posted by: mcraeopoetinat.blogspot.com

Share this post