Шаблон для проектов HTML CSS JS only To english
Загрузите файлы через GitHub или по ссылке
В командную строку пишите:
npm install
Зайдите на этот сайт, регистрируйтесь и получите API. Вставьте API на файл gulp/tasks/img.js
на строку 8. За тем пишите:
npm start
Перед публикации:
npm run product
При изменении файлов настройки сайта (src/)
браузер перезагружается.
Папка src
содержит файлы Pug
, Stylus
и JS
, которые необходимо скомпилировать.
А папкa public
содержит cкомпилированные файлы HTML
, CSS
и JS
.
Папкa media
содержит фонты
, картинки
и SVG файлы
.
Папкa gulp
содержит все задачи и конфигурации для задач.
Когда вы создаете подпапки в папке src/pug
в папке public
тaкже создаются подпапки. Затем в браузере вы можете увидеть файлы подпапок в следующем порядке localhost:3000/<имя подпапки>/файл
.
Диспетчер задач gulp
параллельно компилирует файлы Pug Stylus и JS:
-
Задача
pug
получает макет от файлаsrc/pug/base/layout.pug
, вставляет его в указанные блока (например:block main
) и помешает в папкуpublic
-
Задача
stylus
получает стили от папкиsrc/stylus/
, компилирует, соединяет по указанному параметру, префиксирует по версии, убирает ненужные линии и коды и т.д, загружает исходную карту стилей и помешает в папкуpublic/css
-
Задача
scripts
получает скрипты от папкиsrc/js/
, соединяет, минифицирует и помешает в папку public/js -
Задача
img:build
получает картинки от папкиmedia/
, минифицирует их с помошьюgulp-tinypng
, и помешает в папкуpublic/
. -
Задача
serve
синхронизирует указанные файлы с браузером. При изминении файла браузер перезагружается. -
Задача
watch
. Запускает задачу при изменении. Задачи обрабатываются одинаково с остальной частью системы задач. -
Еще есть задачи
fonts
,img:dev
,svg
, они просто копируют файлы отmedia/fonts (img, svg)
и выкладывают их вpublic
.
Download files via GitHub or link
On the command line write:
npm install
Go to this website, register and get the API. Paste the API in gulp/tasks/img.js
on line 8. Then write:
npm start
Before posting:
npm run product
When changing site configuration files (src/)
the browser is reloaded.
The src
folder contains the Pug
, Stylus
and JS
files that need to be compiled.
And the public
folder contains the compiled HTML
, CSS
and JS
files.
The media
folder contains fonts
, images
and SVG files
.
The gulp
folder contains all tasks and configurations for tasks.
When you create subfolders in the src/pug
folder, subfolders are also created in the public
folder. You can then see the files in the subfolders in the browser in the following order localhost:3000/<subfolder name>/file
.
The gulp
task manager compiles the Pug Stylus and JS files in parallel:
-
The
pug
task gets the layout from thesrc/pug/base/layout.pug
file, inserts it into the specified blocks (for example:block main
) and puts it in thepublic
folder -
The
stylus
task gets styles from thesrc/stylus/
folder, compiles, merges by the specified parameter, prefixes by version, removes unnecessary lines and codes, etc., loads the source stylemap and puts it in thepublic/css
folder -
scripts
task gets scripts fromsrc/js/
folder, merges, minifies and puts into public/js folder -
The
img:build
task takes pictures from themedia/
folder, minifies them withgulp-tinypng
, and puts them in thepublic/
folder. -
The
serve
task synchronizes the specified files with the browser. When the file is changed, the browser is reloaded. -
The
watch
task. Runs a task on change. Tasks are treated the same as the rest of the task system. -
There are also tasks
fonts
,img:dev
,svg
, they just copy files frommedia/fonts (img, svg)
and put them inpublic
.