ゆずめも

私による私のためのメモ的なブログです。主に勉強した事について書いてます。

npmでインストールしたmaterial-design-liteからmaterial.min.cssが無くなった件

gitからプロジェクトダウンロードしてきて、npm install実行して、server起動してアクセスしたら、material.min.cssが無いよ!って言われた話

原因

前は動いてたのに…と涙目になりながらnode_modules/material-design-lite/ディレクトリを見てみると、以前はディレクトリ直下にあったmaterial.min.cssなどのビルドされた子たちがいなくなってた

どうやらちょっと前にmaterial-design-lite(以下MDL)はアップデートされて1.0.4がリリースされたらしい *1

developers.google.com

英語力皆無の状態で流し読みしただけだけど、無くなるようなこと書いてないし

Don’t forget we’re available on npm as well.

って書いてるからnpm対応しなくなった訳でもなさそう

とても残念そうな解決策

自分でbuildしたらいけるかと思い、buildしてみることに

# MDLのディレクトリに移動
cd node_modules/material-design-lite/
# MDLが依存してるものダウンロード
npm install
# MDLをgulpのデフォルトタスクでビルド
./node_modules/gulp/bin/gulp.js

一応distディレクトリが出てきて、ディレクトリの中を見るとちゃんとビルドされた子たちが出てきた

material-grid.css     material.js           material.min.js
material-grid.min.css material.min.css      material.min.js.map
material.css          material.min.css.map

まとめ

とりあえずとても残念な解決策っぽいですがmaterial.min.css使えそうです

今のところ

  • MDLのバージョンをpackage.json書き換えて1.0.3固定にする
  • npm scriptでnpm installした時にごにょごにょする

って2つのパターン考えたけどどっちも微妙… 誰かいい感じの解決方法教えてください(´・ω・`)

追記

こんな感じで書くとnpm install実行後、自動的にMDLがビルドかかるようになりました

// package.json
{
  "scripts": {
    "install": "(cd node_modules/material-design-lite && npm install && ./node_modules/gulp/bin/gulp.js)"
  }
}

*1:インストールした時は1.0.3でした