grunt-usemin

Grunt usemin Warning: Object has no method 'contains'


I am using Grunt task runner, and the Gruntfile.js" is as follows:

'use strict';

module.exports = function(grunt){

require('time-grunt')(grunt);

require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin'
});

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    jshint: {
        options: {
            jshintrc: '.jshintrc',
            reporter: require('jshint-stylish')
        },
        all: {
            src: ['Gruntfile.js', 'app/scripts/{,*/}*.js']
        }
    },
    useminPrepare: {
        html: 'app/menu.html',
        options: {
            dest: 'dist'
        }
    },

    concat: {
        options: {
            separator: ';'
        },
        dist:{}
    },

    uglify:{
        dist:{}
    },

    cssmin: {
        dist:{}
    },

    filerev: {
        options: {
            encoding: 'utf8',
            algorithm: 'md5',
            length: 20
        },
            release: {
                files:[{
                src: ['dist/scripts/*.js', 'dist/styles/*.css']
            }]
        }
        
    },

    usemin: {
        html: ['dist/*.html'],
        css: ['dist/styles/*.css'],
        options: {
            assetsDirs: ['dist', 'dist/styles']
        }
    },

    copy: {
        dist: {
            cwd: 'app',
            src: ['**', '!styles/**/*.css', '!scripts/**/*.js'],
            dest: 'dist',
            expand: true
        },
        fonts: {
            files: [
                {
                    expand: true,
                    dot: true,
                    cwd: 'bower_components/bootstrap/dist',
                    src: ['fonts/*.*'],
                    dest: 'dist'
                },
                {
                    expand: true,
                    dot: true,
                    cwd: 'bower_components/font-awesome',
                    src: ['fonts/*.*'],
                    dest: 'dist'
                }
            ]
        }

    },

    clean: {
        build:{
            src: ['dist/']
        }
    }

});

grunt.registerTask('build', ['clean', 'jshint', 'useminPrepare', 'concat', 'cssmin', 'uglify', 'copy', 'filerev', 'usemin']);
grunt.registerTask('default', ['build']);



};

The problem is that when the grunt is executing usemin, it shows the following warning and aborts the task:
enter image description here

I cannot figure out exactly where the problem is and therefore I don't know how many more codes do I have to give. I am a beginner.

Update:

here is my own script that I used in the project:

'use strict';

angular.module('confusionApp', []).controller('menuController', function(){
        var dishes=[
                                                 {
                                                   name:'Uthapizza',
                                                   image: 'images/uthapizza.png',
                                                   category: 'mains',
                                                   label:'Hot',
                                                   price:'4.99',
                                                   description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                                                   comment: ''
                                                },
                                                {
                                                   name:'Zucchipakoda',
                                                   image: 'images/zucchipakoda.png',
                                                   category: 'appetizer',
                                                   label:'',
                                                   price:'1.99',
                                                   description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
                                                   comment: ''
                                                },
                                                {
                                                   name:'Vadonut',
                                                   image: 'images/vadonut.png',
                                                   category: 'appetizer',
                                                   label:'New',
                                                   price:'1.99',
                                                   description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
                                                   comment: ''
                                                },
                                                {
                                                   name:'ElaiCheese Cake',
                                                   image: 'images/elaicheesecake.png',
                                                   category: 'dessert',
                                                   label:'',
                                                   price:'2.99',
                                                   description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
                                                   comment: ''
                                                }
                                            ];
        this.dishes = dishes;
        this.tab = 1;
        this.filtText = '';
        this.select = function(setTab){
          this.tab = setTab;

          if(setTab === 2){
            this.filtText = "appetizer";
          }
          else if(setTab === 3){
            this.filtText = "mains";
          }
          else if(setTab === 4){
            this.filtText = "dessert";
          }
          else{
            this.filtText = "";
          }
        };
        this.isSelected = function(isTab){
          if(this.tab === isTab){
            return true;
          }
          return false;
        };
    });
Update

This is the stack trace of the error that I got.

Running "usemin:html" (usemin) task
Warning: Object  has no method 'contains' Use --force to continue.
TypeError: Object  has no method 'contains'
at replaceWith (E:\Study\Front End JS Framework         AngularJS\conFusion\node_modules\grunt-usemin\lib\fileprocessor.js:170:16)
at null.<anonymous> (E:\Study\Front End JS Framework AngularJS\conFusion\node_modules\grunt-usemin\lib\fileprocessor.js:157:45)
at Array.forEach (native)
at replaceBlocks (E:\Study\Front End JS Framework AngularJS\conFusion\node_modules\grunt-usemin\lib\fileprocessor.js:155:15)
at FileProcessor.process (E:\Study\Front End JS Framework AngularJS\conFusion\node_modules\grunt-usemin\lib\fileprocessor.js:239:45)
at E:\Study\Front End JS Framework AngularJS\conFusion\node_modules\grunt-usemin\tasks\usemin.js:141:31
at Array.forEach (native)
at E:\Study\Front End JS Framework AngularJS\conFusion\node_modules\grunt-usemin\tasks\usemin.js:135:13
at Array.forEach (native)
at Object.<anonymous> (E:\Study\Front End JS Framework AngularJS\conFusion\node_modules\grunt-usemin\tasks\usemin.js:130:16)

Solution

  • The problem lies with the usemin version that you are using. It turns out, changing your usemin version from 3.1.1 to 3.0.0 in your package.json solves the problem. My best bet is that there is no problem with your code but with the fileprocessor.js file in your usemin. Changing the version solves the problem.

    Change usemin version on your package.json and run npm install.