Menu icon Foundation
using JS components

Just getting started with foundation 6 and would like to know where I am going wrong. I am just trying to include only the components.js that I want to use. Can anyone tell me why this works in my gulp.js file:

gulp.task('scripts', function () {
gulp.src([
paths.bower + '/jquery/dist/jquery.min.js',
paths.bower + '/foundation-sites/dist/foundation.min.js',
paths.assets + '/scripts/app.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./public/js'));

But this does not:

gulp.task('scripts', function () {
gulp.src([
paths.bower + '/jquery/dist/jquery.min.js',
paths.bower + '/foundation-sites/js/foundation.core.js',
paths.bower + '/foundation-sites/js/foundation.util.triggers.js',
paths.bower + '/foundation-sites/js/foundation.util.motion.js',
paths.bower + '/foundation-sites/js/foundation.offcanvas.js',
paths.assets + '/scripts/app.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./public/js'));

many thanks!

javascript components

Just getting started with foundation 6 and would like to know where I am going wrong. I am just trying to include only the components.js that I want to use. Can anyone tell me why this works in my gulp.js file:

gulp.task('scripts', function () {
gulp.src([
paths.bower + '/jquery/dist/jquery.min.js',
paths.bower + '/foundation-sites/dist/foundation.min.js',
paths.assets + '/scripts/app.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./public/js'));

But this does not:

gulp.task('scripts', function () {
gulp.src([
paths.bower + '/jquery/dist/jquery.min.js',
paths.bower + '/foundation-sites/js/foundation.core.js',
paths.bower + '/foundation-sites/js/foundation.util.triggers.js',
paths.bower + '/foundation-sites/js/foundation.util.motion.js',
paths.bower + '/foundation-sites/js/foundation.offcanvas.js',
paths.assets + '/scripts/app.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./public/js'));

many thanks!

Brett Mason almost 4 years ago

I think you are probably missing a few util libraries. Here's my gulp sources if that helps:

     'bower_components/what-input/what-input.js',
    'bower_components/foundation-sites/js/foundation.core.js',
    'bower_components/foundation-sites/js/foundation.util.*.js',
    // Paths to individual JS components defined below
    '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',

Line 3 is probably the one that will help you the most, and of course just remove or comment out the ones you don't want!

PaulR almost 4 years ago

Thanks Brett!
Line 3 did it for '/js/foundation.dropdown.js'.
Still not working for '/js/foundation.offcanvas.js'.

I haven't tried any of the others yet but for the 20k or so difference I might just stick to '/dist/foundation.js' for a while.