Mixed-Nuts モダンなWebサイト制作環境を爆速で構築する

始めはただSassをビルドしたかった...

# 困ったこと、やりたかったこと

- sassをビルドする記事はあるけど...compass?grunt?gulp?webpack?
  - Windows/Mac/Linux でも動く環境を作りたい。
- JavaScriptもビルドしたい。
  - 一つのファイルにまとめたい。
  - JavaScriptもES6を書きたい。
  - SourceMapを出力したい。
- ヘッダーやフッター、メニューなどの共通化したい。全部のファイルを修正したくない。
- ファイルが変更されたら...
  - SassやJavaScriptは自動でビルドしたい。
  - ブラウザもファイル変更を検知してリロードさせたい。
  - ブラウザのキャッシュが残らないようバージョニング対策したい。
- クリーンなHTML/CSSを書きたい。
  - ブラウザ特有のベンダープレフィックスは自動で付与したい。
  - 使っていないスタイルは除去したい。
  - 本番用のファイルはMinify(ファイル圧縮)したい。
  - 出力するHTMLファイルは整形したい。
- FTPで一つ一つファイルをアップロードしてデプロイしたくない。
  - デプロイしてHTMLを公開したい。
  - レンタルサーバーを借りずに無料でホスティングしたい。
  - masterブランチにマージしたら自動でデプロイしたい。

やりたい。

# Mixed-Nuts(ミックスナッツ)

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

できてしまったもの。

# 必要なもの

- Nodejs(npm)をインストールしておく
  - https://nodejs.org/ja
  - [nodebrewのインストール手順](https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c)
- GitHubアカウント(GitLab, Bitbucket可)を作る
  - https://github.com
- Netlifyアカウント(GitHub, GitLab, Bitbucketアカウントと連携可)を作る
  - https://www.netlify.com
  - 高機能な無料ホスティングサービス

# 環境構築(動画)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「Mixed-Nuts (ミックスナッツ)」の環境構築がたったの【1分】で構築できます！！ <a href="https://twitter.com/hashtag/mixednuts?src=hash&amp;ref_src=twsrc%5Etfw">#mixednuts</a> <a href="https://twitter.com/hashtag/html?src=hash&amp;ref_src=twsrc%5Etfw">#html</a> <a href="https://twitter.com/hashtag/css?src=hash&amp;ref_src=twsrc%5Etfw">#css</a> <a href="https://t.co/VesZrdJgZ8">pic.twitter.com/VesZrdJgZ8</a></p>&mdash; ゆうきゃん🍪転職活動中 (@ucan_lab) <a href="https://twitter.com/ucan_lab/status/1007238878187548673?ref_src=twsrc%5Etfw">2018年6月14日</a></blockquote>

所要時間: 1分

# 環境構築

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

exampleのところはお好きなプロジェクト名にしてください。

# Git初期化

```
$ rm -rf .git; git init; git add .; git commit -m "first commit"
```

Mixed-Nutsのgitを削除して新しくローカルリポジトリを作成しましょう。

# ビルド(通常)

```
$ npm run dev
```

ejs(html), sass(css), javascriptをビルドします。
ビルド結果は public フォルダに出力されます。

# ビルド(監視モード)

```
$ npm run watch
$ npm run gulp
```

watchでsass, javascriptのビルドを行います。
gulpでejsのビルド, browsersyncによるブラウザ自動リロードを行います。

# ビルド(最適化)

```
$ npm run prod
```

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

# デプロイ(手動)

Netlifyへデプロイします。
初回のみGitHub+Netlify連携と新規サイト作成の質問と公開ディレクトリの指定を行います。

```
$ npm run dep

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

Last build is always accessible on http://xxxx.netlify.com
```

デプロイ完了して表示されたURLヘアクセスすると画面が表示できます。

![スクリーンショット 2018-06-13 18.47.51.png](https://qiita-image-store.s3.amazonaws.com/0/52879/62ee93d6-df6e-e93f-40cf-0cecc88de637.png)

Mixed-Nutsをそのままデプロイするとこんな画面が表示されます。

# デプロイ(自動)

masterブランチがマージされたら自動でビルドする手順をwikiにまとめました。(いつかQiitaに書きます?)

[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)

# 補足

## はじめに

Laravel-mixというwebpackをラッパーしたライブラリをベースにして作っています。
ディレクトリ構成はLaravelとほぼ同じです。

## EJS(HTML)

EJSはJavaScriptのテンプレートエンジンです。
別のejsファイルをインクルードしたり便利な構文が使えます。

`resources/views/*.ejs` に配置していきます。

また、素のHTMLも記述できるため学習コストが少ないので導入しました。

- 参考: [テンプレートエンジンEJSで使える便利な構文まとめ](https://qiita.com/y_hokkey/items/31f1daa6cecb5f4ea4c9)

## Asset

アセットは下記の場所に保存していきます。

`resources/assets/images`
`resources/assets/sass`
`resources/assets/js`

### Sass(Scss)

Sassはcssのメタ言語でcssをよりプログラミングに近い形で書けます。
Sassをコンパイルする方法としてはRubyでビルドする方法が主流でしたがLaravel-mix(webpack)でビルドしています。

Laravel-Mixに標準でbootstrap3が同梱されています。
必要なければ `app.scss` の該当箇所をコメントアウトします。

### JavaScript

Laravel-Mixの標準で lodash, jquery, bootstrap3, axios が読み込まれています。
必要なければ `bootstrap.js` の該当箇所をコメントアウトします。

## Public

ビルドした結果、html, css, javascriptファイルは `public` へ出力されます。

## システム連携

LaravelプロジェクトにサブディレクトリとしてMixed-Nuts配置してシステムと共存させるとWebデザイナさんとのやり取りが楽になりました。sassとjsはそのままコピペ、ejsはbladeに書き換えるだけで済みます。