npm管理のライブラリが提供する css をインポートする

  • 18
    いいね
  • 0
    コメント

概要

English
クライアントサイドのパッケージ管理は,bower から npm に移した方が良いらしい.npm 管理の JavaScript パッケージは,Browserify を使えばインポートできる.では,CSS はどうやってインポートすれば良いのか?例えば,bootstrap を npm でインストールして bundle.css に取り込むにはどうすれば良いのか?調べた結果をまとめる.

前提

タスクランナーとして Gulp を使う.また,各パッケージのフォルダ構成に依存しない方法を探す.また,下記の例では bootstrap を使用しているが, npm i --save bootstrap にてインストール済みとする.

Parcelify を使う

JavaScript のインポートに Browserify を使う場合,プラグインの一つである Parcelify の利用はメジャーな方法だろう.逆に,JavaScript をまったく使わないプロジェクトではダミーが必要になると思う.

Parcelify を使う場合,package.jsonstyle 要素にインポートする CSS ファイルを列挙する必要がある.

package.json
{
  "style": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./src/css/main.css"
  ]
}

例えば,bootstrap と自前の CSS ファイルの両方をインポートする場合は上記のように書く(他の項目については省略した).そして,Gulp のタスクは次の通り.

gulpfile.coffee
gulp = require "gulp"
browserify = require "browserify"
parcelify = require "parcelify"
source = require "vinyl-source-stream"

gulp.task "browserify", ->
  b = browserify
    entries: ["./src/main.js"]
    extensions: [".js"]
  parcelify b,
    bundles:
      style: "./public/bundle/bundle.css"
  b.bundle()
    .pipe source "bundle.js"
    .pipe gulp.dest ".public/bundle/"

これで,browserify タスクを実行すれば package.jsonstyle 属性に指定した CSS ファイルが一つにまとめられpublic/bundle/bundle.css に書き出される.

この方法の微妙なところは,package.json にインポートする CSS ファイルの相対パスを列挙する必要があるところで,パッケージのフォルダ構成が変わると,毎回設定しなおす必要がある.もしかしたら,各パッケージの package.json から情報を引っ張ってくる方法があるのかも知れないが,調べた限りでは分からなかった.

rework を使う

rework のプラグイン rework-npm は,各パッケージの package.json を調べて,必要な CSS ファイルをインポートしてくれる.rework を使う方法は複数あるが,Gulp から使うために gulp-rework を用いることにする.

まず,インポートするパッケージを列挙した css ファイルを用意する.例えば,bootstrap をインポートする場合,次のように書く.

src/main.css
@import "bootstrap";

/* その他の項目は省略 */

そして,Gulp のタスクは次の通り.

gulpfile.coffee
gulp = require "gulp"
rework = require "gulp-rework"
reworkNPM = require "rework-npm"

gulp.task "css", ->
  gulp.src "./src/*.css"
    .pipe rework(reworkNPM())
    .pipe gulp.dest "./public/bundle/"

これで,css タスクを実行すれば,bootstrap を含んだ CSS が public/bundle/main.css にできる.

この方法だと,bootstrap のフォルダ構成をいちいち調べなくても必要なファイルがインポートできる.ただし,これがうまくいくのは,各パッケージの package.jsonstyle 属性があり,適切に記述されている場合のみである.style 属性がないパッケージについては,個別にフォルダ構成を調べなければならず,結局 Parcelify を使う場合と同じ手間がかかる.

まとめ

npm管理のライブラリが提供する css のインポート方法として,Parcelify を使う方法と rework を使う方法についてまとめた.
他にもっと良い方法があったら教えてください.

参考