CODING, Gulp, Bower, Jade, БЭМ

Настройка системы сборки

Создание первой задачи

Слежение за файлами

Компиляция Sass-файла

Живая перезагрузка

Рекомендуемые плагины

Адаптивный дизайн с Gulp

Настройка системы сборки

Установка Node.js

Чтобы установить Node.js отправляйтесь на официальный сайт: nodejs.org. В зависимости от операционной системы вам будет предложен правильный файл для установки, всё просто!

После установки убедитесь, что у вас есть Node. Откройте командную строку и введите node -v. Если вы видите версию nodejs, значит всё в порядке.

Установка npm

Между прочим, npm является менеджером всех пакетов, разработанных для Node.js. Поскольку вам потребуются эти пакеты, нам нужен и их менеджер.

Я не буду повторять здесь весь процесс, а хотел чтобы вы перешли сюда и установили npm в соответствии с вашей операционной системой. После того, как это будет сделано, вы можете проверить установку, набрав npm -v в командной строке. Аналогично, если вы видите версию, значит всё в порядке.

Установка Gulp

Для начала мы должны установить Gulp глобально, чтобы наш компьютер был в курсе о его наличии. Так что для этого выполните следующую команду:

npm install --global gulp

Поскольку Gulp является пакетом Node.js мы должны настроить пакеты Node через файл настроек с именем package.json. Этот файл говорит Node, какие пакеты требуются в нашем проекте.

Так что переходим в папку проекта и создаём файл package.json. Откройте его и введите следующее:

{
}

Вы также можете создать файл, выполнив npm init и сказав yes для всех шагов.

Затем запустите следующую команду, чтобы npm установил копию Gulp в текущем проекте в качестве необходимого пакета.

npm install --save-dev gulp

После этого откройте файл package.json в вашем любимом текстовом редакторе. Вы увидите нечто похожее на это:

{
"devDependencies": {
  "gulp": "^3.8.11"
  }
}

Создание первой задачи

Теперь наши необходимые инструменты установлены и мы можем начать реальную работу — создать нашу задачу (минимизация CSS).

Чтобы сообщить Gulp какие задачи он должен запускать, мы должны создать специальный файл, который будет содержать список задач — файл с именем gulpfile.js.

Итак, вернёмся к папке нашего проекта и создадим gulpfile.js. После этого папка должна выглядеть следующим образом:

  • Build
    • index.html
    • package.json
    • gulpfile.js

До того как Gulp запустит наши задачи, ему также требуются некоторые другие инструменты (пакеты) для помощи. В системе Gulp есть практически любая задача для всего, о чём вы только можете подумать (вы можете просмотреть пакеты здесь).

Так что отредактируем наш gulpfile.js и добавим список всех необходимых пакетов/зависимостей. Для нашей цели (минимизация CSS) нам нужен пакет с именем gulp-minify-css.

Для перечисления пакетов в gulpfile.js нам не потребуется открывать файл в текстовом редакторе, просто нужно выполнить следующую команду:

npm install --save-dev gulp-minify-css

После этого папка node_model снова изменится и будет выглядеть так:

  • Build/
    • index.html
    • package.json
    • gulpfile.js
    • node_modules/
      • gulp/
      • gulp-minify-css/

Это значит, что мы готовы начать. Теперь откройте файл gulpfile.js в текстовом редакторе и добавьте следующий код:

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');

gulp.task('mincss', function(){
  var fb = gulp.src('main.css');
    fb.pipe(minifyCss());
    fb.pipe(gulp.dest('main'));
    return fb;
});

Проверим и убедимся, что это именно то что нам нужно для создания CSS-файла. Сделайте CSS-файл в корне нашего проекта, назовите его main.css и откройте текстовым редактором. Ваша папка должна выглядеть сейчас так:

  • Build/
    • index.html
    • package.json
    • gulpfile.js
    • node_modules/
      • gulp/
      • gulp-minify-css/
    • main.css

Введите следующий код в CSS:

body{
  margin:0;
  padding:0;

  background-color:teal;
}

На данный момент ничего серьёзного не происходит. Теперь откройте командную строку, перейдите в корень проекта и введите следующую команду:

gulp mincss

Новая папка с именем main должна появиться в проекте с файлом main.css внутри. Если вы откроете этот файл, то должны увидеть внутри ваш минимизированный CSS. В моём случае я получил следующее:

body{margin:0;padding:0;background-color:teal}

Выглядит отлично!

Слежение за файлами

В этой части мы раскроем третий раздел gulpfile.js, который позволит следить за нашими файлами и запускать задачи при сохранении. Также, помимо задачи минимизации CSS мы собираемся добавить возможность компилировать Sass-файл вместо применения исходного CSS, а затем отобразить сообщение после успешного завершения.

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

Для начала, вот моя текущая структура папок:

  • Build/
    • index.html
    • package.json
    • gulpfile.js
    • node_modules/
      • gulp/
      • gulp-minify-css/
    • main.css

Установка необходимых пакетов

Перейдите в папку проекта и выполните следующие команды по одной, чтобы установить необходимые пакеты:

