Блог 26/02/2020

Готовый Gulp-проект для OpenCart – быстрый старт

Всем привет, друзья, хочу с вами поделиться готовым gulpfile.js для быстрого старта нового проекта при разработке интернет-магазинов на платформе OpenCart.

Готовый Gulp-проект для OpenCart – быстрый старт

Скачать с GitHub

Как использовать gulpfile.js и быстро запустить новый проект

gulpfile.js полностью настроен и готов к использованию, нужно только:

1) установить зависимости с помощью волшебной команды: npm i;

2) произвести базовые настройки в gulpfile.js.

Базовые настройки вынесены в переменные js:

let domain = 'opencart.loc'; - имя вашего локального домена.

let theme = 'myTheme'; - наименование вашего кастомного шаблона.

let preprocessor = 'scss'; - имя css препроцессора, например: sass, less, stylus и т.д.

let fileswatch = '+(twig|php|tpl)'; - расширения файлов за которыми нужно следить и авто обновлять их при внесении изменений.

Базовые настройки в gulpfile.js для OpenCart

Таким образом, указав лишь в одном месте нужную информацию, вы сможете сразу приступить к работе, не переживая что где-то что-то не будет работать.

Зачем нужен и что может Gulp в OpenCart?

Благодаря кудеснику Gulp, вы сможете использовать:

1) Современные CSS препроцессоры: scss, sass, less, stylus и т. д. Конкатенировать (объединять) их из нескольких файлов в один, минифицировать (сжимать), выставлять автопрефиксы, убирать комментарии в конечном CSS файле.

2) JavaScript файлы, где также возможно использовать несколько js файлов с возможностью дальнейшей конкатенации. С помощью npm-пакета uglify есть возможность как следует сжать конечный js файл и выгрузить его в нужное место.

3) Watching – таск startwatch настроен для слежения и автообновления силами npm-пакета browser-sync. Таск наблюдает за файлами .twig, .tpl, .php (можно добавить любые другие расширения файлов), и за таском styles и scripts, о которых написано выше.

4) Такс deploy создан на основе npm-пакета gulp-rsync, его задача выгружать готовый сайт на хостинг командой в bash gulp deploy.

5) В следующих релизах будет добавлена возможность работать с изображениями.

Используемые мною npm-пакеты gulpfile.js

gulp – подключение Gulp

browser-sync – подключение автообновления через Browser Sync

del – подключение библиотеки для удаления файлов и папок

gulp-autoprefixer – подключение библиотеки для автоматического добавления префиксов

gulp-clean-css – минификация CSS

gulp-concat – подключение библиотеки для объединения файлов в один

gulp-less – подключение Less пакета

gulp-newer – позволяет запускать таски только для изменившихся файлов

gulp-rsync – диплой на хостинг через модный ssh протокол

gulp-sass – подключение Sass пакета

gulp-stylus – подключение Stylus пакета

gulp-uglify-es – для сжатия js файлов

Преимущества и недостатки использования Gulp для OpenCart

Преимущества:

  • здорово ускоряет разработку кастомного шаблона для OpenCart благодаря автообновления при внесении изменений в файлы стилей, js или .twig файлы шаблонов;
  • сразу оптимизируются .css и .js файлы без всяких дополнительных рукодвижений;
  • одной командой диплоим готовые файлы сайта на хостинг без всяких FileZilla и т.д.

Недостатки:

  • нужны минимальные знания gulp, js для понимания всей магии процессов;
  • для отображения изменений в .twig файлах шаблона иногда будет необходимо «сбрасывать» кеширование в админке OpenCart.
Недостатки ипользования Gulp для OpenCart

Скачать с GitHub


Я буду рад ответить на ваши вопросы, выслушать замечания и предложения по оптимизации, внесению изменений и добавлению новых возможностей в gulpfile.js.

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

Вконтакте
Одноклассники
Читать еще:
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

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