Приложение на 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 можно запустить наше приложение, и все необходимые файлы будут компилироваться при изменении исходника.

Update: Livereload
Таск watch можно настроить на livereload страницы.
Для этого нужно добавить в описание таска watch соответствующие options:

 watch : {
      options: {
        livereload: true,
        nospawn: true
      },
      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']
      }
    }

И включить на страницу скрипт livereload, через порт по умолчанию 35729

%script{src:"//localhost:35729/livereload.js"}

===================

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