Custom JS

[FlatspinZA]

Please forgive me if this is a stupid question - I have just taken a knock on the head and I am really slowed up at the moment.

I have grunt running in a terminal and my app.css compiles perfectly every time I make a change to the scss files.

I am trying to include waypoints.js - I have added waypoints.min.js and scripts.js (with the custom waypoints scripts) to the js/custom folder as directed - probably I am doing something horribly wrong.

These are not compiling to app.js - probably GIGO.

Please help me by setting me in the right direction.

[manwithacat]

That sounds correct. If you have a look at the Gruntfile.js, the bit which builds app.js is:

concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: [
          'js/foundation/js/foundation.min.js',
          'js/custom/*.js'
        ],

        dest: 'js/app.js'
      }

The line 'js/custom/*.js' is looking for all files ending .js in the custom directory. So it sounds like you're on the right track.

[FlatspinZA]

Hi, thanks.

I looked at the app.js file and none of my code is in that file. I even created another line in the Gruntfile.js to add js/custom/*.min.js in case that was my problem.

Either way, without or without my extra line of code, my code is not getting inlcuded in app.js, which is why I was wondering what I am doing wrong as I am running the grunt "watch" task which compiles my app.css from the scss - surely it should be compiling the custom js at the same time?

[manwithacat]

Aha... the watch task doesn't perform the concat task.

grunt.registerTask('build', ['sass', 'copy', 'uglify', 'concat']);
grunt.registerTask('default', ['watch']);

Run grunt build and you should be in business.

[FlatspinZA]

That worked the bomb, thank you very much.

Only problem I had initially was my scripts.js being added to the app.js file before the waypoints.min.js file, which obviously then didn't allow my script to call the waypoints.js functions.

I manually swapped them around and it worked.

Added 'js/custom/waypoints.min.js',
before
'js/custom/*.js'
in the gruntfile.js which then loaded them in the correct order.

EDIT: Reopened this for any more bright spark advice since I thought it would be rude just to close it without at least giving my benefactor the chance to impart more gems of wisdom.

[tirnovanuaurel]

Try this:

(function ($, root, undefined) {
  $(function () {
    'use strict';
    // DOM ready, take it away - put your waypoints call here

  });
})(jQuery, this);

or in gruntfile

concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: [
          'js/foundation/js/foundation.min.js',
          'js/custom/script-01.js',
          'js/custom/script-02.js',
...etc...
          'js/custom/custom.js', //last one with custom
        ],
        dest: 'js/app.js'
      }
    }

Personally, never encountered this problem (using 1'st variant in custom.js on all sites).