Menu icon Foundation

Designer | Spartanburg, SC

UX Designer/Front End Developer

My Posts


My Comments

Michelle Child commented on mxeise's post 8 months

Thank you ! I had the same question and could not find an answer anywhere. I was forgetting the [0] for the object inside the array.

Michelle Child commented on Cristian's post 12 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 12 months

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

Michelle Child commented on Glenn Philp's post over 1 year

 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 over 1 year

+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 over 1 year

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 over 1 year

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

  • 2
    Replies
  • Using JSON in Foundation Pages

    By mxeise

    JSON

    I'm trying to use data stored in "company.json" in a&nbsp;page, but can't get it working. It would be nice to have access to single&nbsp;values stored in the JSON without a loop or the each command. The JSON { "company": [ { "name_short":... (continued)

    Last Reply by Michelle Child 8 months ago






Following

    No Content

Followers

My Posts

My Comments

You commented on mxeise's post 8 months

Thank you ! I had the same question and could not find an answer anywhere. I was forgetting the [0] for the object inside the array.

You commented on Cristian's post 12 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 12 months

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

You commented on Glenn Philp's post over 1 year

 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 over 1 year

+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 over 1 year

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 over 1 year

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