Не так давно узнал о новом для себя инструменте построения сайтов на Bootstrap — Blocs. На хабре не нашел о нем информацию, поэтому позволю себе немного маркетинговых заметок, так как этот инструмент облегчил мне работу.

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

Blocs позиционирует себя как конструктор, который позволяет генерировать код, чистота и качество которого не уступает работе профессионального верстальщика.

Blocs работает как десктопное приложение под операционной системой Mac OS X, и не ограничивает вас количеством создаваемых сайтов, как это делают онлайн-конструкторы.

Blocs на лету делает верстку адаптивной (не всегда, правда, качественно, но так как код читабельный и чистый, легко поправить), также он поддерживает Retina.

Больше о Blocs на официальном сайте. Доступен триал 5 дней.
Программа простая, поэтому этого триала достаточно.

Blocs действительно генерирует очень качественный код и удобную структуру проекта.



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

Какие задачи мы ставим перед собой с GulpJS?

• Решить проблему с кириллическими названиями файлов
• Сжать HTML
• Сжать и склеить CSS
• Сжать и склеить JS

Начнем по-порядку, с обработки html-файлов. На данном этапе подразумевается что вы уже разобрались как ставить NodeJS, NPM, GulpJS. Если так и есть, то продолжаем читать, если нет, то стоит разобраться с этим вопросом.

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

var gulp = require('gulp'),
    gif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require("gulp-rename"),
    replace = require('gulp-replace'),
    htmlify = require('gulp-minify-html'),
    cssify = require('gulp-minify-css'),
    uncss = require('gulp-uncss'),
    russian = require('translit-russian'),
    translit = require('translit')(russian);

Мой проект называется milano2. И для того, чтобы можно было одним gulp-файлом оптимизировать разные проекты, я создам переменную project.

var project = "milano2";

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

var assets = {
    js : [
      project + '/js/jquery-2.1.0.min.js',
      project + '/js/bootstrap.js',
      project + '/js/jqBootstrapValidation.js',
      project + '/js/blocs.js',
      project + 'js/formHandler.js'
    ],
    html :  project + '/*.html',
    css : [
      project + '/css/*.css',
      project + '/style.css'
    ]
};

Приступаем к решению

И после этого приступаем к решению проблем с HTML. Какие конкретно задачи стоят перед нами?

• Произвести транслитерацию названий файлов
• Поправить ссылки в связи с изменением названий файлов
• В head заменить ссылки на build.css
• Перенести script в конец файла для предотвращения блокирования загрузки (рекомендация Google)

Ну и, конечно же, минифицировать все это. Для этого пишем следующий таск.

gulp.task('html', function(){
	var menus = [];
    gulp.src(assets.html)
    .pipe(gif(notMinifiedHtml, htmlify()))
	.pipe(replace("<link rel=stylesheet type=text/css href=./css/bootstrap.css><link rel=stylesheet id=ppstyle type=text/css href=style.css><link rel=stylesheet href=./css/animate.css><link rel=stylesheet href=./css/font-awesome.min.css>", "<link rel=stylesheet href=css/build.css>")) //Заменяем ссылки на стили, на один минифицированный и склееный стиль
	.pipe(replace("<script src=./js/jquery-2.1.0.min.js></script><script src=./js/bootstrap.js></script><script src=./js/blocs.js></script>", ""))
	.pipe(replace("<script src=./js/jqBootstrapValidation.js></script><script src=./js/formHandler.js></script>", "")) //Удаляем ненужное
	.pipe(replace("</body>", "<script src=js/build.js></script></body>")) //Переносим загрузку скрипта в конец
	.pipe(rename(function(path){
		path.basename = translit(path.basename); //Переименовываем файлы если они написаны кириллицей
	}))
	.pipe(replace(/<a href=((?!http|#).*?)\.html/g, function(str) {
		return translit(str); //Заменяем ссылки в файлах если они были написаны кириллицей
	}))
    .pipe(gulp.dest(project + '/build'))
});

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

После выполнения задачи в созданной папке build будут наши обновленные файлы проекта, и если они были кириллические, то теперь такой проблемы нет. Впереди у нас стоит задача минифицировать и склеить таблицы стилей.

Существует такой плагин gulp-uncss, который позволяет удалить неиспользуемые классы и стили, такой подход хорошо использовать если вы после экспорта из Blocs не планируете дорабатывать что-то сами. Я решил удалить неиспользуемые стили, и вместо build.css размером 125кб, получил размер 45 кб, без ущерба для проекта. Давайте посмотрим как это работает. Пишем новый таск.

gulp.task('css', function(){
    gulp.src(assets.css)
    .pipe(gif(notMapping, sourcemaps.init()))
    .pipe(concat('build.css'))
	.pipe(gif(notUnUsedCss, uncss({html: ["milano2/build/*.html"], ignore : ignored})))
    .pipe(cssify())
    .pipe(gif(notMapping, sourcemaps.write()))
	.pipe(replace("img/", "../img/"))
    .pipe(gulp.dest(project + '/build/css'))
});

Код простой, в комментариях не нуждается, видно что создается карта при желании, при желании удаляются неиспользуемые стили, правятся пути к изображениям из файла style.css, и все это минифицируется и складывается в нужную папку. Изначальный размер всех CSS-файлов у меня был 250 кб, после сжатия 125 кб, а после применения плагина gulp-uncss — 45 кб.

Результаты

Минификация JS, не представляет из себя особого интереса, ее вы можете увидеть и в других публикациях на хабре, а задача этой статьи, оптимизация ресурсов, генерируемых именно программой Blocs.



В результате проделанной работы, вы можете оптимизировать все проекты созданные в Blocs, меняя только переменную project в gulpfile.js.

Надеюсь, кто-то найдет применение этому инструменту. Если сделаете какую-нибудь красоту с помощью Blocs, делитесь в комментариях, хочется посмотреть, на что она способна в умелых руках. На момент написания статьи актуальная версия 1.5.2.

Примеры созданных сайтов с помощью Blocs.

http://groundbreakers.eu/
https://espora.co/
http://www.cascademanila.com/
http://www.nowbranded.com/
http://www.rfidwithsms.com/
милано.сайт (русский, оптимизированный)

Окончательный результат gulpfile выложил на github, документацию возможно напишу позже. Благодарю за внимание!