Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 2

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

1 Reply
Copilot Lvl 2
Message 2 of 2

Re: Zurb Foundation Sites & Gulp 4

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?