Lấy link của các resource file đã install bằng Bower

Bower

5

frontend

30

Phan Hoàng Công viết ngày 27/07/2015

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 :)