npm install --save-dev gulp-notify
npm install --save-dev gulp-sass

Добавление задачи watch и автоматизация системы

Gulp предлагает объект с именем watch, который похож на объекты src и dest. Мы можем использовать объект watch и попросить Gulp следить за данной задачей. Это означает, что Gulp будет следить за файлом на случай его модификации.

Добавьте следующий код в ваш gulpfile.js чтобы начать слежение за файлом main.css:

gulp.watch('main.css', function(){
  console.log('seen');
});

Окончательно gulpfile.js должен выглядеть следующим образом:

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');

gulp.task('mincss', function(){
  return gulp.src('main.css')
    .pipe(minifyCss())
    .pipe(gulp.dest('main'));
});
gulp.watch('main.css', function(){
  console.log('seen');
});

Теперь перейдите к командной строке и запустите gulp mincss снова. Если всё произошло ожидаемо, то вы должны увидеть сообщение «seen», как на картинке ниже:

Объект watch по-прежнему будет следить за какими-либо изменениями сделанными в файле main.css и отображать «seen» каждый раз, пока вы не нажмёте Ctrl + C для его остановки. Круто!

Функция watch принимает два аргумента: файл(ы) для слежения и вызов для действия. Второй аргумент может быть замыканием (анонимной функцией) или объектом JavaScript.

Обратите внимание, что за раз мы можем добавить несколько задач в файл gulpfile.js. У нас может быть задача script для управления JavaScript-файлами, задача connectPHP для запуска сервера PHP и т. д. Это может усложнить управление отслеживанием. Допустим, у нас есть три файла для слежения, мы должны написать:

gulp.watch(['file1.css', 'file2.txt', 'file3.js'], function(){
  console.log('seen');
});

Это прекрасно будет работать, но у меня лично есть две основные проблемы с такой практикой. Во-первых, это выглядит грязно. Я должен писать полное имя файла. Во-вторых, отображается одно сообщение («seen») каждый раз, когда меняется любой файл, в то время как я хотел бы знать, когда менялся конкретный файл.

Лучший способ справиться с грязной частью — это создание объекта paths, вроде следующего:

var paths = {
  css:['path/to/style1.css', 'path/to/style2.css'],
  script:['path/to/script1.js', 'path/to/script2.js']
};

gulp.watch(paths.css, function(){
  console.log('seen css changes');
});
gulp.watch(paths.script, function(){
  console.log('seen javascript changes');
});

Это выглядит хорошо и даёт нам возможность узнать, когда изменился CSS или JavaScript.

Другой мощной штукой для уведомлений является второй аргумент. Поскольку мы можем использовать замыкание в качестве аргумента, представьте как мы передаём целую задачу. Так что у нас есть что-то вроде такого:

gulp.watch(paths.css, ['mincss']);

Вы согласитесь со мной, что это выглядит чище. Теперь, со всеми этими небольшими изменениями, давайте применим их к Gulp-файлу и посмотрим, как это выглядит в целом:

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');
var paths = {
  css:['main.css'],
  text:['test.txt']
};

gulp.task('mincss', function(){
  return gulp.src('main.css')
    .pipe(minifyCss())
   .pipe(gulp.dest('main'));
});

gulp.watch(paths.css, ['mincss']);

продолжение (для нескольких задач)

Компиляция Sass-файла

Для компиляции Sass-файла нам понадобится пакет gulp-sass.

var sass = require('gulp-sass');

Переименуйте файл main.css в main.scss и встройте его в задачу mincss (также для этого вы можете создать отдельную задачу).

