Grunt errors on javascripts

popsy · September 18, 2013, 8:04am

When I put this javascript “jquery.gomap-1.3.2.js” into the plugins folder but Grunt gives this error:

Linting assets/... ...ERROR
>> Too many errors. (100% scanned).

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

and doesn’t process it. Notice that, before Grunt, I’ve used that js many times and always works. Some errors are: Expected ===, Mixed spaces an tabs, Trailing whitespaces, Expected { and instead saw this,… I can’t manually fix all them.

How can do?

enollo · September 18, 2013, 8:13am

Near the top of your Gruntfile you will see this:

jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        'assets/js/*.js',
        'assets/js/plugins/*.js',
        '!assets/js/scripts.min.js'
      ]
    }

Below !assets/js/scripts.min.js add !assets/js/plugins/jquery.gomap-1.3.2.js to tell jshint to ignore that file. You should ignore most, if not all, third party scripts.

popsy · September 18, 2013, 8:20am

Ok, but with your solution I will have to include manually the script:

<script type="text/javascript" src="...../jquery.gomap-1.3.2.min.js"></script>

while I’d like to process all the js. Is there a way to do that? Maybe forcing the processing?

I’ve already put other scripts in plugins folder and grunt processes them right. I don’t like to have some processed scripts and others to include manually.

Why I “should ignore most, if not all, third party scripts” ?

enollo · September 18, 2013, 8:24am

If you have the default Gruntfile that comes with roots, any *.js files in the assets/js/plugins directory will be minified and concatenated into scripts.min.js, which is enqueued by roots.

This is done by the uglify task of the Gruntfile which is separate from the jshint task

PS. Look into wp_enqueue_script and wp_enqueue_style instead of hacking the header manually.

popsy · September 18, 2013, 8:55am

Are you sayng that also if jshint gives error, the script will be concatenated in script.min.js anyway? It’s not my case. After the error posted in 1st post the script is not concatenated…

What’s the reason why I “should ignore most, if not all, third party scripts” ?
thanks

enollo · September 18, 2013, 8:59am

You should not run third party scripts through jshint as they will most likely overload you with errors depending on your config. Even the bootstrap js files will output errors which is why they are not included in the jshint task.

So if you ignore that script as I stated originally, there will be no errors and it will be concatenated.

Have you tried out what I suggested?

enollo · September 18, 2013, 9:04am

Most of the errors you mentioned are related to coding conventions and do not necessarily mean there is a problem with that script. JSHint is highly customizable so you can turn certain warnings on or off depending on what works for you and your team

popsy · September 18, 2013, 11:35am

Ops! Sorry i didn’t see that part! It’s ok enollo, thanks

popsy · September 18, 2013, 12:53pm

Ops [2]
I hadn’t notice that now I have a script.min.js concatenated with all the script but it doesn’t work! From the inspector I see that the script.min.js is there but it seems to not load any javascripts! No one of the script work on the site. Very strange.
If I delete from plugin folder the jquery.gomap.js all is back to working

popsy · September 18, 2013, 2:44pm

