Часть 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 и скопируем в него следующие
|
1 2 3 4 5 |
@import "bourbon" +font-face("roboto", "../fonts/RobotoRegular/RobotoRegular", $file-formats: eot woff ttf) +font-face("roboto", "../fonts/RobotoBold/RobotoBold", bold, $file-formats: eot woff ttf) +font-face("Myriad", "../fonts/MyriadProRegular", regular, $file-formats: eot woff ttf) |
сохраняем и закрываем файл, создадим в этой же директории файл _media.sass и скопируем в него
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
@import "bourbon" @import "vars" /*========== Desktop First ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) /**/ /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) /**/ /* Small Devices, Tablets */ @media only screen and (max-width : 768px) /**/ /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) /**/ /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) /**/ /*========== Mobile First ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) /**/ /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) /**/ /* Small Devices, Tablets */ @media only screen and (min-width : 768px) /**/ /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) /**/ /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) /**/ |
далее создадим файл _vars.sass со следующим содержимым
|
1 2 3 4 |
@import "bourbon" $default-font: "roboto", sans-serif $accent: orange |
создадим файл stylesheet.sass и копируем в созданный файл следующие
|
1 2 3 4 5 6 7 |
@import "bourbon" @import "vars" @import "fonts" //тут будут стили @import "media" |
Все стартовая заготовка у нас готова, идем дальше. Далее нам необходимо скачать и установить Node.js. Пройдем по этой ссылке и скачаем текущую(Current) версию Node.js, после скачивания устанавливаем программу на Ваш компьютер. Далее проверим корректность установки, открываем командную строку и вводим команду npm -v, если все прошло нормально Вы уведите номер установленной версии npm(менеджер пакетов, идет в составе Node.js)
Устанавливаем глобально Gulp, в командной строке вводим npm i -g gulp. Затем переходим в папку проекта и в ней создадим 2 файла - package.json и gulpfile.js. В package.json скопируйте следующие содержание:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "name": "opencart-project", "version": "1.0.0", "description": "OpenCart Gulp Project", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "WebDesign Master", "license": "ISC", "devDependencies": { "browser-sync": "^2.15.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-clean-css": "^3.4.1", "gulp-sass": "^3.1.0", "gulp-util": "^3.0.7", "node-bourbon": "^4.2.8", "vinyl-ftp": "^0.6.0" } } |
а в файл gulpfile.js скопируем не забыв заменить Ghost на название Вашей папки(смотреть вверху!).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// Подключаем Gulp и все необходимые библиотеки var gulp = require('gulp'), gutil = require('gulp-util' ), sass = require('gulp-sass'), browserSync = require('browser-sync'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'), bourbon = require('node-bourbon'), ftp = require('vinyl-ftp'); // Обновление страниц сайта на локальном сервере gulp.task('browser-sync', function() { browserSync({ proxy: "oc", notify: false }); }); // Компиляция stylesheet.css gulp.task('sass', function() { return gulp.src('catalog/view/theme/<em><strong>ghost</strong></em>/stylesheet/stylesheet.sass') .pipe(sass({ includePaths: bourbon.includePaths }).on('error', sass.logError)) .pipe(autoprefixer(['last 15 versions'])) .pipe(cleanCSS()) .pipe(gulp.dest('catalog/view/theme/<em><strong>ghost</strong></em>/stylesheet/')) .pipe(browserSync.reload({stream: true})) }); // Наблюдение за файлами gulp.task('watch', ['sass', 'browser-sync'], function() { gulp.watch('catalog/view/theme/<em><strong>ghost</strong></em>/stylesheet/stylesheet.sass', ['sass']); gulp.watch('catalog/view/theme/<em><strong>ghost</strong></em>/template/**/*.tpl', browserSync.reload); gulp.watch('catalog/view/theme/<em><strong>ghost</strong></em>/js/**/*.js', browserSync.reload); gulp.watch('catalog/view/theme/<em><strong>ghost</strong></em>/libs/**/*', browserSync.reload); }); // Выгрузка изменений на хостинг gulp.task('deploy', function() { var conn = ftp.create({ host: 'hostname.com', user: 'username', password: 'userpassword', parallel: 10, log: gutil.log }); var globs = [ 'catalog/view/theme/ghost/**' ]; return gulp.src(globs, {buffer: false}) .pipe(conn.dest('/path/to/folder/on/server')); }); gulp.task('default', ['watch']); |
Установим пакеты из файла package.json, для этого в корне проекта открываем командную строку и вводим npm i ( если возникли проблемы вводим npm i npm-check-updates -g ), проверим актуальность версий установленных пакетов введя в командную строку команду ncu, если появлялось какие-то несоответствия следуем инструкции(чаще всего просит ввести команду ncu -u, далее следует заново установить пакеты командой npm i) . После успешно проделаны махинаций запускаем gulp - в командной строке набираем gulp, если все прошло успешно в окне браузера откроется сайт, как править тему напишу в следующий раз.
There are no comments