Adding grunt-responsive-video to Roots

I’ve been trying to add the Responsive Video package to my roots theme but I’m getting a few errors.

Here’s my Grunt.js file and the transcript from Grunt on save.

Any suggestions on what I may be missing? This is the first add-on to the roots grunt file I’ve made so I’m not that familiar with the process yet.

Running "watch" task
Waiting...OK
>> File "Gruntfile.js" changed.

>> Local Npm module "grunt-responsive-videos" not found. Is it installed?

Running "jshint:all" (jshint) task
>> 2 files lint free.

Running "uglify:dist" (uglify) task
File "assets/js/scripts.min.js" created.

Running "version" task
Versioning assets/css/main.min.css...OK
Versioning assets/js/scripts.min.js...OK
"lib/scripts.php" updated with new CSS/JS versions.

Done, without errors.
Completed in 1.281s at Tue Feb 11 2014 10:46:55 GMT-0500 (EST) - Waiting...
OK
>> File "assets/js/scripts.min.js" changed.

Completed in 0.000s at Tue Feb 11 2014 10:46:55 GMT-0500 (EST) - Waiting...

'use strict';
module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        'assets/js/*.js',
        '!assets/js/scripts.min.js'
      ]
    },
    less: {
      dist: {
        files: {
          'assets/css/main.min.css': [
            'assets/less/app.less'
          ]
        },
        options: {
          compress: true,
          // LESS source map
          // To enable, set sourceMap to true and update sourceMapRootpath based on your install
          sourceMap: false,
          sourceMapFilename: 'assets/css/main.min.css.map',
          sourceMapRootpath: '/app/themes/roots/'
        }
      }
    },
	responsive_videos: {
		myTask: {
			options: {
				sizes: [{
					width: 320,
					poster: true
				}],
				encodes: [{
					webm: [{
						'-vcodec': 'libvpx'
					}, {
						'-acodec': 'libvorbis'
					}, {
						'-crf': '12'
					}, {
						'-b:v': '1.5M',
					}, {
						'-q:a': '100'
					}]
				}]
			},
			files: [{
				expand: true,
				src: ['video/**.{mov,mp4}'],
				cwd: 'assets/',
				dest: 'tmp/'
			}]
		}
	},
    uglify: {
      dist: {
        files: {
          'assets/js/scripts.min.js': [
            'assets/js/plugins/bootstrap/transition.js',
            'assets/js/plugins/bootstrap/alert.js',
            'assets/js/plugins/bootstrap/button.js',
            'assets/js/plugins/bootstrap/carousel.js',
            'assets/js/plugins/bootstrap/collapse.js',
            'assets/js/plugins/bootstrap/dropdown.js',
            'assets/js/plugins/bootstrap/modal.js',
            'assets/js/plugins/bootstrap/tooltip.js',
            'assets/js/plugins/bootstrap/popover.js',
            'assets/js/plugins/bootstrap/scrollspy.js',
            'assets/js/plugins/bootstrap/tab.js',
            'assets/js/plugins/bootstrap/affix.js',
            'assets/js/plugins/*.js',
            'assets/js/_*.js'
          ]
        },
        options: {
          // JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
          // sourceMap: 'assets/js/scripts.min.js.map',
          // sourceMappingURL: '/app/themes/roots/assets/js/scripts.min.js.map'
        }
      }
    },
    version: {
      options: {
        file: 'lib/scripts.php',
        css: 'assets/css/main.min.css',
        cssHandle: 'roots_main',
        js: 'assets/js/scripts.min.js',
        jsHandle: 'roots_scripts'
      }
    },
    watch: {
      less: {
        files: [
          'assets/less/*.less',
          'assets/less/bootstrap/*.less',
          'assets/less/flexslider/*.less'
        ],
        tasks: ['less', 'version']
      },
      js: {
        files: [
          '<%= jshint.all %>'
        ],
        tasks: ['jshint', 'uglify', 'version']
      },
      livereload: {
        // Browser live reloading
        // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
        options: {
          livereload: true
        },
        files: [
          'assets/css/main.min.css',
          'assets/js/scripts.min.js',
          'templates/*.php',
          '*.php'
        ]
      }
    },
    clean: {
      dist: [
        'assets/css/main.min.css',
        'assets/js/scripts.min.js'
      ]
    }
  });

  // Load tasks
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-wp-version');
  grunt.loadNpmTasks('grunt-responsive-videos');

  // Register tasks
  grunt.registerTask('default', [
    'clean',
    'less',
    'uglify',
    'version',
    'responsive_videos',
  ]);
  grunt.registerTask('dev', [
    'watch'
  ]);

};

I got it to work a few moments after submitting this. I had the package installed globally instead of in the theme directory.

I did have issues adding it into the theme directory but that’s a different thread.

This is resolved.