frontend starter

项目模板

因为网络开发不需要痛苦。

项目模板是快速构建静态站点的方式。使用一个命令，使用WebPack，Gulp，Hannebars.js和SCSS构建一个静态页面。

[ES6]

特征

• 仅以三个命令将项目安装（请参见下面的“开发”）。
• 使用handlebars.js将HTML整理成模板和部分。
• 使用SCSS将我们的CSS组织成逻辑组件。
• 使用browsersync自动启动我们网站的开发版本，每当我们更改HTML时重新加载页面，并将更改为CSS，JavaScript和需要重新加载的图像。
• 分别使用HTML minifier，并优化我们的HTML，CSS，JavaScript和图像。

所有这些都带有终端的一个命令：

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命令

可用的GULP命令的概述：

gulp build

将站点构建到dist目录。这包括：

• SCSS，sourcemaps和自动修复
• JS uglification
• 车把到HTML

gulp build:optimized

这用于分发网站的优化版本（用于部署）。它包括gulp build和以下所有内容：

• SCSS缩小
• CSS / JS内联源

gulp watch

观看需要更改本地文件的更改，并根据需要重建网站的某些部分，以纳入dist目录。

gulp serve

在后台运行gulp watch ，并在Localhost上为dist目录提供localhost:3000使用browsersync自动重新加载。

结构

├── 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.