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

Cách cài đặt NPM và Bower

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics
The Command Line for Web Design: Powering Up Front End Code

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Chúng tôi thường sử dụng các package của bên thứ ba trong các dự án thiết kế web.

Chúng tôi tải CSS của bên thứ ba từ các dự án như BootstrapFoundation và các mã lệnh như jQueryModernizr. Dần dần, chúng tôi cũng sử dụng các package của bên thứ ba như một phần của quá trình phát triển, như trình biên dịch xử lý trước CSS hoặc công cụ làm đẹp code và nén nhỏ để tối đa tốc độ tải và vận hành của trang.

Xử lý những package này có thể trở thành mớ lộn xộn khi tải về thủ công, trao đổi file, và cập nhật. Chắc rồi, chúng ta làm nó hoạt động, nhưng điều này tốn thời gian và thường gây khó chịu khi để dự án có nhiều code cũ kỹ. Giờ có một cách tốt hơn, bằng dòng lệnh hỗ trợ bởi trình quản lý package.

Trong hướng dẫn này, bạn sẽ học cách để xử lý các package từ bên thứ ba chỉ bằng các lệnh tiện dụng chỉ có hai hoặc ba từ.

Chú ý: Nếu bạn chưa theo dõi hướng dẫn đầu tiên trong loạt bài, Grasping the Basics, bạn sẽ thấy hữu ích khi xem qua nó trước khi bắf đầu tại đây.

Hai trình quản lý lớn

Để khởi đầu việc sử dụng dòng lệnh để xử lý các package từ bên thứ ba, điều đầu tiên bạn sẽ cần là "package management system" hoặc "package manager". Hai chọn lựa cực phổ biến trong giới thiết kê web hiện giờ là npmBower, và chúng là những hệ thống mà bạn sẽ học trong hôm nay.

npm (qua Node.js)

Có lẽ bạn đã nghe qua Node.js, một bọc kẹo trên nền JavaScript có thể hỗ trợ mọi thứ từ nền tảng blog, coding IEDs, media centres đến toàn bộ hệ điều hành.

Cùng với cài đặt Node.js với trình quản lý package npm, một hệ thống cực kỳ hữu dụng mà bạn sẽ sử dụng thường xuyên trong loạt bài này.

Trái ngược với điều bạn nghĩ lúc đầu, npm không phải là Node Package Manager. Nó chính thức đại diện cho "npm is not an acronymn" và ngay đầu trang bạn sẽ thấy câu hài hước nhỏ mỗi lần tải lại trang như "never poke monkeys" and "newts parading majestically".

Lúc này npm cho phép truy xuất và quản lý 127,664 package được thiết kế cho các mục đích khác nhau. Trong số các mục hữu dùng cho thiết kế web, bạn sẽ tìm thấy package như:

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

Cho mục đích của hướng dẫn này, ta sẽ dùng npm kết hợp với Node.js, tuy nhiên nó là một thực thể độc lập và có thể được dùng chung với những hệ thống khác như IO.js.

Cho người mới bắt đầu, tôi khuyên bạn nên theo dõi những bài hướng dẫn có sử dụng Node.js, như có thể bạn sẽ khai thác những chọn lựa khác sau đó

Bower

Lần ra mắt sử dụng dòng lệnh cho package của bên thứ ba thực ra bắt nguồn từ Bower. Ai đó đã khuyên tôi dùng nói chỉ bằng câu nói

“Bạn đã thử Bower chưa? Nó rất tuyệt! ”

Tôi dẵ không biết nó sẽ được dùng để làm gì, ví thế tôi lên www.bower.io và nhìn vào danh sách package có sẵn.

Thư viện bower bao gồm những thứ như sau:

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

Bạn có nhiều cơ hội để sử dụng ít nhất hai hoặc ba package này trong dự án của bạn thường xuyên. Bower giúp bạn làm điều này nhanh hơn và dễ hơn.

Khi nào thì dùng Bower và npm

Trong vài trường hợp bạn có thể tìm một package có trên cả npm và Bower. Nếu vậy, bạn nên sử dụng phiên bản nào?

Cả hai chọn lựa này sẽ cài đặt và cập nhật package nhanh như nhau. Không có quy tắc cứng nhắc và nhanh chóng trong việc sử dụng, và sau cùng bạn sẽ tạo ra cách thức làm việc của riêng mình, vì vậy, tôi sẽ cung cấp cho bạn quy tắc chung để bạn có thể quyết định ngay bây giờ.

