Frontend starter

😇 機能

フロントエンド開発の雛形プロジェクトです。

オートリロード（browser-sync）
Sassの自動コンパイル
EJSの自動コンパイル

🚀 はじめかた

システム要件

以下のプログラムがインストールされている必要があります。

Git

Macではすでにインストールされているかもしれません。
入っていない場合はこちらからインストールしてください。

Node

ここからLTS版をインストールしてください。

yarn

JavaScript用のパッケージマネージャです。
下記のコマンドを実行してインストールしてください。

npm install -g yarn

雛形プロジェクトをダウンロード

git clone [email protected]:MasahiroHarada/frontend-starter.git <プロジェクト名>
cd <プロジェクト名>
rm -rf .git
yarn install

💡 開発フロー

概要

プロジェクトのルートディレクトリで、まずは下記のコマンドを実行してください。

npm run dev

このコマンドでGulpのタスクが実行されます。

何が起きるかというと、

scssファイルのコンパイル
ejsファイルのコンパイル
開発用サーバー起動

監視モードになるので、ファイルに変更を加えると
自動的にコンパイル → ブラウザリロードが行われます。

コンパイルだけしたい場合は、下記のコマンドを実行してください。

npm run build

Sass

開発ディレクトリ

<プロジェクトディレクトリ>/src/scss

コンパイル先

<プロジェクトディレクトリ>/public/styles

EJS

開発ディレクトリ

<プロジェクトディレクトリ>/src/templates

コンパイル先

<プロジェクトディレクトリ>/public

EJSを使わない場合

templatesディレクトリの中身を全て削除し、publicディレクトリ内にHTMLを書いてください。

🔧 設定

config.js

コンパイルにまつわる設計項目です。

tampletes/vars.json

EJSで使用する変数はこのファイルに記載してください。

🌏 参考リンク

テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング

🍎 検証環境

macOS Sierra ver.10.12.6

masahiroharada / frontend-starter Goto Github PK