Всем привет, друзья, хочу с вами поделиться готовым gulpfile.js для быстрого старта нового проекта при разработке интернет-магазинов на платформе OpenCart.
Как использовать 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)'; - расширения файлов за которыми нужно следить и авто обновлять
их при внесении изменений.
Таким образом, указав лишь в одном месте нужную информацию, вы сможете сразу приступить к работе, не переживая что где-то что-то не будет работать.
Зачем нужен и что может 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.
Я буду рад ответить на ваши вопросы, выслушать замечания и предложения по оптимизации, внесению изменений и добавлению новых возможностей в gulpfile.js.
Если эта информация стала для вас полезной, вы можете сказать "спасибо", нажав кнопку вашей любимой социальной сети:
Читать еще:
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
10/02/2019
Хостинг для Landing Page – как выбрать нужный тариф
07/02/2019
Установка WordPress с нуля на хостинг
01/02/2019