Help us understand the problem. What is going on with this article?

main-bower-filesを活用する

More than 5 years have passed since last update.
<script src="bower_components.js"></script>

npmを初めて使った時は、その導入の手軽さに驚いたと思う。ところがbowerの場合、$ bower install nameの後に、手動でパスを書かなければならない

main-bower-files

$ npm install main-bower-files

main-bower-filesは、bower.jsonファイルを読み、dependenciesで定義した、パッケージのコアファイルを返す。

files.js
var mainBowerFiles= require('main-bower-files');
var files= mainBowerFiles();

console.log(files);
//以下は相対パスで取得する場合
//files= files.map(function(file){return require('path').relative(__dirname,file)})
bower.json
{
  "name": "files",
  "dependencies": {
    "angular": "~1.3.9",
    "jquery": "~2.1.3",
    "lodash": "~2.4.1"
  }
}
.
├── bower.json
├── bower_components # $ bower install済
└── files.js
$ node files
[ 'bower_components/angular/angular.js',
  'bower_components/jquery/dist/jquery.js',
  'bower_components/lodash/dist/lodash.compat.js' ]

さて、見覚えのあるパス一覧が取得できた。

gulp-concat

$ npm install gulp gulp-concat

gulp-concatを使用することで、内容を1ファイルに結合できる。

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_html'))
  ;
});
$ gulp
  Using gulpfile ./gulpfile.js
  Starting 'default'...
  Finished 'default' after * ms

$ gulpを実行して出来たbower_components.jsは、パス一覧の内容が結合したものになる。

public_html/index.html
<script src="bower_components.js"></script>
<script>
console.log(typeof angular)// object
console.log(typeof $)// function
console.log(typeof _)// function
</script>

cssが処理できない

以下のようなパッケージの場合、先ほどのgulp-concatは失敗する。

bower.json
{
  "name": "files",
  "dependencies": {
    "animate.css": "~3.2.0"
  }
}

と言うのも当たり前で、取得したファイルはcssだ、jsではない。

gulp-if

$ npm install gulp-if

単純な解決策として、gulp-ifで出力先を分ける方法がある。

gulpfile.js
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_html'))
  ;
});

以下のように使用できる。

$ gulp
  Using gulpfile ./gulpfile.js
  Starting 'default'...
  Finished 'default' after * ms
public_html/index.html
<link href="bower_components.css" rel="stylesheet">
<script src="bower_components.js"></script>

依存が解決できない

当然ながら、先ほどのサンプルの中に、例えば:

body{
  background:url("./image/background.png") no-repeat;
}

のような記述があった場合、読み込んだcssは使い物にならない。bower_componentsの中に、cssがあることを前提にした記法だからだ。

gulp-jsfyを作った

$ npm install gulp-jsfy

それらはgulp-jsfyを使用して解決できる。

bower.json
{
  "name": "files",
  "dependencies": {
    "slick-carousel": "~1.3.15",
    "animate.css": "~3.2.0",
    "highlightjs": "~8.4.0"
  }
}
gulpfile.js
var mainBowerFiles= require('main-bower-files');
var files= mainBowerFiles();

var gulp= require('gulp');
gulp.task('default',function(){
  jsfy= require('gulp-jsfy');
  concat= require('gulp-concat');

  gulp.src(files)
    .pipe(jsfy({dataurl:true}))
    .pipe(concat('bower_components.js'))
    .pipe(gulp.dest('public_html'))
  ;
});

冒頭の<script>に戻ろう。

$ gulp
  Using gulpfile ./gulpfile.js
  Starting 'default'...
  Finished 'default' after * ms
public_html/index.html
<script src="bower_components.js"></script>
<script>
console.log(typeof $().slick)// function
console.log(typeof $("link[data-name='animate']").attr('href'))// string
console.log(typeof hljs)// object
</script>

あとは通常通り、windowに登録されたjsライブラリあるいは読み込んだcssのclassを使用する。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした