main-bower-filesを活用する

```html
<script src="bower_components.js"></script>
```

npmを初めて使った時は、[その導入の手軽さ](http://memo.yomukaku.net/entries/jbjiYnP)に驚いたと思う。ところがbowerの場合、`$ bower install name`の後に、**手動でパスを書かなければならない**。

# main-bower-files

```
$ npm install main-bower-files
```

[main-bower-files](https://www.npmjs.com/package/main-bower-files)は、bower.jsonファイルを読み、dependenciesで定義した、パッケージのコアファイルを返す。

```js: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)})
```

```json:bower.json
{
  "name": "files",
  "dependencies": {
    "angular": "~1.3.9",
    "jquery": "~2.1.3",
    "lodash": "~2.4.1"
  }
}
```

```bash
.
├── bower.json
├── bower_components # $ bower install済
└── files.js
```

```bash
$ 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](http://qiita.com/cognitom/items/e542e6601ab6af8b6e1e)を使用することで、内容を１ファイルに結合できる。

```js: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'))
  ;
});
```

```bash
$ gulp
  Using gulpfile ./gulpfile.js
  Starting 'default'...
  Finished 'default' after * ms
```

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

```html: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は失敗する。

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

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

# gulp-if

```bash
$ npm install gulp-if
```

単純な解決策として、[gulp-if](https://www.npmjs.com/package/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'))
  ;
});
```

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

```bash
$ gulp
  Using gulpfile ./gulpfile.js
  Starting 'default'...
  Finished 'default' after * ms
```


```html:public_html/index.html
<link href="bower_components.css" rel="stylesheet">
<script src="bower_components.js"></script>
```

## 依存が解決できない
当然ながら、先ほどのサンプルの中に、例えば：

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

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

# gulp-jsfyを作った
```
$ npm install gulp-jsfy
```

それらは[gulp-jsfy](https://www.npmjs.com/package/gulp-jsfy)を使用して解決できる。

```json:bower.json
{
  "name": "files",
  "dependencies": {
    "slick-carousel": "~1.3.15",
    "animate.css": "~3.2.0",
    "highlightjs": "~8.4.0"
  }
}
```

```js: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>`に戻ろう。

```bash
$ gulp
  Using gulpfile ./gulpfile.js
  Starting 'default'...
  Finished 'default' after * ms
```


```html: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ライブラリ](https://github.com/59naga/gulp-jsfy-example/blob/master/public_html/index.html#L7)、[あるいは読み込んだcssのclass](https://github.com/59naga/gulp-jsfy-example/blob/master/public_html/index.html#L10)を使用する。