Август 2017
Автор: Рубрика: Верстка Комментариев нет

Основные gulp плагины


gulp плагины

Настройка gulp и плагина sass есть в статье как установить gulp.

Продолжаем установку основных плагинов.

Создадим таск, который будет собирать все js файлы в один и сжимать его.

Все js скрипты и css сжимаем и переносим в один файл

Для этого установим concat и uglify.

В командной строке пропишем npm i gulp-concat gulp-uglify –save-sev.

Подключаем в gulpfile.js.

Зададим им переменные.

Перейдем к таску скриптов.

Создаем новый таск с названием scripts и выполняем функцию.

В данной функции делаем возврат ее значения return из наскольких файлов, для этого используем массив, квадратные скобки, в котором укажем файлы.

Дальше создадим pipe, в котором мы конкатенируем в один. Затем сживаем файл uglify.

И выгружаем результат в директорию.

Для проверки выполним команду gulp scripts.

В результате появится файл scripts.min.js.

сжимаем скрипты в один gulp

Подключаем один скрипт, который получается в index.html в самом низу.

Там же подключаем стили css одним файлом.

Чтобы видеть все изменения подключаем scripts к таску watch.

gulp подключаем скрипт к проекту

Теперь разберем как подключить css.

Создаем в папке sass, файл с названием libs.sass.

Внутри файла пропишем импорт import и и в скобочках указываем, что хотим импортировать.

импортируем sass

После выполнения команды gulp sass появится файл libs.css.

Чтобы добавить суффикс min пропишем npm i gulp-rename –save-dev.

Для сжатия css используем clean css npm i gulp-cleancss –save-dev- .

Добавим переменную rename и cleancss и создадим таск sass.

Подключаем один файл стилей, который получается в index.html в самом низу.

подключаем файл стилей к проекту gulp

Собираем проект в одну папку

Для получения готового результата создадим таск build.

Первым нам нужно из папки app и libs перенести в dist файлы стилей css.

Чтобы у нового таска было много функция мы задаем переменную buildcss и присвоим ей готовые файлы css.

И через pipe указываем куда выгрузим.

  • Дальше перенесем таким же способом шрифты build fonts.
  • Все js файлы.
  • Последние перенесем html.

Перед тем как собирать папку dist нам нужно ее очистить.

Для этого подключим плагин del.

В командной строке пишем npm i del –save-dev.

Подключаем путем добавления новой переменной del и нового таска removedist.

Проверяем сборку командой gulp build.

плагин сборки для gulp

Оптимизируем изображения

Следующая задача это автоматическая оптимизация изображений.

Для этого установим плагин npm I gulp-imagemin --savee-dev.

Зададим переменную и создадим таск.

После добавим imagemin в таск build.

Затем пробуем собрать проект build и проверяем размер картинок.

Если картинок будет очень много они будут обрабатываться долго.

Для этого к обработке картинок можно добавить cacsh, чтобы ускорить процесс.

Установим gulp-cacsh.

оптимизируем изображение для проекта gulp

Переносим проект на хостинг

Последнее, что необходимо сделать это таск deploy, который перенесет наш проекта на хостинг.

  1. Пишем хост имя это наш домен.
  2. User и пароль пишем такие как при авторизации на хостинге.

Все выгружается в глобальную переменную, которое содержится в dist и .htaccess для правильной оптимизации сайта на хостинге.

Когда будем переносить файлы, то переименуем htaccess в файлзиле поставим точку вначале.

переносим проект на хостинг deploy

Подробное описание, что получилось

Комментариев нет