frontend starter

プロジェクトテンプレート

Web開発は痛みである必要はないからです。

プロジェクトテンプレートは、静的サイトを速く構築する方法です。 1つのコマンドを使用して、Webpack、Gulp、HandleBars.js、およびSCSSを使用して静的ページを構築します。

[ES6]

特徴

• プロジェクトをわずか3つのコマンドにインストールします（以下の「開発」を参照）。
• handlebars.jsを使用して、HTMLをテンプレートと部分に整理します。
• SCSSを使用して、CSSを論理コンポーネントに整理します。
• BrowserSyncを使用して、Webサイトの開発バージョンを自動的に起動し、HTMLを変更するたびにページをリロードし、CSS、JavaScript、およびリロードする必要がある画像に変更を挿入します。
• HTMLミニファイアを使用し、それぞれHTML、CSS、JavaScript、および画像を最適化します。

端末から1つのコマンドがあるすべてのコマンド：

yarn start

設定

npm install -g gulp  # May require `sudo` 

現像

yarn install            # One time
gulp serve

リマインダー

次のプロジェクトにこのリポジトリを使用する場合は、次の変更を行ってください。

1. data.ymlを編集し、サイトに関連付けられているHTMLメタデータに記入します。
2. package.json 、 name 、 version 、 description 、 license 、およびrepository.url提供します。
3. .gitフォルダーを削除して、新しいコミット履歴から開始します。
4. README.md好みに編集します。

ガルプコマンド

利用可能なガルプコマンドの概要：

gulp build

サイトをdistディレクトリに構築します。これには次のものが含まれます。

• SCSS、SourceMaps、Autoprefixing
• JS Uglification
• HTMLへのハンドルバー

gulp build:optimized

これは、最適化されたバージョンのサイト（展開用）の配布に使用されます。 gulp buildと次のすべてが含まれています。

• SCSSの模倣
• CSS / JSインラインソース

gulp watch

ローカルファイルの変更を監視し、必要に応じてサイトの一部をdistディレクトリに再構築します。

gulp serve

バックグラウンドでgulp watch実行し、Browsersyncを使用した自動リロードでlocalhost:3000のdist Directoryを提供します。

構造

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.