gulp.task('mincss', function(){
 return gulp.src('main.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(minifyCss())
   .pipe(gulp.dest('main'));
});

Теперь удалите всё что есть в main.scss и добавьте следующий код:

$color-title: #333;
h1{
  color:$color-title;
}

Выполните команду gulp. Если теперь вы проверите main/main.css, то должны увидеть:

h1{color:#333}

Вывод уведомления

Добавление уведомления — одна из самых простых вещей, которые делаются с Gulp. Просто включите gulp-notify в свой gulpfile.js

var notify = require('gulp-notify');

Затем пропустите CSS через это:

gulp.task('mincss', function(){
  return gulp.src('main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss())
    .pipe(gulp.dest('main'))
    .pipe(notify('Done! master zooboole.'));
});

Всё, что вам нужно сделать, это просто передать сообщение для отображения в notify(). Затем запустите gulp. Если всё хорошо, вы должны увидеть нечто вроде этого:

Живая перезагрузка

Живая перезагрузка — это техника в веб-разработке, которая позволяет разработчику видеть результат своего кода без обновления браузера.

В традиционном процессе вы должны нажать F5 или кнопку Обновить в своём браузере, чтобы попросить его обновить внесённые изменения. Это заставляет вас поочерёдно переключаться между редактором и браузером. Один раз, два, три раза и больше. Вы можете заметить, что эта привычка может оказаться очень утомительной и трудоёмкой.

Цель живой перегрузки — избежать ручной работы. Каждый раз, когда вы нажимаете Ctrl + S или сохраняетесь, ваш браузер будет перезагружаться самостоятельно. Круто!

Существует приложение под названием liveReload, которое вы могли бы использовать в сочетании с плагином Google Chrome, чтобы обеспечить живую перезагрузку. Я попытался заставить его работать как на Linux, так и Windows, но не мог. Поэтому, пожалуйста, простите меня. Одно несомненно, сегодня этот плагин есть с Gulp (gulp-livereload) и вы можете его опробовать.

Я не единственный, у кого не всё хорошо с liveReload. Большинство людей, несомненно, сталкивались со многими трудностями, пытаясь использовать его, так что они создали ему полную замену: gulp-browserSync.

Живая перезагрузка с gulp-browserSync

BrowserSync является вероятно одним из самых полезных плагинов, который хотелось бы иметь разработчику. Он на деле даёт вам возможность запустить сервер, на котором вы можете выполнять свои приложения. Он заботится о перезагрузке ваших HTML/PHP-файлов. У него также есть возможность обновить/внедрить CSS и JavaScript-файлы в HTML и многое другое. С помощью этого плагина вы идёте исключительно вперёд.

Теперь посмотрим, как это работает. Перейдите в папку проекта и установите плагин browser-sync так:

npm install --save-dev browser-sync

Включите его в файл gulpfile.js:

var browserSync = require('browser-sync');

Функция перезагрузки BrowserSync называется reload(). Давайте вызовем её и сохраним в переменной, просто для понятности.

var reload      = browserSync.reload;

Обратите внимание, что там, где я использую reload() вы также можете использовать browserSync.reload().

Задайте переменную paths вроде этого:

var paths = {
  html:['index.html'],
  css:['main.scss'],
  script:['script.coffee']
};

Эти файлы мы отслеживаем на любые изменения.

Мы создали задачу для файлов Sass и JavaScript, теперь давайте добавим одну для HTML-файлов.

gulp.task('html', function(){
  gulp.src(paths.html)
  .pipe(reload({stream:true}));
});

Всё что делает эта задача — пропускает наш HTML-файл через функцию reload() из browser-sync. Если вы, к примеру, используете jade то могли бы компилировать его до перезагрузки.

Делаем то же самое с нашими существующими задачами:

// CSS
gulp.task('mincss', function(){
  return gulp.src(paths.css)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss())
    .pipe(gulp.dest('main'))
    .pipe(reload({stream:true}));
});

// JavaScript
gulp.task('scripts', function(){
  return gulp.src(paths.script)
    .pipe(coffee())
    .pipe(gulp.dest('js'))
    .pipe(reload({stream:true}));
});

browser-sync нужно знать расположение файлов, которые мы перезагружаем/синхронизируем и запустить мини-сервер основанный на этом; порт для прослушивания; прокси, если возможно и др. Посмотрите все варианты здесь.

Давайте настроим browser-sync и предоставим ему всю информацию.

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: "./"
    },
    port: 8080,
    open: true,
    notify: false
  });
});

Обратите внимание, что если вы не указали точный номер порта, browser-sync будет использовать порт 3000 по умолчанию.

Теперь добавьте эту задачу в задачу watcher:

gulp.watch(paths.html, ['html']);

И, наконец, подретушируем задачу default:

gulp.task('default', ['watcher', 'browserSync']); (продолжение) 

Рекомендуемые плагины

Итак, в этой части я сосредоточусь в основном на некоторых плагинах и инструментах, которые могут быть очень важны и полезны для любого разработчика, и помогают организовать файл gulpfile.js.

gulp-BrowserSync

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

Когда вы запускаете приложение через gulp, в командной строке вы должны увидеть такую ответную реакцию или что-то подобное от browserSync:

Local: http://localhost:9091
External: http://172.28.64.208:9091

Авто-загрузка с gulp-load-plugins

Начнём с этого. Требуемые плагины при написании автоматизированных задач могут стать очень тяжёлыми в плане количества require, которые вы должны добавить. С помощью этого плагина вы можете просто попросить gulp автоматически включить все задачи. И можете спросить меня, как получить доступ к именам плагинов, потому что все эти имена вам потребуются позже. Да, вы правы, gulp-load-plugins берёт на себя заботу по автоматическому созданию имён на основе имени пакета в формате CamelCase и сохраняет их в объект, к которому вы можете легко получить доступ. Используем gulp-load-plugins для этого примера:

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
// Объект содержит имена плагинов
var plugins = gulpLoadPlugins();
gulp.task('css', function(){
  return gulp.src('path/to/source')
    .pipe(plugins.gulpMinifyCss('main.js'))
});

У вас есть возможность настроить плагин.

gulp-rename

Этот плагин реально хорош в переименовании файлов. Например, в разработке у вас есть CSS и JS-файлы с именами styles.css и main.js. После их минимизации можно использовать gulp-rename и переименовать файлы в styles.min.css и main.min.js.

gulp.src(paths.sass)
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(minifycss())
  .pipe(rename({suffix: '.min'}));

Объединение с gulp-concat

