Mixed-Nuts〜Webサイト制作環境〜

Mixed-Nuts(ミックスナッツ)は便利なライブラリを組み合わせ、快適かつ高速なWebサイト制作環境を支援します。

• ✅ EJS, Sass, JavaScript自動ビルド対応
• ✅ 素のHTML, CSS, JavaScriptを書けるので導入コストが低い
• ✅ ブラウザ自動リロード対応
• ✅ EJSによるヘッダー、フッターの部品の共通化が可能
• ✅ ブラウザキャッシュ(バージョニング)対策
• ✅ ベンダープレフィックスの自動付与
• ✅ purgeCssによる未使用スタイルの自動除去
• ✅ 本番ビルドによるファイル圧縮(Minify)対応
• ✅ 出力HTML自動整形
• ✅ Netlifyにデプロイ対応

昨今の複雑なフロントエンドの開発環境やデプロイ環境を数コマンドで構築できるようにしました。 環境作りが苦手だったり面倒だと感じている方にぜひ使っていただきたいです。

要件

• Git
• Nodejs(npm)
• Netlifyアカウント(GitHubアカウント)

GitやNodejsのインストールは wiki を参照ください。

開発環境構築

インストール

$ git clone https://github.com/ucan-lab/mixed-nuts ./example
$ cd example
$ npm install

Git初期化

$ rm -rf .git && git init && git add . && git commit -m "first commit"
$ git remote add origin 追加したいリポジトリ
$ git push -u origin master

ビルド

ビルド(通常)

$ npm run dev

ビルド(アセット監視モード、ブラウザ自動リロード)

$ npm run watch
$ npm run gulp

それぞれ別窓でコマンドを実行してください。

ビルド(最適化)

$ npm run prod

css, javascriptファイルが最適化(Minify)されます。

デプロイ(手動)

高機能ホスティングサービス Netlify を使って簡単にデプロイ＆公開できます。

$ npm run dep

? No site id specified, create a new site: Yes
? Path to deploy? (current dir): public

初回デプロイ実行時はユーザー登録＆認証確認、サイト作成＆公開ディレクトリ設定が行われます。
基本的に無料で使用できます。また有料になりますがアクセスコントロールでパスワード制限をかけることも可能です。
詳細なサイト設定は netlify公式ドキュメント を参照ください。

デプロイ(自動)

wiki参照

各種ライブラリ

項目	値	補足
HTMLテンプレートエンジン	EJS	素のHTMLもそのまま記述できます。
CSSメタ言語	Sass(Scss記法)	素のCSSもそのまま記述できます。
ブラウザ自動リロード	Browsersync	保存と同時にブラウザを再読み込みします。
Laravel Mix	Laravel Mix	Laravel Mix をベースに Bootstrap3/Font Awesome/Vue.js/jQuery/lodash などの便利なライブラリを利用可能です。
ホスティングサービス	Netlify	簡単にHTMLを公開できます。
その他	バージョニング(ブラウザキャッシュ対策)、ベンダープレフィックス自動付加、未使用スタイルの除去、本番・開発ビルドの圧縮切替、出力HTML自動整形	---

補足等

https://github.com/ucan-lab/mixed-nuts/wiki