M
M
Maksim Zverev2014-10-08 14:50:50
gulp.js
Maksim Zverev, 2014-10-08 14:50:50

How to make gulp collect compass + foundation?

Greetings.
I use node.js under windows, I decided to build a project on gulp using jade, sass, foundation and others.
One of the desires is to collect sprites from a specific folder, I honestly tried to set up the assembly on gulp, but I could not get node-gyp to work under Windows (I get "gyp: binding.gyp not found (cwd: C: \Users\m1skam) while trying to load binding.gyp" ), after fiddling around with this day, I decided to try my luck with the trusted compass. By the way, the compass collects sprites, but the foundation stopped compiling as it should. Foundation is installed via bower and is registered in config.rb, the actual configs themselves:
config.ru

add_import_path "bower_components/foundation/scss"

output_style = :expanded

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "dist/assets/stylesheets"
sass_dir = "src/assets/stylesheets"
images_dir = "src/assets/i"
javascripts_dir = "scripts"

gulpfile.js
gulp.task('css', function() {
  return gulp.src('src/assets/stylesheets/*.scss')
    .pipe(sass({
      config_file: './config.rb',
      css: 'dist/assets/stylesheets',
      sass: 'src/assets/stylesheets'
    }))
    .pipe( gulp.dest('dist/assets/stylesheets/') )
    .pipe( livereload());
});

I do not give the entire config, because I check it on one task: gulp css
Execution result:
[15:37:48] Starting 'css'...                                                                                                       
 modified config.rb                                                                                                                 
    clean dist/assets/stylesheets                                                                                                   
   delete dist/assets/stylesheets/style.css                                                                                         
unchanged src/assets/i/s-s1cac7fe624.png                                                                                            
    write dist/assets/stylesheets/style.css                                                                                         
                                                                                                                                   
[15:37:50] style.css was reloaded.                                                                                                 
[15:37:50] Live reload server listening on: 35729                                                                                  
[15:37:50] Finished 'css' after 2.16 s

And this is where the magic begins.
Only /bower_components/foundation/scss/foundation/components/_visibility.scss */
service pieces from compass and my styles get into the resulting css.
foundation is connected via import "foundation";
contents of the included file:
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Make sure the charset is set appropriately
@charset "UTF-8";

// Behold, here are all the Foundation components.
@import
  "foundation/components/grid",
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "foundation/components/range-slider",
  "foundation/components/reveal",
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/switch",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
  "foundation/components/offcanvas",
  "foundation/components/visibility";

If you comment out the last line, with the wrapping of the closing ";" then the _visibility.scss styles disappear from the resulting file, but nothing more is added from the foundation. tried to register each line through import did not help.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maksim Zverev, 2014-11-06
@m1skam

The problem with the assembly of foundation was solved.
It turned out that foundation is not built using sass 3.4, only 3.3 and earlier.
UPD: In the latest (as of 07/01/15) releases, this problem is not observed.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question