Подобно плагину gulp-rename, gulp-concat ещё один престижный плагин, который отвечает за унификацию, слияние или просто объединение ваших JavaScript-файлов.

.pipe(concat('temp.js'))
  .pipe(uglify())
  .pipe(rename('final.min.js'))
  .pipe(gulp.dest('./app/js/'))

gulp-plumber

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

gulp.src(path.files)
  .pipe(plumber()),
  .pipe(gulp.dest(path.dest));

gulp-unCSS

Мой любимый. Это действительно благословение, что есть такой плагин. Он заботится о вашем неиспользованном CSS, позволяя резко уменьшить вес стилей, особенно если вы работаете с фреймворком вроде Bootstrap. Посмотрите, как вы можете его использовать:

return gulp.src('path/to/css/sources')
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(uncss({
    html: ['index.html', 'posts/**/*.html', 'http://example.com']
  }))
  .pipe(rename({
    suffix: '.min'
  }))

gulp-imagemin

Этот плагин поможет вам, оптимизируя изображения. Очень прост в использовании.

Пример для оптимизации .png, .jpg, . jpeg, .gif, .svg:

return gulp.src('path/to/images'/*.{png,jpg,jpeg,gif,svg}')
  .pipe(imagemin());

gulp-rev

Отличный плагин, который помогает проверить код до его публикации.

gulp.task('rev', ['less', 'scripts'], function() {
  return gulp.src(['dist/**/*.css', 'dist/**/*.js'])
    .pipe(rev())
    .pipe(gulp.dest('dist'));
});

Critical CSS

Critical CSS ещё один отличный плагин. Его ролью является внедрение любого требуемого CSS и JavaScript, чтобы помочь загрузить ваш контент до «сгиба» без блокировки. Это может показаться странным, но это проблема. Вы, возможно, знаете Google Insights PageSpeed, который помогает определить скорость веб-страниц для десктопа и мобильных устройств.

Javascript и CSS замедляет загрузку страниц и Google предполагает, что всё до «сгиба» должно загружаться немедленно. Вот где Critical CSS вступает в игру. Он внедрит все необходимые CSS в ваши HTML-теги, что даст вам некоторые встроенные стили. У этого подхода есть некоторые преимущества, вроде ускорения времени загрузки.

Я на деле ещё не убеждён в его использовании и до сих пор думаю, что могу получить другие альтернативы для решения проблемы. Так что я не буду его описывать, вы можете по-прежнему перейти на эту страницу и я действительно рекомендую вам посмотреть это видео Патрика Хаманна (The Guardian), если вы действительно желаете увидеть, как люди пользуются такой практикой.

Другие плагины

Есть и некоторые другие плагины, вам также может быть интересно взглянуть на такие как: gulp-html-extendautoprefixergulp-iconfontgulp-sourcemapsgulp-util.

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

Настройки проекта

Другая вещь, которую вы также должны рассмотреть при работе с Gulp — это организация ваших задач в рамках файла gulpfile.js, которая предполагает, как называть задачи, будет ли задача для слежения за файлами или нет, какая задача будет выполняться в производстве или до него и т. д.

Итак, давайте посмотрим на это быстро с пошаговым объяснением ниже.

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

  • Начните с подключения всех необходимых плагинов; используйте одну функцию require(), разделяя имена запятыми или воспользуйтесь gulp-load-plugins.
  • Определите переменные для хранения путей к местоположению ваших файлов.
  • Определите задачу для CSS.
  • Определите задачу для скриптов.
  • Определите задачу для HTML.
  • Определите задачу для изображений.
  • Определите любую задачу для синхронизации, вроде browserSync.
  • Определите необходимую задачу для очистки.
  • Определите задачу сборки.
  • Определите задачу для слежения за файлами.
  • Определить задачу по умолчанию default.
  • Всегда старайтесь добавлять блок комментария перед каждым шагом, чтобы пояснить, что он делает.

Давайте создадим образец gulpfile.js на основе этих указаний:

// ////////////////////////////////////////////////
//
// ОБРАЗЕЦ GULPFILE.JS
// Подробный комментарий...
// // /////////////////////////////////////////////

// ////////////////////////////////////////////////
// 
// Требуемые плагины
// 
// // /////////////////////////////////////////////
var gulp = require('gulp'),
    plugin1 = require('gulp-plugin1'),
    plugin2 = require('gulp-plugin2'),
    plugin3 = require('gulp-plugin3');

// ////////////////////////////////////////////////
// 
// Создание переменных конфигурации
//
// ////////////////////////////////////////////////
var config = {
  html: [
    'path/to/html/files'
  ],
  scss:[
    'path/to/scss/files'
  ],
  scripts:[
    'path/to/script/files'
  ]
};

// ////////////////////////////////////////////////
//
// Задачи для стилей
//
// ///////////////////////////////////////////////
gulp.task('styles', function() {
  gulp.src(config.scss)
    .pipe( ... )
    . ...
    ;
});

// ////////////////////////////////////////////////
//
// Задачи для скриптов
//
// ///////////////////////////////////////////////
gulp.task('scripts', function() {
  return gulp.src(config.scripts)
    .pipe( ... )
    . ...
    ;
});