There’s something wrong. I confirm what written in my previous post. Infact, if I load the .js files with wp_enqueue_script and remove them from the grunt uglify (adding ‘!’ before assets/js/plugins/*.js) all works well! Where am I wrong?

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/*.js',
        ...

enollo · September 18, 2013, 6:38pm

Can you post your full Gruntfile?

popsy · September 19, 2013, 7:51am

It’s here.

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

  grunt.initConfig({
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        'assets/js/*.js',
        'assets/js/plugins/*.js',
        '!assets/js/scripts.min.js',
        '!assets/js/plugins/jquery.fancybox.js',
        '!assets/js/plugins/jquery.gomap-1.3.2.js',
        '!assets/js/plugins/jquery.validate.js'
      ]
    },
    recess: {
      dist: {
        options: {
          compile: true,
          compress: true
        },
        files: {
          'assets/css/main.min.css': [
            'assets/less/app.less'
          ]
        }
      }
    },
    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'
          ]
        }
      }
    },
    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'
        ],
        tasks: ['recess', '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-recess');   grunt.loadNpmTasks('grunt-wp-version');

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

};

With the above nothing js works. While if I exclude the uglifying of all the js (using ‘!assets/js/plugins/*.js’,) and loading with wp_enqueue_script all works.

enollo · September 19, 2013, 7:49pm

I cannot see anything wrong with the Gruntfile. Without creating a project to test this out I cannot help further. If you have the site live somewhere I am willing to take a look, otherwise I suggest getting help in other forums as this does not look specific to the Roots theme.

popsy · September 20, 2013, 9:03am

I’ve uploaded the project here: http://bit.ly/6hgf7
All the scripts/js are concatenated in script.min.js but don’t work. For example: Fancybox is applied on the gallery on the right. Clicking an image it doesn’t zoom with Fancybox. But with browser inspector you can see that fancybox script is concatenated in script.min.js! While if I manually load the in head.php it works.

Foxaii · September 20, 2013, 11:27am

Please check your console for errors before posting for help. Exclude the Google Maps API from Grunt uglify and add it to the head instead.

popsy · September 20, 2013, 3:05pm

I’m going mad. If I exclude the third part scripts from uglify I have no error in the console. Then I deduct that there are no problem with all the scripts. When I concatenate them with uglify starts the error odyssey. Then, the problem seems to be uglify/grunt/etc.

@Foxaii: I’ve done as you said:
added `‘!assets/js/plugins/jquery.gomap-1.3.2.js’ in Gruntfile
and added

wp_enqueue_script('google_map_api', 'http://maps.google.com/maps/api/js?sensor=false', false);
wp_enqueue_script('gomap', get_template_directory_uri() . '/assets/js/plugins/jquery.gomap-1.3.2.js', false);

in scripts.php
I get (in console) this error:

TypeError: jQuery.validator is undefined

(Notice again that nothing of these errors come out when I don’t use grunt-uglify.)

ben · September 20, 2013, 3:27pm

I’m going mad trying to understand what the problem is here. Also, next time don’t create 3 different topics for issues that are all related.

What does jQuery.validator have to do with the gomap plugin?

This is what you need to do.

Enqueue only the Google Maps API JS in lib/scripts.php that’s from maps.google.com. Don’t enqueue any other scripts that you’re using.
Exclude the jQuery plugins you’re adding to the plugins folder from jshint in the Gruntfile.js
Don’t touch anything to do with uglify
Everything works!

If you’re still getting errors after that, what are they? Are the plugins you’re trying to use not compatible with the newer jQuery versions (1.9.x+)? If so, you need to add jQuery Migrate.

enollo · September 20, 2013, 5:21pm

What Ben and Nick said is absolutely correct.

Either way, I took a look at your site. As of right now, the only error in the console is:

ReferenceError: Can't find variable: google
```

 1. Ben mentioned it, but I will say it again. I did not see you enqueue the Google Maps API anywhere in source, so this is most likely an issue. When using wp_enqueue_script make sure this script is added to `<head>`.
 2. The latest version of goMap plugin is from 2011 and works with jQuery 1.8.2. You might need to include jQuery Migrate. (On that note, I do not see an advantage to using jQuery for Google Maps, the vanilla JS to initialize a simple map is not very long or complex).
 3. Make sure you reference jQuery.validator after it is declared. 
 4. Read over what Ben and Nick said above

popsy · September 23, 2013, 2:35pm

@benword: Hi Ben, that is exactly what I’ve done and everything (my scripts, fancybox, jquery.validate, gomap) not works!
You can check yourself. In the console there’s

TypeError: jQuery.validator is undefined

Sorry if I repeat me but if I enqueue all the scripts in scripts.php (without passing from grunt/uglify) everything works! Then I deduct that the problem can’t be in newer jquery version, but seems to be in grunt… That’s why I’m here

popsy · September 23, 2013, 2:58pm

@enollo: hi enollo:

that was a test. fixed
i’ve tried to not use gomap but the scripts don’t works in the same way
I don’t understand what you mean. I use jquery.validate for the form validation and don’t know what is that jQuery.validator
read my above reply to ben
thanks