ryo-i / front-end-getting-sterted

メタ言語（EJS、Sass(SCSS)、TypeScript）のコンパイル環境です。画像も圧縮します。

フロントエンド開発スターターキット

メタ言語（EJS、Sass(SCSS)、TypeScript）のコンパイル環境です。画像も圧縮します。

プレビュー（GitHub Pages）

コードの詳細（ブログ）

全体構成

• /srcフォルダを修正するとコンパイル実行（ブラウザも更新）
• /srcフォルダ -> /destフォルダにコンパイルされる
• /src/ejs -> /dest直下（.ejs -> .html）
• /src/scss -> /dest/css（.scss ->.css）
• /src/ts -> /dest/js（.ts -> .js）
• /src/img -> /dest/img（.jpg,.jpeg,.png,.gif,.svg画像を圧縮）
• /src/json -> /src/ejs, /src/tsで読み込み

導入

当リポジトリをローカルにクローン

$ git clone https://github.com/ryo-i/front-end-getting-sterted.git

「front-end-getting-sterted」というフォルダが作られる。

フォルダに移動

$ cd front-end-getting-sterted

パッケージのインストール

$ npm install

「node_modules」フォルダが作られる。

gulpの起動、終了

gulp起動

$ npm start

localhostの3000でブラウザが立ち上がる

gulp終了

Contrl + C

新規リポジトリにコミット

GitHub上の新規リポジトリにコミットする場合はgit remoteコマンドで紐付け

$ git remote add origin https://github.com/ユーザ名/リポジトリ名.git

姉妹リポジトリ

サンプル

本リポジトリ環境のメタ言語を使って作ったWebページ

コード（GitHub）

プレビュー（GitHub Pages）

Webコーディング スターターキット

本リポジトリのコンパイル後のコードを元に作ったHTML/CSS/JSコーディングの最小環境

コード（GitHub）

プレビュー（GitHub Pages）

参考

本リポジトリの作成過程、メタ言語について調べたことなど

メタ言語まとめ（Qiita）