// ////////////////////////////////////////////////
//
// Задачи для HTML
//
// // /////////////////////////////////////////////
gulp.task('html', function(){
  gulp.src(config.html)
  .pipe( ... )
  . ...
  ;
});

// ////////////////////////////////////////////////
//
// Задачи для изображений
//
// // /////////////////////////////////////////////
gulp.task('images', function() {
  return gulp.src(config.images)
    .pipe(cache(imagemin()))
    . ...
    ;
});

// ////////////////////////////////////////////////
//
// Задачи Browser-Sync
//
// // /////////////////////////////////////////////
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "./app/"
    }
  });
});

// ////////////////////////////////////////////////
//
// Задачи для очистки
//
// // /////////////////////////////////////////////
gulp.task('clean', function() {
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});

// ////////////////////////////////////////////////
//
// Задачи сборки
//
// // /////////////////////////////////////////////

// задача запускает сервер для тестирования финального приложения
gulp.task('build:serve', function() {
  browserSync({
    server: {
      baseDir: "./build/"
    }
  });
});

// задача создаёт папку build для всех файлов
gulp.task('build:create', function(){
  //...
});

// задача удаляет ненужные файлы из папки build
gulp.task('build:remove', function () {
 // ...
);

// задача для запуска сборки
gulp.task('build', ['build:create', 'build:remove']);

// ////////////////////////////////////////////////
//
// Задача watch
//
// // /////////////////////////////////////////////
gulp.task ('watch', function(){
  gulp.watch(config.scss, ['styles']);
  gulp.watch(config.scripts, ['scripts']);
  gulp.watch(config.html, ['html']);
});

// ////////////////////////////////////////////////
//
// Задача по умолчанию
//
// // /////////////////////////////////////////////
gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);

Файл .gitignore

Я хотел упомянуть об этом, потому что когда вы смотрите внутрь папки node_modules, вы можете увидеть, что она содержит кучу тяжёлых файлов и папок, я имею в виду действительно тяжелых, и вы не хотите тратить весь день, пытаясь скопировать их при развёртывании или давая проект кому-то другому. Вы также не желаете отслеживать их через Git, так как у вас уже есть файл package.json и вы всегда можете получить их обратно.

Таким образом, чтобы предотвратить это, используйте файл .gitignore, через который вы можете запретить отслеживание некоторых папок и файлов. Файл может быть чем-то вроде этого:

## Build Systems

node_modules/
bower_components/
.sass-cache
*.css.map
build/
dist/

Резюме

Как я уже говорил, мир Gulp сложен и многообразен. То, что я сказал, может произнести кто-то иной другими словами и это по-прежнему будет работать. Прежде всего, вы должны всегда рассматривать контекст и требования своего проекта. Вы можете увидеть огромный проект с очень маленьким gulpfile или наоборот. Я думаю, что идеально подходящей техникой является та, которая работает для вас и удовлетворяет вашим требованиям.

Адаптивный дизайн с Gulp

Нажмите сюда, чтобы просмотреть демо-версию и лучше понять, что мы собираемся делать.

Предварительно позвольте мне рассказать вам немного о Susy и Breakpoint.

Susy

Susy является системой сеток, которая предоставляет большую гибкость для управления макетом сайта. Susy даёт вам всё, чего не может дать ни один другой фреймворк, вроде Bootstrap или Foundation. У меня не найдётся прекрасных слов для описания мощи Susy; есть пост Целла Лью на css-tricks, представляющий Susy и рассказывающий насколько легко вы можете создать с его помощью макет.

Позвольте показать немного того, как можно использовать Susy для определения макета. Susy работает с Sass, не Less и это также настраивается. Вот простая и минималистская настройка, которая у вас может быть:

@import "susy"
/* Меняем глобальные настройки Susy по умолчанию */
$susy: (
  /* Устанавливаем 12 колонок */
  columns: 12,
  /* Устанавливаем основной контейнер в 1120px */
  container: 1024px
);

Теперь предположим, что вам нужен макет страницы подобно текущей, на которой вы читаете этот текст. Страница содержит заголовок, который охватывает весь макет, контент слева занимает 8 колонок и боковая панель занимает 4 колонки. Написать с Susy вы можете так:

header{
  @include span(12);
}
.content{
  @include span(8);
}
.content{
  @include span(4);
}

Просто, не так ли? Никакого лишнего шума.

Breakpoint

Без медиа-запросов нет и адаптивного дизайна. Breakpoint является простым модулем, который позволяет использовать медиа-запросы упрощённым и наглядным путём. Он предназначен для помощи в написании медиа-запросов в Sass так быстро, насколько это возможно. Давайте посмотрим пример применения:

header{
  @include breakpoint( 320px ){
    background-color: $white;
  }
  @include breakpoint( 768px ){
    background-color: $red;
  }
  @include breakpoint( 1024px ){
    background-color: $black;
  }
}

Здесь просто меняется цвет фона заголовка каждый раз, когда размер экрана попадает в одну из точек останова. Это просто. Представив как это сочетается с Susy, мы собираемся творить магию.

