前提
bashが動く && 動かせる
node v8.+ が動く(nodebrew推奨)
nodeやnodebrewはこちらの記事が非常に参考になります。
対象
- 最近の開発環境に触れてみたい方
- 直接FTPクライアントでサーバー側のファイルをいじってる方
- ある程度Webの知識がついてきて、更に何かしたい方
- タイトルの開発環境が欲しい方
概要
皆様、現状の開発環境に満足しておられますでしょうか。Webというものは派閥が多く、Angularだ、Reactだなんて言われているご時世ですが、そういったナウいものに手を出すには些か学習コストがかさむことが踏ん切りを邪魔してしまいがちです。
新しくて、便利なものを使っていきたいけど、難しいこと抜きでお願いしますって方は意外と多いのではありませんでしょうか？
そんな方々に朗報！！！！
- タグのカッコや綴じタグの呪縛から開放してくれるPug
- 同上をCSSに持ち込み、変数や関数、importが使えるSass
- 学習コストが低く、簡潔な書き回しができ、タグを自作できるRiot
- javascriptに型解決を与え、型からドキュメント生成できるTypeScript
- ページ上で必要なモジュールを統合してくれるWebpack
- コンパイル後のソースでエラーが起こっても安心SourceMap
以上の画期的かつ最新の開発環境がなんと！
- プロジェクトフォルダ構築済み
- ビルド設定構築済み
以上の状態の開発環境がダウンロードしてコマンド一発で手に入ります！！
実用に耐えれるかどうかは好みや私の技術レベルと相談ですが、新しい開発環境を とりあえず試してみたい！！ って方にはちょうど良いと思います。
何が便利か？
長くなるため記事を分けます。
こちらを御覧ください。
リポジトリ
GitHub上に公開してあります。
https://github.com/narumi18wa/riot-pug-sass-ts-proj
MITとなっておりますが、このプロジェクトに帰属するものに限り、好き勝手してもらって構いません。
というのも、好みでやっているため、PRをマージする可能性が低いです。
この辺の開発があまり活発ではなく、自作するに至ったので・・・。
使い方
1. README.mdを軽く読んで下さい
ここに書くとバージョン違いが発生する可能性があるので、本物を読んで下さい。
こちらです。そんなに長くならないように頑張ってます。
2. 書いてあるとおりです
プロジェクトリポジトリをzipでダウンロード、またはcloneし、 ./install.sh を叩く
3. とりあえずビルドしてみよう
bashで src/ (package.jsonがある場所) に入り、 npm run build します。
そうすると、プロジェクトルート直下に dist/ が生成され、 index.html ができます。
ブラウザなどで確認すると、 src/ がビルドされていることが確認できます。
4. 推奨開発環境
Atom
以下パッケージ
platform-ide-terminal
atom-ide-ui
ide-typescript
riot-tag
language-pug
5. 書き方のお作法など
長くなるため記事を分けます。
こちらを御覧ください。
6. ビルドの中身について
長くなるため記事を分けます。
こちらを御覧ください。