質問: Node.js と npm 初心者です。 gulp もインストールしました。 ### 最終的にやりたいこと PWA を作成して Firebase Hosting にデプロイ ### 現状 Web Starter Kit と同じディレクトリ構成で PWA のレイアウトを Material Components で作成しています。 作っていくうちにディレクトリ構成が正しいのか不安になりました。 ※以下記憶があいまいなところがあります。 プロジェクトフォルダ(web-starter-kit-x.x.x)で npm install して node_modules ができました。(package.json がここにあったので) プロジェクトフォルダで gulp serve を実行してライブリロードできることを確認しました。 次に app フォルダ内の index.html を編集 ``` ・・・略・・・ ``` ここで localhost は /app なのだから上にある node_modules を参照できない。 プロジェクトフォルダをルートにして ../node_modules/ とすれば動くようにはなりますが、当然使うときに localhost/app/ となってしまいます。 ### まとめると わからないことだらけですが、 * ビルドやコンパイルなどの作業で /app 下に .js と .css を生成するのでしょうか。 * 完成品も node_modules を参照するのか。(app/scripts と app/styles に必要なファイルを生成して、不要になったりするのか) * node_modules の正しい場所がわからない。 * 他、おかしいとところをご指摘ください。
回答: ひとまず安心してください。 最後の〆以外はかなりイイところまで行っています。 少しの調整で綺麗なディレクトリ構成になりますので、座学→実践編の順にお付き合いください。 material-components/material-components-web QuickStartの欄は非常にダメなサンプルなので、真似しないでください。 まず開発者である質問者さんは、CSSやJavaScriptファイルを何処に設置しなければならないか? そもそもこれが定まらないと話にならないわけですね。 Node.jsのお約束として、 困ったときにはpackage.jsonやgulpfile.babel.jsといったファイルを見ましょう。 今回はディレクトリ構成がどうあるべきかという情報はgulpfile.babel.jsにバッチリ記載されていました。 CSSやSASSのファイルはL.86〜89にあるように、`app/styles`ディレクトリの配下に存在することを前提としています。 ``` return gulp.src([ 'app/styles/**/*.scss', 'app/styles/**/*.css' ]) ``` JavaScriptファイルはL.113にあるように`./app/scripts/main.js`ただひとつです。 次の行に`// Other scripts`とか書いてありますが、ファイル同士を無理やりconcatでくっつけるだけのようなので、main.jsを起点に外部ファイルを読み込んで連携した方が筋が良いです。 ``` gulp.src([ // Note: Since we are not using useref in the scripts build pipeline, // you need to explicitly list your scripts here in the right order // to be correctly concatenated './app/scripts/main.js' // Other scripts ]) ``` もう少しgulpfile.babel.jsを読み進めましょう。 * CSS系: L.86〜102 SASSとしてコンパイルをした後に、`dist/styles`に次々と吐き出しています * JS系: L.109〜127 `app/scripts/main.js`をbabelで変換掛けて縮小化した後に`dist/scripts/main.min.js`として出力しています (ソースマップも吐き出していますのでデベロッパーツールで表示した時に何処でエラー吐いてるか全く分からん...ということもありません) これがnode_modulesからCSSやJSファイルを連れてくる糸口になります。 node_modules配下のCSSファイルの持ち出し方。 Sassはご存知ですか? 素の芋っぽい書き方しか出来ないCSSと違って、変数やセレクタのネストが出来る超強化CSSです。 ただし、ブラウザはCSSしか読み込めないのでNode.jsでコンパイルしてCSSに変換かけてからデプロイします。 まぁ、そんなSASSですが、importという外部ファイルを読み込む超必殺技を持っています。 3-7 Sassの @import - Sassの教科書 app/styles/main.sassみたいなファイルを作っておいて... ``` @import '../../node_modules/material-components-web/dist/material-components-web.css' ``` これでdist/styles/main.cssを開けばnode_modules配下のCSSを持ち出せた事が確認出来るかと思います。 node_modules配下のJSファイルの持ち出し方。 CSSもSASS使って持ち出せるんだから、JSもなんかあるでしょ? 察しがいいですね、その通りです。 JavaScriptにはES2015というバージョンがありまして、 それのimport機能を使って外部のJSファイルにアクセスすることが出来ます。 import - Babel importとexportは対になっていまして、 慣れるまでは少々難しいとは思いますがこれを機にES2015に関して色々と勉強してみてください。 material-components/material-components-webのトップページにあるように、この一文で取り出せるようになるかと思います。 `import {checkbox as mdcCheckbox} from 'material-components-web';`