Прочитать больше о breakpoint-sass можно здесь.

Макет проекта

Прежде чем идти дальше, позвольте мне показать вам что мы действительно хотим здесь сделать в качестве примера:

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

Настройка проекта

Для этого проекта мы будем использовать систему сборки Gulp для автоматизации некоторых наших задач. И мы будем также использовать Bower для управления нашими пакетами, такими как Susy, Breakpoint. Итак, начнём.

Шаг 1: создайте папку и назовите её responsive_blog или любым предпочитаемым именем.

Шаг 2: перейдите в папку и запустите npm init, чтобы настроить файл package.jason. Скажите yes для всех шагов.

Шаг 3: установите Gulp локально путём выполнения npm install —save-dev gulp.

Шаг 4: также установите локально следующие плагины — gulp-sass, gulp-minify, gulp-uglify, gulp-rename, gulp-del, browser-sync и др., запустив npm install —save-dev <имя плагина> или можете просто указать их как зависимости в файле package.json:

"devDependencies": {
  "browser-sync": "^2.9.0",
  "del": "^2.0.0",
  "gulp-autoprefixer": "^2.3.1",
  "gulp-minify-css": "^1.2.1",
  "gulp-plumber": "^1.0.1",
  "gulp-rename": "^1.2.2",
  "gulp-sass": "^2.0.4",
  "gulp-sourcemaps": "^1.5.2"
}

Шаг 5: создайте ещё одну папку внутри responsive_blog и назовите её src. Она будет содержать наши исходные файлы. Чтобы сделать папку вы можете выполнить: mkdir src.

Шаг 6: создайте файл bower.json запустив bower init и сказав yes для всех шагов. Затем выполните bower install susy breakpoint. Это позволит установить пакеты Bower, в частности Susy и Breakpoint-sass.

Шаг 7: создайте gulpfile.js в той же папке, запустив touch gulpfile.js.

Ваша папка проекта должна выглядеть следующим образом:

  • responsive_blog/
    • node_modules/
    • src/
    • bower_components
    • bower.json
    • gulpfile.js
    • package.json

Если это выглядит красиво, то продолжим.

Шаг 8: перейдите в папку src и создайте основной файл, запустив touch index.html.

Шаг 9: создайте две папки css и scss внутри src запустив mkdir css scss.

Шаг 10: внутри scss создайте новый файл и назовите его styles.scss. Сейчас папка должна выглядеть следующим образом:

  • responsive_blog/
    • node_modules/
    • bower_components/
    • src/
      • css/
      • index.html
      • scss/
        • styles.scss
    • bower.json
    • gulpfile.js
    • package.json

Отличная работа!

Код

Мы только что создали наши папки и файлы. Теперь добавим некоторый код внутрь index.html, gulpfile.js и styles.scss:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Web Design - Blog</title>
  <meta name="charset" content="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.min.css">
</head>
<body>
  <div class="container">
    <header class="">
      <h2><a href="" title="">RWD</a></h2>
      <nav>
        <ul>
          <li><a href="" title="">Home</a></li>
          <li><a href="" title="">About</a></li>
          <li><a href="" title="">Contact</a></li>
        </ul>
      </nav>
    </header><!-- /header -->
    <div class="page-content">
      <section class="latest-posts">
        <h1>Latest tutorials</h1>
 
         <article>
           <!-- пост блога -->
           <h2><a href="" title="">How to create a blog?</a></h2>
           <p>This shows you how you can create your own blog. 
           <a href="" rel=bookmark>Read more</a></p>
           <footer>
             By zooboole | 7k views
           </footer>
         </article>

         <article>
           <!-- пост блога -->
           <h2><a href="" title="">How to create a blog?</a></h2>
           <p>This shows you how you can create your own blog. 
           <a href="" rel=bookmark>Read more</a></p>
           <footer>
             By zooboole | 7k views
           </footer>
         </article>
      </section><!-- /section -->
  
      <aside class="popular-posts">
        <h1>Popular</h1>
        <article>
          <!-- пост блога -->
          <h2><a href="" title="">How to create a blog?</a></h2>
          <p>This shows you how you can create your own blog. 
          <a href="" rel=bookmark>Read more</a></p>
          <footer>
            By zooboole | 7k views
          </footer>
        </article>
      </aside><!-- /aside -->
    </div>
  
    <footer class="footer">
      2015 © Responsive Blog, by <a href="http://zooboole.me">zooboole</a>
    </footer><!-- /footer -->
  </div>
  
<script src="bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components/breakpoint/jquery.breakpoint.js" type="text/javascript" charset="utf-8"></script>
  
</body>
</html>

styles.scss

@import "../bower_components/susy/sass/_susy.scss";
@import "../bower_components/breakpoint-sass/stylesheets/breakpoint";

@import "reset";
@import "variables";

