Menu icon Foundation

Designer | Spartanburg, SC

UX Designer/Front End Developer

My Posts


My Comments

Michelle Child commented on Cristian's post 3 months

Hey Rafi,
I just tried to add owl carousel to my site per the instructions from the link above and I'm still getting 'OwlCarousel is not a function' when I try to initialize it. Has anything changed in the last few months that would make these instructions irrelevant?
 
Thanks,
Michelle

Michelle Child commented on Glenn Philp's post 3 months

Hi Glenn, 
Better late than never? Thank you so much for your help.

Michelle Child commented on Glenn Philp's post 9 months

 Glenn,
Thank you for your help, I really, really appreciate it. I'm doing my best to follow along, but I'm new to Foundation and Gulp and I'm following you only up to a certain point. 
Among the differences in our gulpfiles, I can't tell which parts I'd need to implement & which parts are custom to your build. I'll include my files below. Do I need to add to the section below, as you've done?
// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

We also have a some version differences. I'm using the latest version of the Foundation for Sites ZURB template and here are the versions I have running out of the box:

Node: v4.6.0
npm v2.15.9
Bower v1.8.0
Gulp CLI v1.2.2
Gulp Local v4.0.0-alpha.2
FoundationCLI v2.1.0

I'm nervous to update these because this is how they come out of the box, and I don't want to move too far from how Foundation is set to work. Is this the issue?
Files:
My package.json file already had the babel presets line, so I'm good there.
{
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official ZURB Template for Foundation for Sites.",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"devDependencies": {
"babel-preset-es2015": "6.3.13",
"babel-register": "6.7.2",
"browser-sync": "2.10.0",
"gulp": "gulpjs/gulp#4.0",
"gulp-autoprefixer": "3.1.0",
"gulp-babel": "6.1.2",
"gulp-cli": "1.2.1",
"gulp-concat": "2.5.2",
"gulp-cssnano": "2.1.0",
"gulp-extname": "0.2.0",
"gulp-if": "2.0.0",
"gulp-imagemin": "2.2.1",
"gulp-load-plugins": "1.1.0",
"gulp-sass": "2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "1.2.0",
"gulp-uncss": "1.0.1",
"js-yaml": "3.4.6",
"panini": "1.3.0",
"rimraf": "2.4.3",
"style-sherpa": "1.0.0",
"yargs": "3.8.0"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"babel": {
"presets": ["es2015"]
},
"private": true
}

 
My gulpfile.babel.js :
 
