Gulp или как быстро сверстать шаблон под Opencart.

Часть 1, установка Gulp

Немного блудомыслия или как я познакомился с Gulp (к Gulpу отношения не имеет, можно смело пропустить.)

Полгода назад я гостил у своей сестры, выпив пива с ее мужем он мне пожаловался что ему не плохо бы завести интернет магазин для его солдатиков и прочих поделок из пластика (состоятельные дядьки за 40 в европе играют в солдатики :)….), выпитое пиво ударило мне в голову и я согласился ему помочь. Хотя к вебу я имею весьма посредственное отношение, слепил пару сайтов на вордпресе, один лендинг пейдж, знаю PHP, HTML и могу разобраться в JS(реализую на C# и делфи для бухгалтерии их хотелки) на этом мое отношение с веб и заканчивается. Но коли пообещал нужно делать…. а не охота, тянул я так кота за хвост месяца  два, но время подходит показывать свое творение, у меня соответственно нихрена не готово, что делать? Подумав немного в качестве CMS я решил использовать Opencart, и началось мое приключение по верстке шаблонов. Вот тут то Gulp мне очень помог.

Далее идет информации непосредственно касающаяся установки и настройке Gulp на компьютере.

При верстке шаблонов я использовал локальный Web сервер OpenServer, ссылка для скачивания - страница загрузки OpenServer, ссылка на статью по настройке и установке OpenServer на Ваш компьютер - Установка OpenServer .

Установим локально cms Opencart, ссылка на описание установки Opencart под OpenServer  , зайдем в папку путь куда установили Opencart\catalog\view\theme и создадим там новую папку, переименовав ее в название Вашей темы(для примера у меня это будет Ghost)

создадим в папке нашей темы папку stylesheet и создадим в ней файлы _fonts.sass и скопируем в него следующие

сохраняем и закрываем файл, создадим в этой же директории файл _media.sass и скопируем в него

далее создадим файл _vars.sass со следующим содержимым

создадим файл stylesheet.sass и копируем в созданный файл следующие

Все стартовая заготовка у нас готова, идем дальше. Далее нам необходимо скачать и установить Node.js. Пройдем по этой ссылке и скачаем текущую(Current) версию Node.js, после скачивания устанавливаем программу на Ваш компьютер. Далее проверим корректность установки, открываем командную строку и вводим команду npm -v, если все прошло нормально Вы уведите номер установленной версии npm(менеджер пакетов, идет в составе Node.js)

Устанавливаем глобально Gulp, в командной строке вводим npm i -g gulp. Затем переходим в папку проекта и в ней  создадим 2 файла - package.json и gulpfile.js. В package.json скопируйте следующие содержание:

а в файл gulpfile.js скопируем не забыв заменить Ghost на название Вашей папки(смотреть вверху!).

Установим пакеты из файла package.json, для этого в корне проекта открываем командную строку и вводим npm  i ( если возникли проблемы вводим npm  i npm-check-updates -g ), проверим актуальность версий установленных пакетов введя в командную строку команду ncu, если появлялось какие-то несоответствия следуем инструкции(чаще всего просит ввести команду ncu -u, далее следует заново установить пакеты командой npm  i) . После успешно проделаны махинаций запускаем gulp - в командной строке набираем gulp, если все прошло успешно в окне браузера откроется сайт, как править тему напишу в следующий раз.

There are no comments