webpack 4 + Babel 7 の環境で React + MobX アプリを動かす
今年は2月にwebpack 4がリリースされ、4月にNode ver.10がリリース、Babel 7もリリースを間近に控えるなど、フロントエンド周りのバージョンアップが相次いでいます。ここでは webpack 4 + B...
npm install --save-dev gulp-task-runner
でインストールしてください。最新バージョンは0.1.7です。
gulp sitemap
でもできます。
次いでcontents : ...
ですが、ここではbuildディレクトリには吐き出すファイルをすべて指定しています。build後のディレクトリとconfig.contents
を見比べると1対1に対応しているのが分かると思います。top.htmlだけが特別で、これはbuild/index.htmlになっています。その他、例えばcontents
内のabout
はbuild/about/index.html
として吐き出されます。plan, reportのようにサブディレクトリを作成する場合は上の例のようにconfig.contents内にオブジェクトリテラルで指定してください。オブジェクトリテラルのキーがサブディレクトリの名前、配列はその階層でのディレクトリ群になります。
srcディレクトリには対応するファイルをhtmlディレクトリ、scssディレクトリに格納してください。ファイル名にはseparatorプロパティで指定した文字列(デフォルトだと’___’)でサブディレクトリを区切ってください。例えばreport\_\_\_01\_\_\_details.html
というファイルであればbuild/report/01/details/
ディレクトリにindex.htmlとして吐き出されます。最終的にはすべてのファイルはindex.htmlという名前にリネームされることに注意してください。また、src/scssディレクトリ内のファイルはデフォルトではsrc/cssに吐き出されます。これをhtmlディレクトリ内のファイルから@@includeしてください。cssはコンパイル段階でhtmlファイルにベタ張りして、link要素でのcss読み込みはしないことを前提としています。
jsファイルはすべてbuildPathで指定したディレクトリ直下のjsディレクトリに吐き出されます。
examples/src/homepage-pc
の方では
watches
プロパティに登録します。上記のサンプルだと以下の部分がそれです:
gulp
でgulpを起動してください。例えばexamples/src/homepage-spでgulpを起動すると
gulp images
で画像の圧縮とbuildディレクトリへの吐き出しをしてくれるようになってます。この辺、デフォルトの挙動とオプションの追加なんかはおいおいやっていきます。