HTML
JavaScript
Sass
webpack
Laravel-Mix

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

できてしまったもの。

必要なもの

環境構築(動画)

所要時間: 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

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

デプロイ(自動)

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

wiki参照

補足

はじめに

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に書き換えるだけで済みます。