Menu icon Foundation
Gulp Foundation (SASS)

Hi,

I am trying to setup my project structure with Foundation using Gulp. So far here is what my task looks like:

var gulp = require( 'gulp' );
var rename = require( 'gulp-rename' );
var sass = require( 'gulp-sass' );
var autoprefixer = require( 'gulp-autoprefixer' );
var sourcemaps = require( 'gulp-sourcemaps' );
var browserify = require( 'browserify' );
var babelify = require( 'babelify' );
var source = require( 'vinyl-source-stream' );
var buffer = require( 'vinyl-buffer' );
var uglify = require( 'gulp-uglify' );
var inject = require( 'gulp-inject' );

var styleSRC = 'web/src/scss/style.scss';
var styleDIST = './web/dist/css/';
var styleWatch = 'web/src/scss/**/*.scss';

var stylesVendors = {

    'foundation': [

        './node_modules/foundation-sites/scss/**/*',

        './node_modules/foundation-sites/scss/*',

    ],

}



var stylesTask = Object.keys(stylesVendors);



stylesTask.forEach(function (libName) {

   gulp.task( 'styles:' + libName, function () {

      return gulp.src(stylesVendors[libName])

         .pipe(gulp.dest('./web/src/scss/vendors/' + libName));

   });

});


gulp.task('style', function() {
    return gulp.src( styleSRC )
        .pipe( sourcemaps.init() )
        .pipe( sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on( 'error', console.error.bind( console ) )
        .pipe( autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( sourcemaps.write( './' ) )
        .pipe( gulp.dest( styleDIST ) );
});

gulp.task( 'stylesVendors',

   gulp.parallel(

      stylesTask.map(function(name) {

          return 'styles:' + name;

      })

   )

);

 

But I get this error message when I run the task :

Error: web\src\scss\vendors\foundation\foundation.scss

Error: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.

        on line 10 of web/src/scss/vendors/foundation/foundation.scss

        from line 5 of web/src/scss/style.scss

>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';



   ^



    at options.error (C:\wamp64\www\charlie\node_modules\node-sass\lib\index.js:291:26)

  status: 1,

  file:

   'C:/wamp64/www/charlie/web/src/scss/vendors/foundation/foundation.scss',

  line: 10,

  column: 1,

  message:

   "web\\src\\scss\\vendors\\foundation\\foundation.scss\nError: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n",

  formatted:

   "Error: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n",

  messageFormatted:

   "web\\src\\scss\\vendors\\foundation\\foundation.scss\nError: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n",

  messageOriginal:

   'File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.',

  relativePath: 'web\\src\\scss\\vendors\\foundation\\foundation.scss',

  name: 'Error',

  stack:

   "Error: web\\src\\scss\\vendors\\foundation\\foundation.scss\nError: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n\n    at options.error (C:\\wamp64\\www\\charlie\\node_modules\\node-sass\\lib\\index.js:291:26)",

  __safety: undefined,

  _stack: undefined,

  plugin: 'gulp-sass',

  showProperties: true,

  showStack: false }



gulpSassfoundation 6tasks

Hi,

I am trying to setup my project structure with Foundation using Gulp. So far here is what my task looks like:

var gulp = require( 'gulp' );
var rename = require( 'gulp-rename' );
var sass = require( 'gulp-sass' );
var autoprefixer = require( 'gulp-autoprefixer' );
var sourcemaps = require( 'gulp-sourcemaps' );
var browserify = require( 'browserify' );
var babelify = require( 'babelify' );
var source = require( 'vinyl-source-stream' );
var buffer = require( 'vinyl-buffer' );
var uglify = require( 'gulp-uglify' );
var inject = require( 'gulp-inject' );

var styleSRC = 'web/src/scss/style.scss';
var styleDIST = './web/dist/css/';
var styleWatch = 'web/src/scss/**/*.scss';

var stylesVendors = {

    'foundation': [

        './node_modules/foundation-sites/scss/**/*',

        './node_modules/foundation-sites/scss/*',

    ],

}



var stylesTask = Object.keys(stylesVendors);



stylesTask.forEach(function (libName) {

   gulp.task( 'styles:' + libName, function () {

      return gulp.src(stylesVendors[libName])

         .pipe(gulp.dest('./web/src/scss/vendors/' + libName));

   });

});


gulp.task('style', function() {
    return gulp.src( styleSRC )
        .pipe( sourcemaps.init() )
        .pipe( sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on( 'error', console.error.bind( console ) )
        .pipe( autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( sourcemaps.write( './' ) )
        .pipe( gulp.dest( styleDIST ) );
});

gulp.task( 'stylesVendors',

   gulp.parallel(

      stylesTask.map(function(name) {

          return 'styles:' + name;

      })

   )

);

 

But I get this error message when I run the task :

Error: web\src\scss\vendors\foundation\foundation.scss

Error: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.

        on line 10 of web/src/scss/vendors/foundation/foundation.scss

        from line 5 of web/src/scss/style.scss

>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';



   ^



    at options.error (C:\wamp64\www\charlie\node_modules\node-sass\lib\index.js:291:26)

  status: 1,

  file:

   'C:/wamp64/www/charlie/web/src/scss/vendors/foundation/foundation.scss',

  line: 10,

  column: 1,

  message:

   "web\\src\\scss\\vendors\\foundation\\foundation.scss\nError: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n",

  formatted:

   "Error: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n",

  messageFormatted:

   "web\\src\\scss\\vendors\\foundation\\foundation.scss\nError: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n",

  messageOriginal:

   'File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.',

  relativePath: 'web\\src\\scss\\vendors\\foundation\\foundation.scss',

  name: 'Error',

  stack:

   "Error: web\\src\\scss\\vendors\\foundation\\foundation.scss\nError: File to import not found or unreadable: ../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies.\n        on line 10 of web/src/scss/vendors/foundation/foundation.scss\n        from line 5 of web/src/scss/style.scss\n>> @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';\n\n   ^\n\n    at options.error (C:\\wamp64\\www\\charlie\\node_modules\\node-sass\\lib\\index.js:291:26)",

  __safety: undefined,

  _stack: undefined,

  plugin: 'gulp-sass',

  showProperties: true,

  showStack: false }