Блог 10/04/2018

Start html template on UIKit3 + SASS + Gulp 4

Start html template on UIKit3 + SASS + Gulp

Полностью готовый к быстрому старту вашего веб-проекта шаблон "Start HTML" на базе мощного Front end фреймворка UIKit3, с помощью которого можно очень быстро сверстать и запустить веб-сайт практически любой сложности, не отвлекаять на стандартную начальную настройку своего нового проекта.

Для работы требуется:

  • знание препроцессора Sass
  • навыки работы с Gulp 4
  • официальная документация UIKit3 _getuikit.com/docs/introduction

Gulp 4

Используемые пакеты Gulp 4

  • gulp - Подключение Gulp,
  • gulp-util - Вывод уведомления в консоль, так как в gulp нет встроенного лога,
  • gulp-sass - Подключение Sass пакет,
  • browser-sync - Подключение автообновления через Browser Sync,
  • gulp-concat - Подключение gulp-concat (для конкатенации файлов),
  • gulp-uglify - Подключение gulp-uglifyjs (для сжатия JS),
  • gulp-clean-css - Минификация CSS,
  • gulp-htmlmin - Минификация HTML,
  • gulp-rename - Подключение библиотеки для переименования файлов,
  • del - Подключение библиотеки для удаления файлов и папок,
  • gulp-imagemin - Подключение библиотеки для работы с изображениями,
  • gulp-cache - Подключение библиотеки кеширования,
  • gulp-autoprefixer - Подключение библиотеки для автоматического добавления префиксов,
  • gulp-notify - Водит ошибки при сборке Gulp в виде системных сообщений,
  • vinyl-ftp - Диплой на хостинг через FTP (Документация в примерах),
  • gulp-rsync - Диплой на хостинг через SSH (Документация в примерах).

Быстрая устанока Gulp 4 локально одной командой соглассно файлу package.json:

	$ npm i

Установка требуемых пакетов Gulp 4 в проект:

	
		$ npm i gulp --save-dev
		$ npm i gulp-util --save-dev
		$ npm i gulp-sass --save-dev
		$ npm i browser-sync --save-dev
		$ npm i gulp-concat --save-dev
		$ npm i gulp-uglify --save-dev
		$ npm i gulp-clean-css --save-dev
		$ npm i gulp-htmlmin --save-dev
		$ npm i gulp-rename --save-dev
		$ npm i del --save-dev
		$ npm i gulp-imagemin --save-dev
		$ npm i gulp-cache --save-dev
		$ npm i gulp-autoprefixer --save-dev
		$ npm i gulp-notify --save-dev
		$ npm i vinyl-ftp --save-dev
		$ npm i gulp-rsync --save-dev
	

Или всё разом:

	$ npm i gulp gulp-util gulp-sass browser-sync gulp-concat gulp-uglify gulp-clean-css gulp-htmlmin gulp-rename del gulp-imagemin gulp-cache gulp-autoprefixer gulp-notify vinyl-ftp gulp-rsync --save-dev

Как вариант установить пакеты глобально в ОС:

	
		$ npm i gulp
		$ npm i gulp-util
		$ npm i gulp-sass
		$ npm i browser-sync
		$ npm i gulp-concat
		$ npm i gulp-uglify
		$ npm i gulp-clean-css
		$ npm i gulp-htmlmin
		$ npm i gulp-rename
		$ npm i del
		$ npm i gulp-imagemin
		$ npm i gulp-cache
		$ npm i gulp-autoprefixer
		$ npm i gulp-notify
		$ npm i vinyl-ftp
		$ npm i gulp-rsync
	

Или всё разом:

	  $ npm i gulp gulp-util gulp-sass browser-sync gulp-concat gulp-uglify gulp-clean-css gulp-htmlmin gulp-rename del gulp-imagemin gulp-cache gulp-autoprefixer gulp-notify vinyl-ftp gulp-rsync

Скачать UIKit3 Start HTML

Если у вас имеются вопросы, замечания, предложения, буду рад выслушать

Последние обновления

01-03-2019

  • Таски и функции в gulpfile.js оптимизированы и переделаны под Gulp 4.
  • Добавлена возможность очистки кеша отдельным таском.

08-11-2018

  • Обновлен UIKit3, обновлены и оптимизированы таски в gulpfile.js
  • Добавлена возможность деплоя сайта через FTP, с помощью "vinyl-ftp"

29-08-2018 Обновлены пакеты пакеты sass и js framework UIKit3

30-05-2018

  • Обновлены пакеты пакеты sass и js framework UIKit3
  • Добавлен gulp пакет gulp-htmlmin для сжатия html
  • Обновлена документация
  • Подключена sass библиотека миксинов hulk-mixins

10-05-2018 Обновлены пакеты пакеты sass и js framework UIKit3

07-05-2018 Обновлена документация в файле readme.txt на GitHub

Если эта информация стала для вас полезной, вы можете сказать "спасибо", нажав кнопку вашей любимой социальной сети:

Вконтакте
Одноклассники
Читать еще:
Готовый Gulp-проект для OpenCart – быстрый старт
Готовый Gulp-проект для OpenCart – быстрый старт
26/02/2020
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
10/02/2019
Хостинг для Landing Page – как выбрать нужный тариф
Хостинг для Landing Page – как выбрать нужный тариф
07/02/2019
Установка WordPress с нуля на хостинг
Установка WordPress с нуля на хостинг
01/02/2019
Как выбрать хостинг для WordPress 5
Как выбрать хостинг для WordPress 5
25/01/2019

Подпишись и будь в курсе новых публикаций на сайте!