'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/*/.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
// Comment in the pipe below to run UnCSS in production
//.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
.pipe($.if(PRODUCTION, $.cssnano()))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: [
'what-input.js',
'footable.js'
]}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));

}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/*/')
.pipe($.if(PRODUCTION, $.imagemin({
progressive: true
})))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
});
done();
}

// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages//*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/
/.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/
/.scss').on('all', gulp.series(sass, browser.reload));
gulp.watch('src/assets/js//*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/
/').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/
*').on('all', gulp.series(styleGuide, browser.reload));
}

My Config.yml 
# 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"

# 3rd Party Frameworks 
- "bower_components/footable/compiled/footable.js"

# Paths to your own project code are here
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"

And I'm calling it on my app.js with 
$(document).foundation()

jQuery(function($){
$('.table').footable();
});
Thanks again.

Michelle Child commented on Glenn Philp's post 9 months

+1 to Sergey..
 
I specified in config.yml -- 
- "bower_components/footable/compiled/footable.js"
 
In Gulpfile.babel.js --
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: [
'what-input.js',
'footable.js'
]}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));

}
 
The result is still this error message: 
app.js:19876 Uncaught ReferenceError: FooTable is not defined
at app.js:19876
 

Michelle Child commented on Glenn Philp's post 9 months

Glenn,
 
Thank you for your reply! Unfortunately, no luck. I've narrowed the problem down to the Gulp compilation (If I bring the file in from an external server, it works), but I don't know enough about Gulp to figure out what's going wrong. 

Michelle Child commented on Glenn Philp's post 10 months

Hi Glenn, 
I am trying to add a third party jquery plugin (FooTable) to my foundation build, and also receiving an undefined error (Uncaught ReferenceError: FooTable is not defined). 
- I installed the plugin via bower
- Added it to my config.yml file: 
# 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 Bower components that get included
- "bower_components/footable/compiled/footable.js"
 
- And recently tried using preset es2015 and tell it the files to ignore in the .babelrc file: 
{
"presets": ["es2015"],
"ignore": [
"bower_components/footable/compiled/footable.js"
],
"compact": false
}

 
And still, it's not finding the file. I saw a previous post where you added code to the gulpfile.babel.js for a third party plugin, but the gulpfile has changed since your post and I wasn't sure if this is they way to go anymore. Any help is greatly appreciated!!
 

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Cristian's post 3 months

Hey Rafi,
I just tried to add owl carousel to my site per the instructions from the link above and I'm still getting 'OwlCarousel is not a function' when I try to initialize it. Has anything changed in the last few months that would make these instructions irrelevant?
 
Thanks,
Michelle

You commented on Glenn Philp's post 3 months

Hi Glenn, 
Better late than never? Thank you so much for your help.

You commented on Glenn Philp's post 9 months

 Glenn,
Thank you for your help, I really, really appreciate it. I'm doing my best to follow along, but I'm new to Foundation and Gulp and I'm following you only up to a certain point. 
Among the differences in our gulpfiles, I can't tell which parts I'd need to implement & which parts are custom to your build. I'll include my files below. Do I need to add to the section below, as you've done?
// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

We also have a some version differences. I'm using the latest version of the Foundation for Sites ZURB template and here are the versions I have running out of the box:

Node: v4.6.0
npm v2.15.9
Bower v1.8.0
Gulp CLI v1.2.2
Gulp Local v4.0.0-alpha.2
FoundationCLI v2.1.0

I'm nervous to update these because this is how they come out of the box, and I don't want to move too far from how Foundation is set to work. Is this the issue?
Files:
My package.json file already had the babel presets line, so I'm good there.
{
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official ZURB Template for Foundation for Sites.",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"devDependencies": {
"babel-preset-es2015": "6.3.13",
"babel-register": "6.7.2",
"browser-sync": "2.10.0",
"gulp": "gulpjs/gulp#4.0",
"gulp-autoprefixer": "3.1.0",
"gulp-babel": "6.1.2",
"gulp-cli": "1.2.1",
"gulp-concat": "2.5.2",
"gulp-cssnano": "2.1.0",
"gulp-extname": "0.2.0",
"gulp-if": "2.0.0",
"gulp-imagemin": "2.2.1",
"gulp-load-plugins": "1.1.0",
"gulp-sass": "2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "1.2.0",
"gulp-uncss": "1.0.1",
"js-yaml": "3.4.6",
"panini": "1.3.0",
"rimraf": "2.4.3",
"style-sherpa": "1.0.0",
"yargs": "3.8.0"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"babel": {
"presets": ["es2015"]
},
"private": true
}

 
My gulpfile.babel.js :
 
'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/*/.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
// Comment in the pipe below to run UnCSS in production
//.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
.pipe($.if(PRODUCTION, $.cssnano()))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: [
'what-input.js',
'footable.js'
]}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));

}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/*/')
.pipe($.if(PRODUCTION, $.imagemin({
progressive: true
})))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
});
done();
}

// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages//*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/
/.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/
/.scss').on('all', gulp.series(sass, browser.reload));
gulp.watch('src/assets/js//*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/
/').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/
*').on('all', gulp.series(styleGuide, browser.reload));
}

My Config.yml 
# 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"

# 3rd Party Frameworks 
- "bower_components/footable/compiled/footable.js"

# Paths to your own project code are here
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"

And I'm calling it on my app.js with 
$(document).foundation()

jQuery(function($){
$('.table').footable();
});
Thanks again.

You commented on Glenn Philp's post 9 months

+1 to Sergey..
 
I specified in config.yml -- 
- "bower_components/footable/compiled/footable.js"
 
In Gulpfile.babel.js --
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: [
'what-input.js',
'footable.js'
]}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));

}
 
The result is still this error message: 
app.js:19876 Uncaught ReferenceError: FooTable is not defined
at app.js:19876
 

You commented on Glenn Philp's post 9 months

Glenn,
 
Thank you for your reply! Unfortunately, no luck. I've narrowed the problem down to the Gulp compilation (If I bring the file in from an external server, it works), but I don't know enough about Gulp to figure out what's going wrong. 

You commented on Glenn Philp's post 10 months

Hi Glenn, 
I am trying to add a third party jquery plugin (FooTable) to my foundation build, and also receiving an undefined error (Uncaught ReferenceError: FooTable is not defined). 
- I installed the plugin via bower
- Added it to my config.yml file: 
# 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 Bower components that get included
- "bower_components/footable/compiled/footable.js"
 
- And recently tried using preset es2015 and tell it the files to ignore in the .babelrc file: 
{
"presets": ["es2015"],
"ignore": [
"bower_components/footable/compiled/footable.js"
],
"compact": false
}

 
And still, it's not finding the file. I saw a previous post where you added code to the gulpfile.babel.js for a third party plugin, but the gulpfile has changed since your post and I wasn't sure if this is they way to go anymore. Any help is greatly appreciated!!
 

Posts Followed

Following

  • No Content

Followers

  • No Content