Application on Express.js + Sass / Compass + CoffeeScript + Haml

Good day!
I decided to share the experience of switching from Middleman (Ruby) to Express.js (Node.js) as a front-end developer tool.
I myself am engaged in the back-end, so the article may not be very relevant, but, I hope, useful at least to someone.

So, the challenge: make an application on Node.js with support for compiling Sass (Compass), CoffeeScript and Haml on the fly while editing the corresponding files. To do this, we will use Express and Grunt to run the web server and perform compilation tasks, respectively.

First we need the Node itself. I prefer to use NVM (an RVM equivalent for Ruby) for its installation and version control.

We put the NVM:

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

And connect it:

 source ~/.nvm/nvm.sh 

')
Next, we install and connect the latest version of Node (at the moment it is not out of 0.10. *, Therefore, to install the latest version, it is enough to register):

 nvm install 0.10 nvm use 0.10 

Now you can use Node itself with its npm package manager. We put Express and Grunt globally:

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

Create an express application using express <project> -e:

 express develop -e cd develop 

The option -e installs the basic ejs template engine, which will quietly render the usual html, into which we will compile our haml. In order to show the application what to do in this way, add a line to app.js in the app settings

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

Immediately install all the necessary packages via npm:

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

(the option --save-dev will prescribe the necessary dependencies in our package.json so that you do not lose them later)

Now let's install all the other Express dependencies:

 npm install 

Well and the last: we create the Gruntfile file in which we will describe the necessary tasks:

 touch Gruntfile.js 

Preparing finished! Now - for the task themselves. We write something in type Gruntfile

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //      }); //      grunt.loadNpmTasks(''); //   -   grunt.registerTask('default', ['']); }; 

And we begin to fill it. First, we connect all the necessary modules to 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'); 

Now we can start to describe the tasks (tasks) of the compilation:
All view will be stored in the views / folder, all js and coffee - in javascripts /, all css and scss - in stylesheets /.
Create several files for an example:

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

And delete the index.ejs we don't need, created by default:

 rm views/index.ejs 

All coffee can be compiled into one js, which we will use.
A set of tasks for compilation will look like this:

  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'] } } } 

! In order for the haml task to work, the haml (and ruby, of course) gem must be installed and available in the system!

To use Compass instead of Sass, you need to replace the corresponding task (sass) with

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

Now add tasks to the execution in the registerTask block:

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

(compass instead of sass if necessary)

We will execute grunt and see that the tasks have been successfully executed, and in the corresponding folders you can now find index.html, s.css and x.js.
It remains only to turn on the server and make the recompilation process automatic with watch. Gruntfile will turn out like this:

 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']); }; 

(Accordingly, to use Compass, you will need to change the sass task to the compass in the watch task description and in the default task registry)

Well, now with the help of grunt you can run our application, and all the necessary files will be compiled when the source is changed.

Update: Livereload
Task watch can be configured on the livereload page.
To do this, add the corresponding options to the watch task description:

  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'] } } 

And include the script livereload on the page, through the default port 35729

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

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

Thanks for reading!
In the following articles I plan to share my experience of acquaintance with Sails.js (Rails-like MVC on Node) and other joys of server-side JS.