Từ góc độ thiết kế web, sự khác biệt thực sự phụ thuộc vào cách bạn sử dụng các package, và hai tình huống sử dụng phổ biến mà bạn gặp là cho triển khai ở front end và phát triển.

Bower được thiết kế cho việc quản lý package của front end, vì vậy hãy chọn nó nếu bạn đang tìm thứ gì đó được người xem trang web sử dụng thông qua trình duyệt.

Mặt khác các npm package sẽ là chọn lựa tốt nếu bạn chỉ định dùng một package như một phần của quá trình phát triển, và nó sẽ không nằm trong sản phẩm hoàn thiện.

Cài đặt npm và Bower

Cài đặt Node.js và npm

Rất may việc cài đặt npm khá đơn giản khi nó đóng gói cùng bản cài đặt của Node.js. Đi dến trang http://www.nodejs.org và tải về bản cài đặt cho nền tảng của bạn. Cài đặt nó và npm sẽ được cài đặt cùng, sau đó bạn có thể tiếp tục.

Quan trọng! Thậm chí nếu bạn đã cài đặt Node.js trên hệ thống của bạn, hãy tuân theo các bước phía trên để bảo đảm bạn đang có phiên bản mới nhất. Nếu bạn đang sử dụng phiên bản cũ kỹ thì một số bước bạn làm theo sẽ không hiệu quả.

Cập nhật npm

Theo trang npm, khả năng là có một phiên bản mới hơn phiên bản bạn đã lấy về với bộ cài đặt Node.js

Để chắc rằng bạn đang dùng phiên bản mới nhất, chạy lệnh:

Install Git / MsysGit

Git, cùng với Node.js và npm, là điều kiện cần để dùng Bower. Git cũng là điều kiện cần cho những package thiết kế web khác bạn sẽ nhận ra mình muốn sử dụng, vậy hãy cài đặt tất cả trên hệ thống của bạn trước khi tiếp tục.

Cho người dùng OSX

Với người dùng OSX, bạn sẽ muốn ghé thăm website chính của Git, tải bộ cái đặt binary và chạy nó khi bạn sẽ có một bộ cài đặt khác: http://git-scm.com/download/mac

Cho người dùng Windows

Để sử dụng Bower trên Windows, bạn sẽ cần một phiên bản Git dành riêng cho Windows là msysGit. Nhấn nút Download và lấy trình cài đặt, nhưng khoan chạy nó: http://msysgit.github.io

Lý do tôi nói chưa cần cài đặt nó là vì bạn cần cẩn thận để chọn thiết lập đúng khi chạy trình cài đặt. Khi bạn nhìn thấy màn hình dưới đây, hãy bảo đảm kiểm tra Chạy Git từ Windows Command Prompt.

Để biết thêm thông tin về cách cài đặt msysGit cần thiết cho Bower, hãy xem: A Note for Windows Users.

Cài đặt Bower

Bower có thể được cài đặt thông qua npm bằng cách chạy lệnh này:

Người dùng Mac, bởi vì chúng tôi đang sử dụng flag -g để cài đặt Bower toàn cục, hãy nhớ rằng bạn có thể cần phải thêm sudo vào trước lệnh này, sau đó nhập mật khẩu của bạn khi được yêu cầu.

Cơ bản của npm và Bower

Khởi tạo một dự án

Cả npm và Bower hoạt động cùng các file manifest đặc biệt chứa thông tin về một dự án và danh sách các package được sử dụng. Với các dự án npm, file đó có tên là "package.json" và trong dự án Bower có tên gọi là "bower.json". Cách dễ nhất để tạo các file này là dùng lệnh init. Hãy làm ngay nào.

Với npm

Với terminal của bạn trỏ về thư mục gốc của dự án, hãy chạy lệnh này:

Lệnh này sẽ hỏi bạn một loạt câu hỏi để bạn trả lời trong terminal, cung cấp những thông tin để tạo ra file "package.json".

Hãy đọc thêm về lệnh npm init tại: https://docs.npmjs.com/cli/init

Với Bower

Lần nữa, terminal của bạn trỏ về thư mục gốc của dự án, hãy chạy lệnh này:

