Compiling Zurb Foundation partials with Gulpjs

4 Views

I’m building a custom WordPress theme using Zurb’s Foundation 5 and compiling it with Gulpjs which is amazingly fast. I have Gulpjs installed in my WP themes folder and it compiles my app.scss file everytime I save it perfectly. However if I make any changes to any of the Sass partials included in Foundation, Gulp doesn’t automatically compile them until I make a change to the app.scss and save app.scss again.

Is there a way automatically compile when I make changes to the partials, or any other .scss file included in my theme for that matter, when I save them?

Read More

Here’s a link to the starter theme I’m using, showing all the files I’m using. The gulpfile.js can be found in the root folder.

https://github.com/schikulski/gromf

Thanks!!

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. Figured it out! If anyone needs similar help.

    I added

    'bower_components/foundation/scss/foundation/components/_*.scss'

    to the gulpfile.js

    gulp.task('sass', function (){
    gulp.src([
        'bower_components/foundation/scss/normalize.scss',                
        'bower_components/foundation/scss/foundation/components/_*.scss',
        'assets/scss/app.scss'])                                         
        .pipe(sass({style: 'compressed', errLogToConsole: true}))         
        .pipe(concat('main.css'))                                         
        .pipe(rename({suffix: '.min'}))                                   
        .pipe(minifycss())                                                
        .pipe(gulp.dest('assets/css/'))                                   
        .pipe(livereload());                                              
        util.log(util.colors.yellow('Sass compiled & minified'));         
});

  2. Have you tried adding 'bower_components/foundation/scss/foundation/foundation.scss' to your source? That is the file with all of the @import‘s for foundation.