Devprod static project skel

Devprod static project skel является основой для создания новых статичных html-проектов.

Deploy

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

$ sudo apt-get install nodejs
$ sudo apt-get install curl

Установка зависимостей (npm packages, bower packages)

$ npm install

Экспорт проекта в папку ./output

$ npm run makestatic

Запуск watch (например для компиляции sass)

$ npm run watch

Обновление версии приложения с автоматическим коммитом и созданием тега

$ ./node_modules/.bin/mversion <version> -m "Update to %s"

Структура проекта

• node_modules - папка, куда устанавливаются пакеты nodejs
• output - папка, куда происходит выгрузка проекта
• web - папка, где ведётся разработка
  • bower_components - папка, куда устанавливаются пакеты bower
  • css - папка со стилями, которые не требуют препроцессинга less
    • ie8.css - стили для IE8
    • sys.css - стили для системных страниц (напр. для web/legacy.html)
  • fonts - папка с кастомными шрифтами
    • custom-font - пример кастомного шрифта
      • ...
  • gallery - папка для изображений галереи
    • works - альбом галереи
      • ...
    • point.png - прозрачный пиксель
  • img - папка с изображениями проекта
    • ...
  • js - папка со скриптами
    • app - папка с кастомными скриптами
      • page1.js - пример js-модуля
      • page2.js - пример js-модуля
    • adaptiveimage.js - модуль адаптивных изображений
    • app.js - шаблон модуля
    • bootstrap-helper.js - модуль для определения типов устройств
    • logger.js - логгирование
    • sandbox.js - модуль-песочница
    • share.js - модуль социальных кнопок
    • slideshow.js - модуль слайдшоу
    • translator.js - модуль переводов
  • less - стили, требующие препроцесснг less
    • bootstrap-slider - стили для bootstrap-slider
      • variables.less - настройки стилей bootstrap-slider
    • font-awesome - стили для font-awesome
      • variables.less - настройки стилей font-awesome
    • layout.less - стили страниц проекта
    • mixins.less - less mixins
    • styles.less - имопрт стилевых зависимостей
    • variables.less - настройки стилей
  • app.html - шаблон страницы
  • legacy.html - системная страница
  • page1.html - пример страницы
  • page2.html - пример страницы
  • page3.html - пример страницы
  • sandbox.html - страница-песочница
• .bowerrc - файл локальной конфигурации bower
• bower.json - конфигурация bower-пакета
• Gruntfile.js - конфигурация сборщика проекта Grunt
• package.json - конфигурация npm-пакета
• README.md - файл документации по проекту

Работа с проектом

Общие замечания

Файлы web/app.html и web/js/app.js являются шаблонами - их модификация не требуется ни при каких условиях.

Файлы web/sandbox.html и web/js/sandbox.js представляют из себя "песочницу". В эти файлы вносятся наработки, идеи и т.д., которые полезно иметь под рукой.

Файлы web/page*.html* и web/js/app/page*.js* являются примерами. По идее они не должны содержаться в Skel, но так как логика создания новых страниц в дочерних проектах не очевидна, решено их оставить.

Концепции использования:

• Cтраница может использовать несколько js-модулей одновременно. Пример - страницы web/page3.html (используются js-модули Page1 и Page2) и web/sandbox.html (используются js-модули Sandbox и Slideshow).

• Несколько страниц могут использовать один и тот же модуль. Примера нет, но можно предположить, что js-модуль Slideshow может потребоваться сразу на нескольких страницах проекта.

При экспорте проекта не экспортируются страница шаблона web/app.html и страница песочницы web/sandbox.html. Эти страницы не нужны в выгрузке.

Nginx config example

server {
    listen *:80;
    server_name project.lo;

    root /path/to/project;

    index index.html;
    autoindex on;

    access_log /var/log/nginx/project.access.log;
    error_log /var/log/nginx/project.error.log;

    set_real_ip_from 127.0.0.1;
    real_ip_header X-Forwarded-For;

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location ~* ^.+\.(html|css|less|js|txt|xml|ttf|svg|eot|woff|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|tar|wav|mp3|ogg|rtf)$ {
        access_log off;
        expires 1y;
    }

    location ~* ^.+\.(jpg|jpeg|gif|png|ico|bmp|swf|flv)$ {
        access_log off;
        expires 1y;
        add_header Cache-Control public;
    }
}