// Susy
$susy: (
  columns: 12,
  gutters: 1/2,
  math: fluid,
  gutter-position: outside,
);
html,body{
  font-family: $font-family-default;
  font-size:$font-size-default;
  line-height:$line-height;
  color:$color-text;
  background-color: $color-background;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

a{
  text-decoration: none;
}

.container{
  @include container($container);
  background-color:$white;
}

.page-content{
  padding:3%;
  margin:0;
}

// ***********************************
// МАЛЕНЬКИЕ УСТРОЙСТВА
// ***********************************
@include breakpoint($breakpoint-small) {
  h1{
    color: $color-secondary;
    font-size: $font-size-title;
  }
  h2{
    font-size: 1.2em;
    margin:0;
    padding:0;
  }
  
  // Заголовок сайта
  header{
    @include span(12);
    background-color:$color-secondary;
    padding:0 1%;
    color: $white;
    h2{
      @include span(12);
      font-size: 1.5em;
      padding:0 0.4em;
    }
    nav{
      @include span(12);
    }
    ul{
      list-style-type: none;
      padding:0;
      margin:0;
      padding-left:0.1em;
      li{
        display: inline-block;
        a{
          font-size: 1em;
          display: block;
          padding: 0.5em;
        }
      }
    }
    a{
      color: $white;
      &:hover{
        color: $black;
      }
    }
  }
  // Последние посты
  .latest-posts{
    @include span(12);

    article{
      border:1px solid $color-background;
      padding:0.5em;
      margin-bottom: 1em;
      p{
        font-size: 0.9em;
      }
      a{
        color: darken($color-background, 25%);
      }
      footer{
        font-size: 0.9em;
        color:#333;
      }
    }
  }
  // Популярные посты
  .popular-posts{
    @include span(12);
    article{
      background-color:lighten($color-background, 5%);
      border:1px solid $color-background;
      padding:0.5em;
      margin-bottom: 1em;
      a{
        color: darken($color-background, 20%);;
      }
    }
  }
  // Подвал
  .footer{
    @include span(12);
    background-color:$color-secondary;
    font-size: 1em;
    padding:0.5em 1%;
    color: $white;
    a{
      color:lighten( $color-primary, 22%);
      &:hover{
        color: $black;
      }
    }
  }
}

// ***********************************
// СРЕДНИЕ УСТРОЙСТВА
// ***********************************
@include breakpoint($breakpoint-medium){

// Здесь мы просто изменим что необходимо модифицировать,
// потому что предыдущий стиль применяется автоматически

  // Заголовок сайта
  header{
    @include span(12);
    background-color:$color-primary;
    h2{
      @include span(3);
      font-size: 3em;
    } 
    nav{
      @include span(8);
    }
    ul{
      text-align: right;
      margin-top:0.4em;
      li{
        a{
          font-size: 1.7em;
        }
      }
    }
  }

  // Последние посты
  .latest-posts{
    @include span(6);
    article{
      h2{
        font-size: 1.8em;
      }
      border:1px solid $color-background;
      padding:0.5em;
      margin-bottom: 2em;
      clear: both;
      p{
        font-size: $font-size-default+50;
      }
      a{
        color: darken($color-background, 25%);
      }
      footer{
        font-size: 1.3em;
      }
    }
  }

  // Популярные посты
  .popular-posts{
    @include span(6);
    padding-left:1em;
    article{
      h2{
        font-size: 1.8em;
      }
      background-color:lighten($color-background, 2%);
      border:1px solid transparent;
      padding:0.5em;
      margin-bottom: 1em;
      p{
        font-size: $font-size-default+50;
      }
      a{
        color: darken($color-background, 20%);;
      }
      footer{
        font-size: 1.3em;
      }
    }
  }

  // Подвал
  .footer{
    @include span(12);
    background-color:$color-primary;
    font-size: 1.5em;
  }
}
  
// ***********************************
// БОЛЬШИЕ УСТРОЙСТВА
// ***********************************
@include breakpoint($breakpoint-large){

// Здесь мы просто изменим что необходимо модифицировать,
// потому что предыдущий стиль применяется автоматически

  // Заголовок сайта
  header{
    @include span(12);
    background-color:lighten($color-primary, 15%);
    padding:0%;
  }
   // Последние посты
  .latest-posts{
    // оставим пустым, это значит что будет применяться предыдущий стиль
  }
  // Популярные посты
  .popular-posts{
    @include span(6);
    padding-left:1em;
    article{
      h2{
        font-size: 1.8em;
      }
      background-color:lighten($color-background, 2%);
      border:1px solid transparent;
      padding:0.5em;
      margin-bottom: 1em;
      p{
        font-size: $font-size-default+50;
      }
      a{
        color: darken($color-background, 20%);;
      }
      footer{
        font-size: 1.3em;
      }
    }
  }
  // Подвал
  .footer{
    padding:0em;
    background-color:lighten($color-primary, 15%);
  }
}

gulpfile.js

//////////////////////////////////////////////////
//
// Включаем задачи
//
/////////////////////////////////////////////////

var gulp        = require('gulp'),
minifycss       = require('gulp-minify-css'),
sass            = require('gulp-sass'),
browserSync     = require('browser-sync'),
reload          = browserSync.reload,
autoprefixer    = require('gulp-autoprefixer'),
plumber         = require('gulp-plumber'),
del             = require('del'),
rename          = require('gulp-rename'),
sourcemaps      = require('gulp-sourcemaps');

//////////////////////////////////////////////////
//
// Настройка переменных
// Задаём paths
//
/////////////////////////////////////////////////
var config = {
  scss    :[ 'src/scss/**/*.scss' ],
  css     :[ 'src/css/' ],
  html    :[ 'src/**/*.html' ],
  build   :[ 'build/' ],
  src     :[ 'src/' ]
};

//////////////////////////////////////////////////
//
// Задачи для CSS/Sass
//
/////////////////////////////////////////////////
gulp.task('styles',function(){
  return gulp.src(config.scss)
    .pipe(sourcemaps.init())
    .pipe(sass()
    .on('error', sass.logError))
    .pipe(autoprefixer('last 3 versions'))
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(''+config.css+''))
    .pipe(reload({stream:true}));
});

