Menu icon Foundation
Custom javascript not working

I've added inside config.yml path to the JS document, where I keep some custom code. 

- "src/assets/js/custom.js"

Custom script as for the test, looks very simple there is just console.log there.

$(function() {
    console.log('bang bang');
});

After re-watching my foundation project I can see that setting inside config.yml works fine. Console.log is compiled into app.js. 

NEVERTHELES script does not work... Console does not show anything. What is the problem? Have anyone got in trouble like this? PLEASE HELP

 

javascriptfoundation6customjs

I've added inside config.yml path to the JS document, where I keep some custom code. 

- "src/assets/js/custom.js"

Custom script as for the test, looks very simple there is just console.log there.

$(function() {
    console.log('bang bang');
});

After re-watching my foundation project I can see that setting inside config.yml works fine. Console.log is compiled into app.js. 

NEVERTHELES script does not work... Console does not show anything. What is the problem? Have anyone got in trouble like this? PLEASE HELP

 

Rafi Benkual 2 months ago

Can you share what your config path looks like? Also, what version of Foundation? 

Kuba 2 months ago

Here is the code:

# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"
  - "ios >= 7"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"  
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "bower_components/foundation-sites/scss"
    - "bower_components/motion-ui/src"
  # Paths to JavaScript libraries, which are combined into one file
  javascript:
    # Libraries required by Foundation
    - "bower_components/jquery/dist/jquery.js"
    - "bower_components/what-input/dist/what-input.js"
    # Core Foundation files
    - "bower_components/foundation-sites/js/foundation.core.js"
    - "bower_components/foundation-sites/js/foundation.util.*.js"
    # Individual Foundation components
    # If you aren't using a component, just remove it from the list
#    - "bower_components/foundation-sites/js/foundation.abide.js"
#    - "bower_components/foundation-sites/js/foundation.accordion.js"
#    - "bower_components/foundation-sites/js/foundation.accordionMenu.js"
#    - "bower_components/foundation-sites/js/foundation.drilldown.js"
#    - "bower_components/foundation-sites/js/foundation.dropdown.js"
#    - "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
#    - "bower_components/foundation-sites/js/foundation.equalizer.js"
#    - "bower_components/foundation-sites/js/foundation.interchange.js"
#    - "bower_components/foundation-sites/js/foundation.magellan.js"
#    - "bower_components/foundation-sites/js/foundation.offcanvas.js"
#    - "bower_components/foundation-sites/js/foundation.orbit.js"
#    - "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
#    - "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
#    - "bower_components/foundation-sites/js/foundation.reveal.js"
#    - "bower_components/foundation-sites/js/foundation.slider.js"
    - "bower_components/foundation-sites/js/foundation.sticky.js"
#    - "bower_components/foundation-sites/js/foundation.tabs.js"
#    - "bower_components/foundation-sites/js/foundation.toggler.js"
#    - "bower_components/foundation-sites/js/foundation.tooltip.js"
#    - "bower_components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js"
    # Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "src/assets/js/app.js"
    - "src/assets/js/custom.js"
#    - "bower_components/slick-carousel/slick/slick.js"

Kuba 2 months ago

@RafiBenkual, any suggestions? 

Michal Pandyra 2 months ago

Hi Kuba,

When you compile the script are you starting the watcher, or are you running a build on the script? Not sure which version of Foundation you're running, but building production actually runs a babel plug-in that strips out any lines containing calls to console.log() and console.dir which are assumed to be for development purposes only and stripped in final minified output.

Kuba about 2 months ago

@MichaPandyra

It does not work even though I run or build. I am runnig 6.3.0 version, and I don't think striping out console.log() could be a problem, I can still see the line in the app.js output. No matter if there is a console.log() or a proper script, it is still not working...

The output looks like this, I have cut the bottom part, upper part contain foundation scripting. 

  /**
   * Helper function to calculate em values
   * @param Number {em} - number of em's to calculate into pixels
   */
  function emCalc(em) {
    return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
  }

  // Window exports
  Foundation.plugin(Sticky, 'Sticky');
}(jQuery);
"use strict";
'use strict';

$(document).foundation();

(function () {
    conosle.log('not working');
})();

 

damao 28 days ago

Yes, I have the same issue, And get an error like this "Failed to load resource: the server responded with a status of 404 (Not Found)"

custom javascript file not found

 

path of check.js