Tối ưu quy trình làm việc với Bower và Apache ANT

Oct 26, 2017

Technical

Table of Contents

Bower là gì?

Bower là một công cụ quản lý các packages và component Frontend cho web. Nó được xây dựng và phát triển bởi Twitter. Với Bower, việc quản lý các thư viện package cho web hay việc tích hợp các thư viện cần thiết trở lên đơn giản, dễ dàng và tiết kiệm thời gian.
Bài viết này sẽ hướng dẫn cơ bản cho các bạn cách cài đặt và sử dụng Bower để tối ưu hoá quy trình làm việc cho Frontend

Những vấn đề mà Bower có thể giải quyết?

Giả sử bạn bắt đầu triển khai làm một dự án, bạn cần sử dụng một số thư viện thay vì tự code. Bạn lên trang chủ của những thư viện đó, download về, link nó vào dự án và bắt đầu chạy. Cách làm này khá thủ công và gặp một số vấn đề
– Có nhiều dự án cần khá nhiều thư viện, bạn phải đi download từng thứ 1 khá là mất thời gian.
– Khi có nhiều người trong team làm cùng dự án đó với bạn, mỗi người lại sử dụng 1 phiên bản khác nhau, điều này có thể gây ra lỗi.
– Mỗi khi thư viện đó có phiên bản mới nâng cấp tính năng hay là sửa lỗi, bạn lại phải làm lại bước 1.
– Khi commit code lên git, bạn cũng sẽ phải commit những thư viện đó, điều này thực sự không cần thiết.

Tóm lại, Bower sẽ giúp bạn giải quyết tất cả các vấn đề trên và nhiều vấn đề nhỏ nhỏ khác nữa.

Cài đặt và config Bower

Để cài đặt Bower các bạn bắt buộc phải có công cụ quản lý package npm của node. Để có npm thì bạn cần cài nodejs, npm sẽ tự động có sau khi cài nodejs.
Kiểm tra xem máy bạn đã cài nodejs chưa thì chạy lệnh node -v nếu nó hiện ra phiên bản thì tức là máy đã cài rồi còn nếu chưa có thì download trực tiếp trên trang chủ của nodejs tại địa chỉ https://nodejs.org hoặc với hệ điều hành macOS có thể cài qua homebrew

brew install node

Sau khi cài nodejs bạn chạy lệnh sau để cài Bower

npm install -g bower

Cài đặt các package qua command line

Sử dụng cú pháp bower install <package> để tải 1 thư viện bất kỳ, ví dụ

# Registered package
bower install jquery

# GitHub shorthand
bower install desandro/masonry

# Git endpoint
bower install git://github.com/user/package.git

# URL
bower install https://example.com/script.js

Xem thêm các package tại https://bower.io/search

Cài đặt bằng cách config file bower.json

Tạo file bower.json bằng cách chạy câu lệnh bower init nội dung file sẽ tự động được sinh ra trong quá trình cài, nó sẽ tương tự như này

{
	"name": "BBSeminar",
	"homepage": "https://blog.bravebits.co",
	"authors": [
		"Quang Nguyen "
	],
	"description": "Quan ly cac thu vien voi Bower",
	"main": "",
	"license": "MIT"
}

Để thêm các thư viện các bạn define thêm “dependencies”, nội dung file sẽ như thế này

{
	"name": "BBSeminar",
	"homepage": "https://blog.bravebits.co",
	"authors": [
    	"Quang Nguyen <quangnn@bravebits.vn>"
	],
  	"description": "Quan ly cac thu vien voi Bower",
	"main": "",
	"license": "MIT",
	"dependencies": {
    	"bootstrap": "^3.3.7",
    	"jquery": "^1.11.0",
    	"Font-Awesome": "^4.7.0"
  	}
}

Sau đó chạy lệnh bower install. Ngoài ra cài đặt các thư viện như ở bước 2 thay vì chỉ gõ lệnh bower install <package> các bạn thêm --save vào cuối câu lệnh thì config cho package đó sẽ tự động được lưu vào file bower.json với điều kiện bạn phải có file bower.json ở root của project rồi.

Để sử dụng các thư viện này cho các project của các bạn, có thể dùng Gruntjs, RequireJS, Yoeman… (Tham khảo thêm tại https://bower.io) nhưng trong khuôn khổ topic này mình sẽ hướng dẫn các bạn sử dụng Apache ANT

ANT là gì?

ANT là viết tắt của “Another Neat Tool”, một project nguồn mở của Apache Community. ANT là một build tool, sử dụng một file xml để build file. Nó giúp lập trình viên tiết kiệm thời gian biên dịch, đóng gói mã nguồn một cách nhanh chóng.

Cài đặt

Ant là một công cụ để build code java dựa trên trình biên dịch java. Download Ant tại https://ant.apache.org Chính vì dựa trên Java nên các bạn cần phải cài Java, download Java tại đây

Cấu hình trên MacOS

Copy folder vừa tải về vào thư mục /usr/local (CMD + Shift + G) để go to folder
Tải file build.xml tại đây https://ant.apache.org/manual/using.html – đây là file để config toàn bộ dự án của bạn, trong file này các bạn có thể config đường dẫn đến các thư viện qua Bower. Đây là ví dụ về file build mà mình đang sử dụng cho 1 dự án



    Client-side ANT build file for Nitro Project

Mở Sublime > Tools > Build System > New Build System, chèn nội dung sau và lưu lại với 1 cái tên bất kỳ sau đó mở lại menu Build System chọn cái build bạn vừa đặt tên

{
    "cmd": "/usr/local/ant/bin/ant",
    "working_dir": "${project_path}"
}

Cuối cùng các bạn bấm CMD + B để thực thi

Cấu hình trên Window

Cũng copy folder Ant tải ở phía trên vào 1 thư mục nào đó tuỳ bạn ở đây mình chọn ổ hệ thống là ổ C, đường dẫn cụ thể sẽ là C:\ant
Nháy chuột phải vào My Computer chọn Properties / Advanced system settings / Enviroment Variables bấm vào New ở mục System variables
Variable name: ANT_HOME Variable value: c:\ant (hoặc đường dẫn của bạn lưu ant)
sau đó lưu lại
Tiếp theo double click vào phần Path sau đó thêm đường dẫn tới thư mục bin nằm trong ant (lưu ý có dấu ; )
;C:\ant\bin
Để kiểm tra đã cài đặt thành công chưa mở CMD và gõ ant -version nếu hiện ra version là thành công