frontend starter

Шаблон проекта

Потому что веб -разработка не должна быть болью.

Шаблон проекта - это способ быстро построить статические сайты. С одной командой создайте статическую страницу, используя WebPack, Gulp, Handlebars.js и SCSS.

[ES6]

Функции

• Установите проект всего за три команды (см. «Разработка» ниже).
• Используйте ручки.
• Используйте 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 build

Строит сайт в dist Directory. Это включает в себя:

• SCSS, Sourcemaps и автоэфикс
• JS Uglification
• Руль для HTML

gulp build:optimized

Это используется для распределения оптимизированной версии сайта (для развертывания). Он включает в себя все, от gulp build а также:

• Минификация SCSS
• CSS / JS Inline-Sourcing

gulp watch

Следует за изменениями в локальных файлах и по мере необходимости перестраивает части сайта в каталог dist .

gulp serve

Запускает gulp watch на заднем плане и обслуживает dist Directory по адресу 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.