ひとまず安心してください。
最後の〆以外はかなりイイところまで行っています。
少しの調整で綺麗なディレクトリ構成になりますので、座学→実践編の順にお付き合いください。
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
ディレクトリの配下に存在することを前提としています。
JavaScript
1 return gulp.src([
2 'app/styles/**/*.scss',
3 'app/styles/**/*.css'
4 ])
JavaScriptファイルはL.113にあるように./app/scripts/main.js
ただひとつです。
次の行に// Other scripts
とか書いてありますが、ファイル同士を無理やりconcatでくっつけるだけのようなので、main.jsを起点に外部ファイルを読み込んで連携した方が筋が良いです。
JavaScript
1 gulp.src([
2 // Note: Since we are not using useref in the scripts build pipeline,
3 // you need to explicitly list your scripts here in the right order
4 // to be correctly concatenated
5 './app/scripts/main.js'
6 // Other scripts
7 ])
もう少しgulpfile.babel.jsを読み進めましょう。
SASSとしてコンパイルをした後に、dist/styles
に次々と吐き出しています
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みたいなファイルを作っておいて…
SASS
1@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';
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/29 15:53