Сайт студии интерьерного дизайна

Задача

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

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

Разработка

Для сетки был выбран уже привычный Bootstrap 4. Однако, в начале работы столкнулся с известной особенностью, когда 12-ти колоночный макет в photoshop, подготовленный дизайнером, не совпадает с колонками в бутстрапе. Дело в том, что в Bootstrap по умолчанию расстояние между колонками слева и справа по 15px, а в макетах 12px. Об этом можно подробнее прочитать в статье. Так как дизайнером было сделано достаточно работы и все макеты были уже почти утверждены, я поправил стилями сетку, задав нужные отступы и ширину контейнера с информацией.

Изначально все стили описывались языком SCSS, который легко транслируется в CSS ruby-программой.

scss --no-cache --update scss/style.scss:css/style.min.css --style compressed

Для сжатия js скриптов использовался uglifyjs.

npm install uglify-js -g
uglifyjs --compress --mangle -o "js/scripts.min.js" -- js/scripts.js 

В начале работа велась над главной страницей (index.html). При верстке остальных страниц стало ясно, что повторяющиеся куски кода (шапка, подвал, меню, блок с заявкой и т.п.) должны быть в отдельных файлах, и для упрощения разработки решил попробовать использовать в этот раз Gulp. Gulp — это таск-менеджер для автоматического выполнения часто используемых задач, написанный на языке JavaScript.

npm install --save-dev gulp

Для добавления на страницу часто используемого блока теперь просто используем директиву include:

  </div>
</div>

@@include('../includes/_contacts.html')			
		
        </main>           
            
@@include('../includes/_footer.html')
                        
        </div>

Все таски описываются в файле gulpfile.js. Задача сборки (build) заполняет страницы необходимыми блоками и перекладывает их в нужные директории. Задача запуска (connect) просто стартует локальный сервер.

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

var gulp = require("gulp");
var fileinclude = require('gulp-file-include');
var connect = require('gulp-connect');

gulp.task('build', function() {
  gulp.src(['_pages/gallery.html', 
            '_pages/about.html', 
            '_pages/redevelopment.html',
            '_pages/supervision.html',
            '_pages/furnishing.html',
            '_pages/design.html',
            '_pages/planning_solution.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./pages/'));   

    gulp.src(['_pages/index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('connect', function() {
  connect.server({
    root: '.',
    livereload: true
  })
});

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