Cũng như quá trình khởi tạo npm, bạn sẽ trả lời một loạt câu hỏi, và câu trả lời của bạn sẽ tạo thành file "bower.json".

Đọc thêm về lệnh bower init tại http://bower.io/docs/creating-packages/#bowerjson.

Tìm kiếm các package

Trong dự án đã khởi tạo, bạn đã sẵn sàng để đưa các package vào. Để thực hiện điều này bạn sẽ cần tìm các package bạn muốn sử dụng thông qua npm hoặc Bower.

Bạn phải tìm đúng nơi khi bạn cần biết đúng tên của package trong hệ sinh thái npm hoặc Bower để có thể cài đặt và cập nhật nó.

Bằng npm

Bạn có thể tìm các package bạn muốn sử dụng với npm qua thanh tìm kiếm ở trang chủ của chúng.

Cũng có thể tìm kiếm trực tiếp qua dòng lệnh bằng npm search , tuy nhiên cá nhân tôi thấy dễ tìm hơn khi trực tiếp thao tác trên trang của npm.

Khi bạn tìm thấy package muốn sử dụng, hãy ghi chú lại tên của package.

Bằng Bower

Tìm kiếm Bower package thông qua http://bower.io/search/.

Như với npm, hãy ghi lại tên của package mà bạn muốn sử dụng khi bạn đã tìm ra nó.

Cài đặt những package mới

Khi bạn đã tìm thấy một package bạn muốn dùng, bạn sẵn sàng cài đặt nó. Đây là nơi bạn sẽ dùng tên của <package> mà bạn đã ghi lại. Trong hướng dẫn bên dưới, hãy dùng tên đó khi bạn thấy trong câu lệnh.

Bằng npm

Để cài đặt package cục bộ, chỉ cho thư mục dự án của bạn, chạy lệnh:

Package sẽ được tải về trong một thư mục thứ cấp có tên "node_modules", để dự án có thể sử dụng nó. Ví dụ:

Ngoài việc cài đặt cục bộ cho package, cũng có chọn lựa cài đặt npm package toàn cục.

Các package được cài đặt cục bộ chỉ sử dụng bên trong thư mục dự án của bạn, nhưng các package cài đặt toàn cục có thể được sử dụng bất cứ đâu trên máy của bạn. Ví dụ, khi package "less" được cài toàn cục bạn có thể dùng nó để biên dịch tài liệu ".less" bất kỳ, bất cứ đâu trong hệ thống của bạn.

Để cài đặt package toàn cục, hãy gắn cờ -g vào câu lệnh:

Bằng Bower

Quá trình cài đặt cho các Bower package gần như giống với npm, sử dụng câu lệnh:

Khác biệt là Bower package được đặt trong thư mục tên là "bower_components", ví dụ:

Vì bạn sẽ dùng Bower để triển khai package cho front end trong các dự án cụ thể nên các bản cài đặt có thể thực hiện cục bộ, vậy bạn không cần dùng cờ -g:

Làm việc với các dependency

Nếu bạn thích chia sẻ hay thậm chí sao chép và di chuyển một dự án mà bạn đã dùng npm hoặc Bower, thì quản lý dependency là thứ tuyệt vời để thực hiện việc đó. Hãy để tôi gỉai thích lý do.

Bạn sẽ gọi lại file manifest tạo ra trước đó, “Package.json” và “bower.json”. Bạn có thể thêm danh sách các package mà dự án của bạn phụ thuộc vào trong mỗi file này.

Bạn đã thấy cách packages của npm lưu vào thư mục "npm_modules" và của Bower lưu vào thư mục "bower_components". Điều hay ho là nếu bạn muốn chia sẻ thư mục dự án của bạn, bạn có thể hoàn toàn bỏ qua 2 thư mục này, miễn là bạn đã liệt kê thư viện phụ thuộc trong các file manifest của chúng.

Việc này sẽ tiết kiệm hàng trang megabyte, giúp di chuyển dự án của bạn dễ dàng hơn.

Khi ai đó có dự án của bạn, họ có thể chạy npm install và tất cả package được liệt kê trong "package.json" sẽ tự động tải về vào một thư mục "npm_moduels".

Tương tự, lệnh bower install sẽ tự động tải thư viện phụ thuộc bất kỳ có trong file "bower.json" và lưu chúng vào thư mục mới có tên "bower_components".

Thư việc phụ thuộc cho production (thành phẩm) và development (phát triển)

