main-bower-filesを活用する

<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を使用することで、内容を１ファイルに結合できる。

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を使用する。