javascript - Gulp.js with foundationcompass - Stack Overflow

admin管理员组

文章数量:1318335

Has anyone successfully gotten Gulp-sass to work with foundation 4/5 (with pass preferably?)

The application is using foundation 4 successfully, without gulp, using pass watch. But I want to start using gulp to streamline my sass/coffee/minification pilation.

Here is my gulpfile.js

var gulp   = require('gulp'),
    util   = require('gulp-util'),
    sass   = require('gulp-sass'),
    coffee = require('gulp-coffee');

var paths = {
    scripts: {
        src:  'src/coffee/**/*.coffee',
        dest: 'public/javascripts'
    },
    styles: {
        src:  'src/sass/*.sass',
        dest: 'public/stylesheets'
    }
};

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src)
        .pipe(coffee())
        .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('sass', function () {
   return gulp.src(paths.styles.src)
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('watch', function () {
  gulp.watch(paths.scripts.src, ['scripts']);
  gulp.watch(paths.styles.src, ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'watch']);

This works great for the coffee script pilation, but fails at the mented line, when it es to sass/pass.

[gulp] Using file path/gulpfile.js
[gulp] Working directory changed to path
[gulp] Running 'scripts'...
[gulp] Running 'sass'...
[gulp] Running 'watch'...
[gulp] Finished 'watch' in 15 ms
[gulp] [gulp-sass] source string:1: error: @import directive requires a url or quoted path
// Here is what's throwing me for a loop. I'm assuming that it has something to do with
// gulp-sass not utilizing the ruby gem's source files for zurb-foundation/pass
[gulp] Finished 'sass' in 115 ms
[gulp] Finished 'scripts' in 122 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 11 μs

Is there a way around this, or is my best bet to upgrade from 4 to 5 and add the foundation files in my src/coffee, so it doesn't have to rely on looking in my .rvm/../gems folder??

Has anyone successfully gotten Gulp-sass to work with foundation 4/5 (with pass preferably?)

The application is using foundation 4 successfully, without gulp, using pass watch. But I want to start using gulp to streamline my sass/coffee/minification pilation.

Here is my gulpfile.js

var gulp   = require('gulp'),
    util   = require('gulp-util'),
    sass   = require('gulp-sass'),
    coffee = require('gulp-coffee');

var paths = {
    scripts: {
        src:  'src/coffee/**/*.coffee',
        dest: 'public/javascripts'
    },
    styles: {
        src:  'src/sass/*.sass',
        dest: 'public/stylesheets'
    }
};

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src)
        .pipe(coffee())
        .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('sass', function () {
   return gulp.src(paths.styles.src)
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('watch', function () {
  gulp.watch(paths.scripts.src, ['scripts']);
  gulp.watch(paths.styles.src, ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'watch']);

This works great for the coffee script pilation, but fails at the mented line, when it es to sass/pass.

[gulp] Using file path/gulpfile.js
[gulp] Working directory changed to path
[gulp] Running 'scripts'...
[gulp] Running 'sass'...
[gulp] Running 'watch'...
[gulp] Finished 'watch' in 15 ms
[gulp] [gulp-sass] source string:1: error: @import directive requires a url or quoted path
// Here is what's throwing me for a loop. I'm assuming that it has something to do with
// gulp-sass not utilizing the ruby gem's source files for zurb-foundation/pass
[gulp] Finished 'sass' in 115 ms
[gulp] Finished 'scripts' in 122 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 11 μs

Is there a way around this, or is my best bet to upgrade from 4 to 5 and add the foundation files in my src/coffee, so it doesn't have to rely on looking in my .rvm/../gems folder??

• javascript
• node.js
• zurb-foundation
• pass-sass
• gulp

Share Improve this question Follow edited Feb 13, 2014 at 4:00 Seth asked Feb 13, 2014 at 3:34 SethSeth 10.5k1010 gold badges4848 silver badges6969 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Try gulp-pass instead of gulp-sass.

EDIT

Let me apologize for my poor answer first.

I tested gulp-pass by myself and it worked. I'm not sure about your Foundation setup but what I picked was Using Foundation With Compass on Getting Started on SASS.

The relevant part of my gulpfile.js is:

var pass = require('gulp-pass');

var paths = {
  styles: {
    src:  'scss/*.scss',
    dest: 'stylesheets'
  }
};

gulp.task('sass', function () {
  return gulp.src(paths.styles.src)
    .pipe(pass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'scss'
    }))
    .pipe(gulp.dest(paths.styles.dest));
});

The example above has a different directory structure from yours. So, your gulpfile.js would be:

var pass = require('gulp-pass');

var paths = {
  styles: {
    src:  'src/sass/*.sass',
    dest: 'public/stylesheets'
  }
};

gulp.task('sass', function () {
  return gulp.src(paths.styles.src)
    .pipe(pass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'sass'
    }))
    .pipe(gulp.dest(paths.styles.dest));
});

For the options for 'pass()', 'css' should be your 'css_dir' in your 'config.rb' and 'sass' for 'sass_dir' as described in the README of gulp-pass.

Hope it will work for you.

本文标签： javascriptGulpjs with foundationcompassStack Overflow