Lấy link của các resource file đã install bằng Bower
Bower
5
frontend
15
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.
21 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
31 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 hơn 2 năm trước
31 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 3 năm trước
23 4
White
18 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 3 năm trước
18 6
Bài viết liên quan
White
7 0
Clipboard.js là một thư viện vô cùng gọn nhẹ (2kb) giúp bạn dễ dàng cắt hoặc sao chép nội dung trên trang web một cách dễ dàng. Được sử dụng trong ...
Duyệt viết hơn 2 năm trước
7 0
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 3 năm trước
23 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
21 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á!