Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ucan-lab/mixed-nuts
Mixed-Nuts モダンなWebサイト開発環境2018
https://github.com/ucan-lab/mixed-nuts
ejs html laravel-mix sass vuejs
Last synced: about 2 hours ago
JSON representation
Mixed-Nuts モダンなWebサイト開発環境2018
- Host: GitHub
- URL: https://github.com/ucan-lab/mixed-nuts
- Owner: ucan-lab
- License: mit
- Created: 2018-01-04T11:54:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T14:36:17.000Z (10 months ago)
- Last Synced: 2024-09-20T08:32:07.143Z (8 days ago)
- Topics: ejs, html, laravel-mix, sass, vuejs
- Language: HTML
- Homepage: http://mixed-nuts.u-can.tech
- Size: 267 KB
- Stars: 23
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Mixed-Nuts〜Webサイト制作環境〜
Mixed-Nuts(ミックスナッツ)は便利なライブラリを組み合わせ、快適かつ高速なWebサイト制作環境を支援します。
- ✅ EJS, Sass, JavaScript自動ビルド対応
- ✅ 素のHTML, CSS, JavaScriptを書けるので導入コストが低い
- ✅ ブラウザ自動リロード対応
- ✅ EJSによるヘッダー、フッターの部品の共通化が可能
- ✅ ブラウザキャッシュ(バージョニング)対策
- ✅ ベンダープレフィックスの自動付与
- ✅ purgeCssによる未使用スタイルの自動除去
- ✅ 本番ビルドによるファイル圧縮(Minify)対応
- ✅ 出力HTML自動整形
- ✅ Netlifyにデプロイ対応
昨今の複雑なフロントエンドの開発環境やデプロイ環境を数コマンドで構築できるようにしました。
環境作りが苦手だったり面倒だと感じている方にぜひ使っていただきたいです。
## 要件
- [Git](https://git-scm.com)
- [Nodejs(npm)](https://nodejs.org/ja)
- [Netlifyアカウント](https://www.netlify.com)(GitHubアカウント)
GitやNodejsのインストールは [wiki](https://github.com/ucan-lab/mixed-nuts/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](https://www.netlify.com) を使って簡単にデプロイ＆公開できます。
```
$ npm run dep
? No site id specified, create a new site: Yes
? Path to deploy? (current dir): public
```
初回デプロイ実行時はユーザー登録＆認証確認、サイト作成＆公開ディレクトリ設定が行われます。
基本的に無料で使用できます。また有料になりますがアクセスコントロールでパスワード制限をかけることも可能です。
詳細なサイト設定は [netlify公式ドキュメント](https://www.netlify.com/docs) を参照ください。
## デプロイ(自動)
[wiki参照](https://github.com/ucan-lab/mixed-nuts/wiki/Netlify-%E8%87%AA%E5%8B%95%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E8%A8%AD%E5%AE%9A)
## 各種ライブラリ
項目 | 値 | 補足
--- | --- | --- |
HTMLテンプレートエンジン | [EJS](http://ejs.co) | 素のHTMLもそのまま記述できます。
CSSメタ言語 | [Sass(Scss記法)](http://sass-lang.com) | 素のCSSもそのまま記述できます。
ブラウザ自動リロード | [Browsersync](https://browsersync.io) | 保存と同時にブラウザを再読み込みします。
Laravel Mix | [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) | [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) をベースに [Bootstrap3](https://getbootstrap.com)/[Font Awesome](http://fontawesome.io)/[Vue.js](https://jp.vuejs.org)/[jQuery](https://jquery.com)/[lodash](https://lodash.com) などの便利なライブラリを利用可能です。
ホスティングサービス | [Netlify](https://www.netlify.com) | 簡単にHTMLを公開できます。
その他 | バージョニング(ブラウザキャッシュ対策)、ベンダープレフィックス自動付加、未使用スタイルの除去、本番・開発ビルドの圧縮切替、出力HTML自動整形 | ---
## 補足等
[https://github.com/ucan-lab/mixed-nuts/wiki](https://github.com/ucan-lab/mixed-nuts/wiki)