始めはただ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)をインストールしておく
- GitHubアカウント(GitLab, Bitbucket可)を作る
- Netlifyアカウント(GitHub, GitLab, Bitbucketアカウントと連携可)を作る
- https://www.netlify.com
- 高機能な無料ホスティングサービス
環境構築(動画)
「Mixed-Nuts (ミックスナッツ)」の環境構築がたったの【1分】で構築できます！！ #mixednuts #html #css pic.twitter.com/VesZrdJgZ8
— ゆうきゃん🍪転職活動中 (@ucan_lab) 2018年6月14日
所要時間: 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ヘアクセスすると画面が表示できます。
Mixed-Nutsをそのままデプロイするとこんな画面が表示されます。
デプロイ(自動)
masterブランチがマージされたら自動でビルドする手順をwikiにまとめました。(いつかQiitaに書きます?)
補足
はじめに
Laravel-mixというwebpackをラッパーしたライブラリをベースにして作っています。
ディレクトリ構成はLaravelとほぼ同じです。
EJS(HTML)
EJSはJavaScriptのテンプレートエンジンです。
別のejsファイルをインクルードしたり便利な構文が使えます。
resources/views/*.ejs に配置していきます。
また、素のHTMLも記述できるため学習コストが少ないので導入しました。
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に書き換えるだけで済みます。