Шаблон для проектов 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
pugtask gets the layout from thesrc/pug/base/layout.pugfile, inserts it into the specified blocks (for example:block main) and puts it in thepublicfolder -
The
stylustask 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/cssfolder -
scriptstask gets scripts fromsrc/js/folder, merges, minifies and puts into public/js folder -
The
img:buildtask takes pictures from themedia/folder, minifies them withgulp-tinypng, and puts them in thepublic/folder. -
The
servetask synchronizes the specified files with the browser. When the file is changed, the browser is reloaded. -
The
watchtask. 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.