Có hai dạng thư viện phụ thuộc:

  1. Production dependencies - trong bối cảnh thiết kế web, điều này ý chỉ các package sẽ được triển khai trên front-end, ví dụ Mondernizr tương thích đa trình duyệt.

  2. Development dependencies - trong bối cảnh thiết kế web, điều này ý chỉ các package được dùng trong quá trình phát triểnn, ví dụ LESS để biên dịch file .less.

Bower và npm cho phép bạn xác định các dependency cho production và development. Tuy nhiên chúng ta đã thảo luận trước đó, bạn sẽ dùng Bower cho package của front-end và npm cho package của develoment. Do vậy, ta sẽ thiết lập Bower packages làm production dependency và npm module là development dependency.

Phương pháp thiết lập dependecy của cả hai giống nhau, đó là thêm một cờ vào lệnh bạn dùng để cài package.

Cài đặt như development dependency

Để thiết lập package là development dependecy, hãy bổ sung cớ --save-dev.

Package sẽ được cài đặt giống với trước đó, nhưng nó sẽ thêm vào danh sách của devDependencies trong file "package.json" như sau:

Cài đạt làm production dependency

Để thiết lập một package làm production dependency, hãy thêm cờ --save.

Trong trường hợp này, package sẽ được bổ sung vào danh sách của dependencies trong file "bower.json" như sau:

Chú ý: khi cài đặt package toàn cục của npm với cờ -g, bạn không cần lo lắng việc sử dụng --save hoặc --save-dev.

Cập nhật các package

Việc cập nhật các package cũng là câu lênh một dòng cho cả Bower và npm.

Bằng npm

Với package cài đặt cục bộ, chạy lệnh sau đây trong thư mục gốc của dự án chứa thư mục "node_modules".

Thay vì cập nhật package toàn cục, thêm vào -g:

Bạn cũng có thể bỏ tên package ra để bạn có thể cập nhật nhiều package cùng lúc:

Để cập nhật tất cả package trong dự án cụ thể, hương terminal của bạn về thư mục gốc của dự án và chạy:

Và dể cập nhật package toàn cục, chạy:

Bằng Bower

Việc cập nhật Bower package quan trong như với npm. Từ thư mục gốc của dự án, đến thư mục "bower_components", chạy lệnh sau đây:

Phiên bản mới nhất sẽ tự động được tải về và bổ sung vào thư mục "bower_components".

Sử dụng npm và package Bower

Khi bạn đã cài đặt các package, có lẽ bạn muốn biết làm sao để sử dụng chúng, phải không?

Với package của Bower, quá trình giống như khi bạn thường dùng để lấy tài nguyên, thông qua script hoặc link trong HTML, tải file về ngay thư mục "bower_components".

Tuy nhiên không tối ưu và có phương pháo tốt hơn để thực hiện nó. Ví dụ, có thể bạn hợp nhất các file JS mà bạn đang dùng từ các Bower package thành một file nén và tải về.

Bạn sẽ thấy một minh hoạ cách bạn thực hiện điều này trong hướng dẫn sắp tới Automation with Task Runners.

Các package được cài đặt qua npm cơ bản sẽ được dùng qua dòng lệnh hoặc các đoạn mã thực thi tác vụ.

Các package khác nhau có những nhóm lệnh riêng bạn có thể dùng cho tất cả loại nhiệm vụ khác nhau như biên dịch, nén, kết hợp .v.v. Những nhiệm vụ có package đặc trưng có thể tự động hoá bằng cách thiết lập task runner để xử lý nhiều nhiệm vụ cùng lúc.

Bạn sẽ học cách sử dụng npm packages theo cả hai cách qua các hướng dẫn sắp tới của loạt bài này.

Trong hướng dẫn tiếp theo

Tiếp theo chúng ta sẽ xem xét làm thế nào để tận dụng dòng lệnh để bổ sung tất cả hiệu quả và code trang người dùng của bạn, cả việc làm sao để phát triển và cách vận hành sau khi đã hoàn thành.

Bạn sẽ học cách dùng dòng lệnh cho biên dịch xử lý trước, CSS autoprefixing, JS và tối ưu file CSS, và tổng hợp của temple HTML và shorthand.

Tôi sẽ gặp lại bạn trong hướng dẫn tiếp theo, Powering Up Front End Code.

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.