Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
Lấy link của các resource file đã install bằng Bower
Khi cài đặt các package về CSS/JS để lập trình front-end thì mình hay dùng công cụ quản lý resource Bower của Twitter. Sau khi chạy các câu lệnh bower install xxx
thì bower sẽ tự động download từ Github về và gói vào trong các thư mục con bên trong bower_components
.
$ bower install bootstrap
bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#* validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1 cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1 validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower bootstrap#~3.3.5 install bootstrap#3.3.5
bower jquery#>= 1.9.1 install jquery#2.1.4
bootstrap#3.3.5 bower_components/bootstrap
└── jquery#2.1.4
jquery#2.1.4 bower_components/jquery
$ ls bower_components/
bootstrap jquery
Khi này đường dẫn đến cái file resource sẽ nằm sâu bên trong package, khi muốn lấy đường link thường phải vào trực tiếp tìm khá mất thời gian, ví dụ như
$ ls bower_components/bootstrap/dist/css
bootstrap-theme.css bootstrap-theme.min.css bootstrap.css.map
bootstrap-theme.css.map bootstrap.css bootstrap.min.css
$ ls bower_components/bootstrap/dist/js
bootstrap.js bootstrap.min.js npm.js
Để giải quyết vấn đề trên mình dùng một package tên là main-bower-files
.
main-bower-files
main-bower-files giúp cho việc lấy link trực tiếp các package trở nên dễ dàng. Đầu tiên chúng ta cần
$ npm install main-bower-files
Sau khi đã cài đặt, main-bower-file sẽ có khả năng đọc file bower.json
để trả lại đường link trực tiếp đến resource. Giả sử bower.json
của mình như dưới đây
{
dependencies: {
bootstrap: '~3.3.5'
}
}
Khi này link đến resouce của bootstrap có thể được lấy đơn giản
$ node -e "console.log(require('main-bower-files')().join('\n'))"
/Users/CongPH/test/bower_components/jquery/dist/jquery.js
/Users/CongPH/test/bower_components/bootstrap/less/bootstrap.less
/Users/CongPH/test/bower_components/bootstrap/dist/js/bootstrap.js
Gulp-concat
Để sử dụng main-bower-files
hiệu quả hơn nữa thì mình dùng cả gulp
và gulp concat
để tạo file resouce tổng hợp.
$ npm install gulp gulp-concat
Bây giờ có thể viết 1 gulp task sử dụng kết quả đầu ra của main-bower-files
cho vào 1 file JS chung
// gulpfile.js
var mainBowerFiles = require('main-bower-files');
var files = mainBowerFiles();
var gulp = require('gulp');
gulp.task('default',function(){
concat = require('gulp-concat');
gulp.src(files)
.pipe(concat('bower_components.js'))
.pipe(gulp.dest('public'))
;
});
Chạy task trên chúng ta sẽ tạo ra một file bower_components.js
tổng hợp của mọi thư viện đã install
$ gulp
[23:08:56] Using gulpfile ~/test/gulpfile.js
[23:08:56] Starting 'default'...
[23:08:56] Finished 'default' after 78 ms
$ ls public/
bower_components.js
Khi này tạo file HTML và include thành quả của chúng ta là bạn đã có thể thoải mái sử dụng tất cả mọi thư viện của mình :)
<!-- index.html -->
<script src="bower_components.js"></script>
<script>
console.log(typeof $)// function
</script>
Phân biệt source của CSS và JS
Trong trường hợp main file của package gồm cả CSS và JS, thì bạn sẽ muốn concat riêng vào 2 file bower_components.js
và bower_components.css
. Chúng ta sẽ cần gulp-if
$ npm install gulp-if
Bây giờ là gulpfile.js
được cải tiến
var mainBowerFiles= require('main-bower-files');
var files= mainBowerFiles();
var gulp= require('gulp');
gulp.task('default',function(){
gulpif= require('gulp-if');
concat= require('gulp-concat');
gulp.src(files)
.pipe(gulpif(function(file){
return file.path.substr(-4)==='.css';
}
,concat('bower_components.css')
,concat('bower_components.js')
))
.pipe(gulp.dest('public'))
;
});
Và chạy gulp task như bình thường, bạn sẽ thấy 2 file kết quả bower_components.js
và bower_components.css
.
$ gulp
Using gulpfile ./gulpfile.js
Starting 'default'...
Finished 'default' after * ms
$ ls public/
bower_components.js bower_components.css
Bây giờ sử dụng là quá đơn giản phải không ?
<!-- index.html -->
<link href="bower_components.css" rel="stylesheet">
<script src="bower_components.js"></script>
<script>
console.log(typeof $)// function
</script>
One file to rule them all :)






