1

Тема: Brunch - модульная сборка сайта [с использованием хипстерских штучек]

Intro

Захотелось мне тут похипстовать и посмотреть на чём нынче модно лабать сайты с использованием AngularJS. Полазив по сайтам я нашёл интересную комбинацию:

  • html отстой, будем писать на jade.

  • css нормуль, но надо его допилить -> less. К тому же bootstrap предоставляется в виде пачки less модулей.

  • javascript нынче стал ассемблером, надо что-нибудь повыше уровнем: coffeescript. Говорят, он хорошо играет вместе с Angular.

В скелете одной такой связки использовался Brunch: что-то типа Makefile-ов, но на nodejs и с акцентом именно на сборку сайтов. Авторы и сообщества предоставляют кучу плагинчиков, которые сразу после уставновки добавляют новые возможности.

0. Новый проект

Т.к. большая часть этих конвертилок написана на nodejs и использует npm, то надо их поставить. Чтобы npm не размазывал своё барахло по всей системе надо создать для проекта модуль:

wiz@moon:~/src/brunch-tutorial$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (brunch-tutorial) 
version: (0.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (BSD-2-Clause) 
About to write to /home/wiz/src/brunch-tutorial/package.json:

{
  "name": "brunch-tutorial",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}


Is this ok? (yes) 

Теперь можно ставить brunch (и сразу дописать его в зависимости проекта):

wiz@moon:~/src/brunch-tutorial$ npm install brunch --save
...
brunch@1.7.4 node_modules/brunch # <- установилось в текущий каталог, что хорошо.
...

Чтобы далеко не ходить (и не устанавливать с рутом), сразу сделаем симлинк:

ln -s node_modules/.bin bin

Проект будет использовать AngularJS и Bootstrap. Хоть это и не (целиком) код, для них тоже есть аналог пакетов: bower. Ставим его и создаём пакет (уже для ресурсов):

$ npm install bower --save
...
$ bin/bower init
wiz@moon:~/src/brunch-tutorial$ bin/bower init
[?] name: brunch-tutorial
[?] version: 0.0.0
[?] description: 
[?] main file: 
[?] keywords: 
[?] authors: dpwiz <aenor.realm@gmail.com>
[?] license: MIT
[?] homepage: 
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'brunch-tutorial',
  version: '0.0.0',
  authors: [
    'dpwiz <aenor.realm@gmail.com>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

[?] Looks good? Yes

Теперь можно ставить ресурсы, bower позаботится о зависимостях:

wiz@moon:~/src/brunch-tutorial$ bin/bower install --save angular#~1.2 bootstrap#~3
..
angular#1.2.0-rc.2 bower_components/angular

bootstrap#3.0.0 bower_components/bootstrap
└── jquery#2.0.3

jquery#2.0.3 bower_components/jquery

Хотя Brunch предоставляет стартовые проекты, я решил сделать всё руками, чтобы понять что вообще происходит.

Для сборки проекта Brunch использует настройки из файла config.coffee (.js наверно тоже можно, но это не труъ). У меня получился такой:

exports.config =
  # See [url]http://brunch.io/#documentation[/url] for docs.
  files:
    javascripts:
      joinTo:
        'js/app.js': /^app/
        'js/vendor.js': /^(?!app)/

    stylesheets:
      joinTo: 'css/app.css'

Запчасти для bower-компонентов brunch вытащит самостоятельно.

Теперь надо поставить поддержку сборки наших хипстерских язычков:

npm install --save jaded-brunch less-brunch coffee-script-brunch javascript-brunch css-brunch

1. Приступая к работе

Наше барахло будет лежать в каталоге app.

Начнём с [s]html[/s] jade главной страницы, app/index.static.jade:

doctype 5
html(lang="en", data-ng-app="myApp")
  head
    title(ng-bind-template='Lolsies {{pageTitle}}')
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
    meta(name="viewport", content="width=device-width")
    link(rel="stylesheet", href="/css/app.css")
    //if lte IE 8
      script(src='//html5shiv.googlecode.com/svn/trunk/html5.js')

  body(ng-controller="MainCtrl", ng-cloak)
    .container
        h1 shmest: {{ test }}

    script(src="/js/vendor.js")
    script(src="/js/app.js")
    script.
        require("app")

Стили будут лежать в app/app.less:

body { margin: 10px; margin: 10px; border: 1px solid red; }

Код приложения положим в app/app.coffee:

app = angular.module "myApp", []

app.controller "MainCtrl", ($scope) ->
    $scope.test = "shmest"
    $scope.pageTitle = "demo"

2. Поехали!

Если теперь запустить "bin/brunch build", то в каталоге public появится index.html и товарищи.

Brunch может присматривать и пересобирать проект при изменении исходных файлов через "bin/brunch watch". Можно добавить "-s -p 8000" и он повесит сервер на раздачу статики. Надо только отметить, что сервер выдаёт index.html вместо 404 для тестирования html5 pushState адресов, что может вызывать странные ошибки в браузере если какие-то ресурсы должны были построиться, но этого не произошло. В случае проблем можно в соседнем окне зайти в public и запустить там "python -m SimpleHTTPServer". Кроме того, watch иногда залипает, поэтому я у себя в проектах использую огнеупорный и бронебойный inotifywait:

while true; do bin/brunch build; inotifywait -qq -e modify -r app; done

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

Каталоги node_modules и bower_components за собой таскать не надо, а лучше сделать init.sh, который сразу после чекаута развернёт весь проект:

npm install
ln -s node_modules/.bin bin
bin/bower install
bin/brunch build

UPD: Получившийся код (с подсветкой) можно посмотреть или форкнуть на битбакете.

Добавлено:

A.1 Настройка SublimeText.

Вместо навороченых IDE на жаве нынче принято использовать симпатичные редакторы, в частности ST.

Достаточно бросить в app.sublime-text ±универсальный файл проекта и в редакторе появится дерево каталогов и всё такое:

{
        "folders":
        [
                {
                        "folder_exclude_patterns":
                        [
                                "bower_components",
                                "node_modules"
                        ],
                        "path": "."
                }
        ]
}

CoffeeScript не любит когда смешивают табы с пробелами (да и в целом, табы - зло) поэтому лучше это приколотить:
в меню Preferences -> Settings - Default и там включить translate_tabs_to_spaces и выключить detect_indentation ибо нехрен.

Отредактировано dpwiz (2013-09-09 17:51:25)

mempty