Grunt: jit-grunt: Plugin for the "protractor" task not found

Question

I am new to yeoman/grunt/bower and I am working on setting up a angularjs project with:

yo angular

I made some changes to gruntfile myself and recently I found protractor very useful and I wanted to add that to my project. I followed a lot of instructions online (like this one Integrating Protractor with Yeoman via Grunt 2 years ago) but I still cannot get protractor properly installed.

Here is my Gruntfile.js: (only showed relevant parts)

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

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Automatically load required Grunt tasks
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    ngtemplates: 'grunt-angular-templates',
    cdnify: 'grunt-google-cdn'
  });

  // Configurable paths for the application
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist'
  };

  // Define the configuration for all the tasks
  grunt.initConfig({

    // Project settings
    yeoman: appConfig,

    ...
    ...

    // Automatically inject Bower components into the app
    wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//
      },
      test: {
        devDependencies: true,
        src: '<%= karma.unit.configFile %>',
        ignorePath:  /\.\.\//,
        fileTypes:{
          js: {
            block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
              detect: {
                js: /'(.*\.js)'/gi
              },
              replace: {
                js: '\'{{filePath}}\','
              }
            }
          }
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }
    }, 

    ...
    ...

    // Test settings

    karma: {
      unit: {
        configFile: 'test/karma.conf.js',
        singleRun: true
      }
    },

    protractor: {
      options: {
        keepalive: true,
        configFile: 'protractor.conf.js'
      },
      run: {}
    }

  });

  grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'postcss:server',
      'connect:livereload',
      'watch'
    ]);
  });

  grunt.registerTask('test', [
    'clean:server',
    'wiredep',
    'concurrent:test',
    'postcss',
    'connect:test',
    'karma',
    'protractor:run'
  ]);
};

Here is my package.json:

{
  "name": "Website",
  "private": true,
  "devDependencies": {
    "autoprefixer-core": "^5.2.1",
    "compass": "^0.1.1",
    "grunt": "^0.4.5",
    "grunt-angular-templates": "^0.5.7",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-compass": "^1.0.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-cssmin": "^0.12.0",
    "grunt-contrib-htmlmin": "^0.4.0",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^2.1.2",
    "grunt-google-cdn": "^0.4.3",
    "grunt-jscs": "^1.8.0",
    "grunt-karma": "^0.12.2",
    "grunt-newer": "^1.1.0",
    "grunt-ng-annotate": "^0.9.2",
    "grunt-postcss": "^0.5.5",
    "grunt-protractor-runner": "^3.0.0",
    "grunt-svgmin": "^2.0.0",
    "grunt-usemin": "^3.0.0",
    "grunt-wiredep": "^2.0.0",
    "jasmine-core": "^2.4.1",
    "jit-grunt": "^0.9.1",
    "jshint-stylish": "^1.0.0",
    "karma": "^0.13.22",
    "karma-jasmine": "^0.3.8",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma2": "^0.13.22",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "^3.0.0",
    "time-grunt": "^1.0.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "karma start test/karma.conf.js",
    "install": "node node_modules/protractor/bin/webdriver-manager update"
  },
  "dependencies": {}
}

I used jit-grunt ( as default now ) so it will load those plugins for me.

I have surely installed protractor and grunt-protractor-runner following the post I mentioned above and other sources like official website of protractor and grunt-protractor-runner. In my local node_modules:

$ ls node_modules/ | grep protractor
grunt-protractor-runner
protractor

But no matter what I do, I am still getting the error from grunt:

$ grunt protractor

jit-grunt: Plugin for the "protractor" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

Warning: Task "protractor" failed. Use --force to continue.

And running grunt test:

$ grunt test

Running "clean:server" (clean) task
>> 1 path cleaned.

...
...

Running "karma:unit" (karma) task
01 05 2016 15:03:51.048:WARN [watcher]: Pattern 
01 05 2016 15:03:51.094:INFO [karma]: Karma v0.13.22 server started at http://localhost:8080/
01 05 2016 15:03:51.112:INFO [launcher]: Starting browser PhantomJS
01 05 2016 15:03:52.259:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#68w8QMUehAm8AAf2AAAA with id 17032121
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 2 of 2 SUCCESS (0.003 secs / 0.026 secs)

jit-grunt: Plugin for the "protractor" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

Warning: Task "protractor:run" failed. Use --force to continue.

Aborted due to warnings.

Is there something I missed? I have been stuck with this for days. Any help is much appreciated.

Answer 1

The accepted answer follows an anti-pattern and defeats the purpose of the JIT (Just In Time) plugin loader for Grunt.

The goal of jit-grunt is to automatically load the required plugins and thus makes the use of grunt.loadNpmTasks obsolete.

The documentation for jit-grunt explains how the plugin loader is looking for the plugins:

Will automatically search for the plugin from the task name. Search in the following order:

1. node_modules/grunt-contrib-task-name
2. node_modules/grunt-task-name
3. node_modules/task-name

Since you have a task protractor, the plugin loader will try to find a corresponding plugin in this order:

1. grunt-contrib-protractor
   • doesn't exist in packages.json
2. grunt-protractor
   • doesn't exist in packages.json
3. protractor
   • found in packages.json!
   • unfortunately there is a mismatch
   • the required plugin for the task protractor is grunt-protractor-runner

In this case we can set the static mapping, as the error message points out. We do this in the format taskname: grunt_plugin_name:

// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    ngtemplates: 'grunt-angular-templates',
    cdnify: 'grunt-google-cdn',
    protractor: 'grunt-protractor-runner'
});

This is an old question, but I hope my answer can help other people who encounter this problem.

Answer 2

Thanks for the suggestion and hint from @theaccordance. Turns out that JIT-grunt probably has some difficulty loading grunt-protractor-runner.

Adding grunt.loadNpmTasks('grunt-protractor-runner'); in Gruntfile.js will resolve the problem.