Mixed-Nuts(ミックスナッツ)は便利なライブラリを組み合わせ、快適かつ高速なWebサイト制作環境を支援します。
昨今の複雑なフロントエンドの開発環境やデプロイ環境を数コマンドで構築できるようにしました。 環境作りが苦手だったり面倒だと感じている方にぜひ使っていただきたいです。
GitやNodejsのインストールは wiki を参照ください。
$ git clone https://github.com/ucan-lab/mixed-nuts ./example
$ cd example
$ npm install
$ 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公式ドキュメント を参照ください。
項目 | 値 | 補足 |
---|---|---|
HTMLテンプレートエンジン | EJS | 素のHTMLもそのまま記述できます。 |
CSSメタ言語 | Sass(Scss記法) | 素のCSSもそのまま記述できます。 |
ブラウザ自動リロード | Browsersync | 保存と同時にブラウザを再読み込みします。 |
Laravel Mix | Laravel Mix | Laravel Mix をベースに Bootstrap3/Font Awesome/Vue.js/jQuery/lodash などの便利なライブラリを利用可能です。 |
ホスティングサービス | Netlify | 簡単にHTMLを公開できます。 |
その他 | バージョニング(ブラウザキャッシュ対策)、ベンダープレフィックス自動付加、未使用スタイルの除去、本番・開発ビルドの圧縮切替、出力HTML自動整形 | --- |