Using grunt to compile runtime assets in Play Framework app

build.sbt

...

playRunHooks <+= baseDirectory.map(base => Grunt())

...

description.md

This description works for a Play 2.2.x application.

At the root of the project exists package.json. It describes that you want to install grunt-cli, grunt-contrib-sass, and grunt-contrib-watch. You need to make sure you run npm install to pick up these packages. You'll probably need to install grunt-cli globally.

/gruntfile.js describes what you want grunt to watch. This is my least favorite part, since I have to designate where I'd like the compiled files to go. Seems a bit brittle.

In /project/Grunt.scala exists the hook which starts and stops grunt when you run the application.

A line needs to be added in build.sbt to let play know about the run hook.

Then you can initiate play run command and it should auto-compile on scss change.

For deployment, I have play installed on my server and initiate play start. If this is your case, then you just need to remember to run grunt sass beforehand.

Grunt.scala

import sbt._
import Keys._
import java.net._
import java.io.File
import play.PlayRunHook
 
/*
  Grunt runner should be in project directory to be picked up by sbt
*/
object Grunt {
  def apply(): PlayRunHook = {
 
    object GruntProcess extends PlayRunHook {
 
      var process: Option[Process] = None
 
      override def beforeStarted(): Unit = {
      }
      
      override def afterStarted(addr: InetSocketAddress): Unit = {
        Process("grunt sass").run
        process = Some(Process("grunt watch").run)
      }
 
      override def afterStopped(): Unit = {
        process.map(p => p.destroy())
        process = None
      }
    }
 
    GruntProcess
  }
}

gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            options: {
                update: false
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: 'app/assets',
                    src: ['**/*.scss'],
                    dest: 'target/scala-2.10/classes/public/',
                    ext: '.css'
                }]
            }
        },
        watch: {
            sass: {
                files: ['app/assets/**/*.scss'],
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

}

package.json

{
  "name": "app-name",
  "version": "1.0.0",
  "description": "",
  "repository": {
    "type": "git",
    "url": ""
  },
  "dependencies": {
    "grunt-cli": "^0.1.13",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-watch": "^0.6.1"
  }
}

I'm sorry I didn't see this response until now! With $ activator stage, I'm sure those css assets aren't being copied to the output package. I'm not sure how to do this. I've not had this problem since I have activator installed/running right on my server, at the moment, and $ activator run $ activator start uses the brittle directory.

Edit: updated the strikethrough part.