Приложение на Express.js + Sass/Compass + CoffeeScript + Haml

Добрый день!
Решил поделиться опытом перехода с Middleman (Ruby) на Express.js (Node.js) в качестве инструмента front-end разработчика.
Сам я занимаюсь back-end, так что статья может выйти не слишком актуальной, но, надеюсь, полезной хотя бы кому-нибудь.

Итак, задача: сделать приложение на Node.js с поддержкой компиляции Sass(Compass), CoffeeScript и Haml «на лету» при редактировании соответствующих файлов. Для этого будем использовать Express и Grunt для запуска веб-сервера и выполнения задач компиляции соответственно.

Для начала, нам нужен сам Node. Я предпочитаю для его установки и контроля версий использовать NVM (аналог RVM для Ruby).

Ставим NVM:

curl https://raw.github.com/creationix/nvm/master/install.sh | sh 

И подключаем его:

source ~/.nvm/nvm.sh 

Далее, ставим и подключаем последнюю версию Node (на данный момент она не вышла из 0.10.*, поэтому для установки последней версии достаточно прописать):

nvm install 0.10 nvm use 0.10 

Теперь можно использовать сам Node вместе с его менеджером пакетов npm. Ставим Express и Grunt глобально:

npm install -g express npm install -g grunt-cli 

Создаем express-приложение с помощью express <проект> -e:

express develop -e cd develop 

Опция -e устанавливает базовым шаблонизатором ejs, который будет спокойно рендерить обычные html, в которые мы будем компилировать наш haml. Для того, чтобы показать приложению, что нужно делать именно так, добавим в app.js в настройки app строку

app.engine('html', require('ejs').renderFile); 

Сразу установим все нужные пакеты через npm:

npm install grunt-contrib-watch grunt-contrib-sass grunt-contrib-compass grunt-contrib-coffee grunt-contrib-haml grunt-express-server --save-dev 

(опция —save-dev пропишет нужные зависимости в нашем package.json, чтобы потом их не потерять)

Теперь установим все остальные зависимости Express’а:

npm install 

Ну и последнее: создаем файл Gruntfile, в котором будем описывать нужные таски:

touch Gruntfile.js 

Подготовку закончили! Теперь — за сами таски. Пишем в Gruntfile что-то типа

module.exports = function(grunt) {    grunt.initConfig({     pkg: grunt.file.readJSON('package.json'),     // здесь будут настроенные нами таски   });    // здесь будут подключаться необходимые модули   grunt.loadNpmTasks('');    // а здесь - вызываться таски   grunt.registerTask('default', ['']);  }; 

И начинаем заполнять его. Сперва подключим все нужные модули в loadNpmTasks:

  grunt.loadNpmTasks('grunt-contrib-watch');   grunt.loadNpmTasks('grunt-contrib-haml');   grunt.loadNpmTasks('grunt-contrib-sass');   grunt.loadNpmTasks('grunt-contrib-compass');   grunt.loadNpmTasks('grunt-contrib-coffee');   grunt.loadNpmTasks('grunt-express-server'); 

Теперь можем начать описывать задания (таски) компиляции:
Все вью будем хранить в папке views/, все js и coffee — в javascripts/, все css и scss — в stylesheets/.
Создадим несколько файлов для примера:

touch public/javascripts/x.coffee touch public/stylesheets/s.scss touch views/index.haml 

И удалим ненужный нам index.ejs, созданный по умолчанию:

rm views/index.ejs 

Все coffee можно скомпилировать в один js, чем мы воспользуемся.
Набор тасков для компиляции будет выглядеть следующим образом:

    haml : {       dist: {         files: {           'views/index.html': 'views/index.haml'         }       }     },     sass : {       dist: {         files: {           'public/stylesheets/s.css': 'public/stylesheets/s.scss'         }       }     },     coffee : {        compile: {         files: {           'public/javascripts/x.js': ['public/javascripts/*.coffee']         }       }     } 

! Чтобы сработал таск haml, в системе должен быть установлен и доступен гем haml (и ruby, конечно)!

Чтобы использовать Compass вместо Sass, нужно заменить соответствующий таск (sass) на

  compass: {       dev: {         options: {           sassDir: ['public/stylesheets'],           cssDir: ['public/stylesheets'],           environment: 'development'         }       }     }, 

Теперь добавим таски к выполнению в блок registerTask:

grunt.registerTask('default', ['sass', 'coffee', 'haml']); 

(compass вместо sass при необходимости)

Выполним grunt и увидим, что таски успешно выполнились, и в соответствующих папках теперь можно найти index.html, s.css и x.js.
Осталось только включить сервер и сделать процесс рекомпиляции автоматическим с помощью watch. Gruntfile получится таким:

module.exports = function(grunt) {    grunt.initConfig({     pkg: grunt.file.readJSON('package.json'),     // здесь будут настроенные нами таски     watch : {       haml : {         files : 'views/*.haml',         tasks : 'haml'       },       coffee : {         files : 'public/javascripts/*.coffee',         tasks : 'coffee'       },       sass : {         files : 'public/stylesheets/*.scss',         tasks : 'sass'       },       //  compass : {       //    files: ['public/stylesheets/*.{scss,sass}'],       //    tasks: ['compass']       //  }     },     express : {       dev: {         options: {           script: 'app.js'         }       }     },     haml : {       dist: {         files: {           'views/index.html': 'views/index.haml'         }       }     },     sass : {       dist: {         files: {           'public/stylesheets/s.css': 'public/stylesheets/s.scss'         }       }     },     compass: {       dev: {         options: {           sassDir: ['public/stylesheets'],           cssDir: ['public/stylesheets'],           environment: 'development'         }       }     },     coffee : {        compile: {         files: {           'public/javascripts/x.js': ['public/javascripts/*.coffee']         }       }     }   });    // здесь будут подключаться необходимые модули   grunt.loadNpmTasks('grunt-contrib-watch');   grunt.loadNpmTasks('grunt-contrib-haml');   grunt.loadNpmTasks('grunt-contrib-sass');   grunt.loadNpmTasks('grunt-contrib-compass');   grunt.loadNpmTasks('grunt-contrib-coffee');   grunt.loadNpmTasks('grunt-express-server');    // а здесь - вызываться таски   grunt.registerTask('default', ['sass', 'coffee', 'haml', 'express', 'watch']); }; 

(Соответственно, для использования Compass нужно будет поменять таск sass на compass в описании таска watch и в регистрации таска default)

Ну вот, теперь с помощью grunt можно запустить наше приложение, и все необходимые файлы будут компилироваться при изменении исходника.

Спасибо прочитавшим!
В следующих статьях планирую поделиться своим опытом знакомства с Sails.js (Rails-like MVC на Node) и прочими радостями server-side JS.