//////////////////////////////////////////////////
//
// Задачи для HTML
//
/////////////////////////////////////////////////
gulp.task('html', function(){
  return gulp.src(config.html)
    .pipe(reload({stream:true}));
});

//////////////////////////////////////////////////
//
// Задачи Browser-Sync
//
/////////////////////////////////////////////////
gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: config.src
    }
  });
});

//////////////////////////////////////////////////
//
// Задачи сборки
// Создание папки build, очистка неиспользуемых файлов и папок
//
/////////////////////////////////////////////////

// Создание
gulp.task('build:create', function(){
  return gulp.src(config.src+'**/*')
    .pipe(gulp.dest(''+config.build+''));
});

// Очистка папки build
gulp.task('build:clean',['build:create'], function(){
  return del(['build/bower_components/',
              'build/scss/',
              'build/css/!(*.min.css)',
              'build/js/!(*.min.js)'
            ]);
});

// Задачи предварительного просмотра приложения
gulp.task('build:start', function() {
  browserSync({
    server: {
      baseDir: config.build
    }
  });
});

// Удаляем папку build
gulp.task('build:delete', function(res){
  return del([config.build+'/**'], res);
});

// Задача build
gulp.task('build', ['build:create', 'build:clean']);

//////////////////////////////////////////////////
//
// Задача watch
// Отслеживает любые изменения в файлах CSS, JS и HTML
//
/////////////////////////////////////////////////
gulp.task ('watch', function(){
  gulp.watch(config.scss, ['styles']);
  gulp.watch(config.html, ['html']);
});

//////////////////////////////////////////////////
// Задача по умолчанию
/////////////////////////////////////////////////

gulp.task('default', ['watch', 'browserSync','styles','html']);

Хорошо. Мы разработали разные части проекта. Осталось только запустить их. Как вы, возможно, заметили из gulpfile.js, мы просто должны поставить свои задачи в работу.

Здесь следует рассмотреть два случая:

Разработка

Это время, когда вы всё ещё кодируете и вносите изменения в код. В нашем случае достаточно просто выполнить:

gulp

Если вы используете мои файлы, выполните следующее:

npm install
bower install
gulp

При этом скачаются все плагины и требуемые пакеты, после чего gulp выполнит задачи, которые отслеживают любые изменения и автоматически перезагружают страницу.

Если вы хотите увидеть, как я получил пути к Susy и Breakpoint запустите bower list —path.

Но есть кое-что с точками останова, о чём мне следует предупредить. Вы должны использовать breakpoint-sass вместо breakpoint. При импорте его в ваши стили будьте аккуратны.

Публикация

Этап, когда вы закончили кодирование и хотите получить конечный продукт. У нас есть задачи build. Чтобы их использовать, выполните следующие команды.

Создание сборки приложения:

gulp build

Запустить финальное приложение:

gulp build:start

Если вы хотите удалить папку build:

gulp build:delete

Резюме

Это просто пример того, как я бы приступил к созданию такого сайта. Это лишь один рабочий процесс и техника среди множества. Я ожидаю что вы узнали четыре основные вещи из этого урока: рабочий процесс с системой сборки Gulp, как создать адаптивный сайт, как Susy и Breakpoint позволяет нам писать семантичный HTML и как указать сперва мобильные устройства при проектировании адаптивного сайта.

Признаю, что пропустил много в коде, знайте что это для ясности цели, а иногда я сам не разобрался, как обращаться с этим, потому что всё ещё учусь, как хорошо использовать Susy и Breakpoint. Если у вас есть какие-либо идеи как что-то улучшить, я буду рад принять их.

Прежде всего, вы также должны быть осведомлены о существования Susy и Breakpoint для вашего следующего проекта. Это великолепные инструменты, которые могут сделать вашу жизнь проще.

адаптивный дизайн

Bower

Jade

БЭМ

Join the discussion

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
=) Home Work
CSS
JavaScript
Word Press

Интеркасса (API)

Доллар

покупка  $ 1 | 27.53 грн
продажа $ 1 | 24.7 грн

Евро

покупка  € 1 | 30.59 грн
продажа € 1 | 27.33 грн