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

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ả gulpgulp 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.jsbower_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.jsbower_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 :)

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Phan Hoàng Công

6 bài viết.
22 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
35 9
Lang thang thấy một số button rất đẹp trên Codepen nên tổng hợp lại. Các bạn click thẳng vào link tiêu đề để đến codepen nhé. (Link) (Ảnh) (Li...
Phan Hoàng Công viết gần 3 năm trước
35 9
White
23 4
(Ảnh) Bower là gì Bower là một công cụ quản lý resource cho lập trình frontend được open source bởi Twitter. Đã qua cái thời bạn phải download t...
Phan Hoàng Công viết hơn 3 năm trước
23 4
White
21 6
Hiệu ứng chữ Để tạo ra một website ấn tượng thì design, hay "bộ mặt" của trang web là cực kỳ quan trọng. Trong design nói chung thì tiêu đề, đầu đ...
Phan Hoàng Công viết hơn 3 năm trước
21 6
Bài viết liên quan
White
33 6
Mình có một anh bạn người Pháp tên là Aurelien, anh này có một biệt tài đó là convert được màu RGB sang mã Hex chỉ bằng cách tính nhẩm. Phương phá...
Huy Trần viết hơn 1 năm trước
33 6
White
6 0
Chắc hẳn không ít các bạn khi code web thường hay cân nhắc việc sử dụng đơn vị như thế nào cho hợp lý mà lại hiệu quả. Nào là code trên desktop rồi...
Trần Anh Tuấn viết 8 ngày trước
6 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
22 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!