Zurb Foundation Sites & Gulp 4

Hi everyone,

I’m having some difficult joining the dots with Gulp 4 + Foundation and hoping someone can help.

A quick summary.
I have inherited a website that was originally built with NPM/Gulp/Bower and uses foundation XY Grid, so it’s not that old.

My issue.
Gulp stopped working because it was an old version so I decided to update EVERYTHING including npm, nodejs, gulp, foundation and start with a clean slate and a clean package.json and gulpfile.js. I am trying to start adding back in all my gulp task using the new series() and parallel() methods which all seems straight forward. Where I start to get into trouble is when I try to create a task to bring in the foundation scss and probably the js when I get to that part. I know bower isn’t being maintanined anymore so I don’t want to use it, but I am not sure if I even need to use bower, yarn or webpack when I have NPM and Gulp 4? I can’t seem to find a good tutorial online about how to grab the foundation scss and js.

I have the required packages in my node_modules folder.
/foundation-sites
/motion-ui

But my task keeps failing:

Error: File to import not found or unreadable: motion-ui.
on line x of src/assets/scss/foundation-theme.scss
>> @import 'motion-ui';

My foundation-theme.scss file looks like:

// Imports
@import "foundation";
@import 'motion-ui';

// Includes
@include foundation-everything;
@include motion-ui-transitions;
@include motion-ui-animations;

// Custom SASS
@import 'site/file1';
@import 'site/file2';
@import 'site/file3';

My gulpfile task is as follows:

function build_css() {
	return gulp.src('src/assets/scss/foundation-theme.scss')
	.pipe(sass({ includePaths : ['node_modules/foundation-sites/scss'], outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(concat('foundation.css'))
    .pipe(gulp.dest('webroot/static/css'))
}

exports.default = gulp.series(build_css);

Has anyone any experience with foundation and gulp without replying on a third party like bower or yarn or do I need to use one of them (yarn)? I just dont see why another package manager is nessessary when I have NPM anyways. I’m confused, do I need to call _settings.scss first… there must be a few things going on here I’m not seeing.

Thanks in advance

Okay, so just an update on this. I’ve had some luck getting both my SCSS and Foundation’s SCSS imported and complied to CSS.

In my gulpfile.js I added the below variable that references foundation-sites and motion UI SCSS.

var plugin = {
        default: {
            css: {
                sass: {
                    includePaths: [
                        './node_modules/foundation-sites/scss/',
                        './node_modules/motion-ui/',
                        './src/assets/scss/site/'
                    ]
                }
            }
        }
    };

Then, I have a task similar to the below to

function make_css() {
	return gulp.src('.path/to/src/scss-files/foundation-theme.scss')
    .pipe(sass(plugin.default.css.sass).on('error', sass.logError))
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(concat('foundation.min.css'))
    .pipe(gulp.dest('./path/to/webroot/css/'))
}

exports.make_css = make_css;
exports.default = gulp.series(make_css);

Now I just need to figure out a similar pattern for foundation’s JS which are usually:

<script type="text/javascript" src="/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/foundation/js/vendor/what-input.js"></script>
<script type="text/javascript" src="/foundation/js/vendor/foundation.js"></script>
<script type="text/javascript" src="/foundation/js/app.js"></script>

I’d ideally like to gather these 4 files (from /node_modules/foundation-sites/js I think?) and concatenate and uglify them into one .js file.  I know how to concatenate and uglify into one file, I’m just unsure what/how I can access the foundation JS.

Again, I’m not using or relying on bower or yarn. Just NPM & Gulp.

Any thoughts… anyone?