概要
クライアントサイドのパッケージ管理は,bower から npm に移した方が良いらしい.npm 管理の JavaScript パッケージは,Browserify を使えばインポートできる.では,CSS はどうやってインポートすれば良いのか?例えば,bootstrap を npm でインストールして bundle.css
に取り込むにはどうすれば良いのか?調べた結果をまとめる.
前提
タスクランナーとして Gulp を使う.また,各パッケージのフォルダ構成に依存しない方法を探す.また,下記の例では bootstrap を使用しているが, npm i --save bootstrap
にてインストール済みとする.
Parcelify を使う
JavaScript のインポートに Browserify を使う場合,プラグインの一つである Parcelify の利用はメジャーな方法だろう.逆に,JavaScript をまったく使わないプロジェクトではダミーが必要になると思う.
Parcelify を使う場合,package.json
の style
要素にインポートする CSS ファイルを列挙する必要がある.
{
"style": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./src/css/main.css"
]
}
例えば,bootstrap と自前の CSS ファイルの両方をインポートする場合は上記のように書く(他の項目については省略した).そして,Gulp のタスクは次の通り.
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.json
の style
属性に指定した CSS ファイルが一つにまとめられpublic/bundle/bundle.css
に書き出される.
この方法の微妙なところは,package.json
にインポートする CSS ファイルの相対パスを列挙する必要があるところで,パッケージのフォルダ構成が変わると,毎回設定しなおす必要がある.もしかしたら,各パッケージの package.json
から情報を引っ張ってくる方法があるのかも知れないが,調べた限りでは分からなかった.
rework を使う
rework のプラグイン rework-npm は,各パッケージの package.json
を調べて,必要な CSS ファイルをインポートしてくれる.rework を使う方法は複数あるが,Gulp から使うために gulp-rework を用いることにする.
まず,インポートするパッケージを列挙した css ファイルを用意する.例えば,bootstrap をインポートする場合,次のように書く.
@import "bootstrap";
/* その他の項目は省略 */
そして,Gulp のタスクは次の通り.
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.json
に style
属性があり,適切に記述されている場合のみである.style
属性がないパッケージについては,個別にフォルダ構成を調べなければならず,結局 Parcelify を使う場合と同じ手間がかかる.
まとめ
npm管理のライブラリが提供する css のインポート方法として,Parcelify を使う方法と rework を使う方法についてまとめた.
他にもっと良い方法があったら教えてください.