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

Как установить gulp и плагины

Как установить gulp и плагины

Gulp и множество утилит для него подходят для решения любых задач в разработке от небольшого сайта до крупного портала.

Все проекты использующие gulp имеют в корне файл gulpfile.js.

Для начала устанавливаем gulp у нас должен быть установлен node.js.

Скачиваем его с официального сайта, последнюю версию.

Скачать node.js

Создаем новый проект

Создаем папку для проекта с любым названием, например, project.

Заходим в нее, зажимаем shift и удерживая его нажимаем правою кнопку мышки.

В появившемся окне выбираем пункт с названием открыть окно команд.

Для устанвоки gulp прописываем команду npm I gulp -g.

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

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

Создаем проект командой npm init.

создаем проект gulp
В папке project появится файл package.json.

Давайте его откроем в программе sublime text 3.

Видим всю информацию, которую прописали в окне консоли.

Этот файл содержит информацию об используемых пакетах в программе.

Удобно при создании новых проектов с уже заготовленным файлом.

Устанавливаем gulp в наш проект командой npm i gulp –save-dev.

Ключ --save-dev позволяет сохранять версию в package.json.

устанавливаем gulp в проект
Также появится новая папка node_modules, в которой содержится пакет gulp и необходимые зависимости для корректной работы основного пакета.

Создаем две новые папки

  1. app
  2. dist

Создаем папки проекта gulp

В папке app создаем пять папок.

  1. папку css тут все стили
  2. fonts где лежат шрифты
  3. img для картинок
  4. js для скриптов
  5. sass для файлов с этим расширением.

Переходим в корневую папку проекта project.

Мы создали структуру проекта.

В папке app лежат все исходники проекта.

В папке дист будет готовый продукт после сборки оптимизированный и сжатый.

Наш первый task

Создаем gulpfile.js в корне.

Открываем его и прописываем первую строчку подключения модуля, который установили.

Также создаем task.

создаем task в gulp
Разберем пример посложнее с возвратом функции return базовой команды gulp это gulp.src, которая для обработки берет файлы, попадающие в выборку source-files.

После вызываем команду или плагин с помощью .pipe (plugin ()), плагин это функция, которая подключается к нашему проекту.

Pipe выполняет команду.

Теперь необходимо выгрузить результат работы плагина.

Пишем .pipe (gulp.dest (‘folder’)).

Dest это путь назначения сокращенно, то куда выгружаем результат, с указанием папки.

В этом примере вся задача gulp. Берем результат и выводим.

Устанавливаем пакет gulp sass

Теперь попробуем сделать препроцесcор sass.

Установим пакет gulp sass в наш проект.

Открываем консоль и пишем команду npm gulp-sass –save-dev с сохранением пакета и версии в наш package.json.

препроцессор sass

Дальше подключаем gulp sass в наш проект.

Сперва создаем в папке app\sass файл main.sass и открываем его в программе sublime.

Переходим в gulpfile.js и прописываем переменную var sass = require (gulp-sass).

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

Первое это return, т.е. вернуть функцию.

Вначале берем исходник gulp.src (app/sass/main.sass).

Дальше через pipe (sass ()) выполняем команду нашего плагина и выводим pipe (gulp.dest (app/css))

Перед началом выполнения taska зайдем в main.sass и пропишем.

Выполним команду в gulp sass, то в результате в файле main.css мы увидим, что он скомпилировался.

команда gulp sass

Метод для автоматических изменений стилей

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

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

Запускаем процесс слежения командой gulp watch, чтобы при изменениях в sass файлах происходила автоматическая компиляция в css файл.
gulp.watch

Чтобы видеть в браузере как изменяется стиль, нужно подключить livereload browser-sync.

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

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

Комментарии запрещены