2014-02-13 56 views
5

有没有人成功地得到了咕嘟咕嘟-SASS与基础4/5工作(与罗盘优选?)Gulp.js用粉底/指南针

应用程序使用基础4成功,没有咽,使用compass watch。但我想开始使用gulp来简化我的sass/coffee/minification编译。

这里是我的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']); 

这对于咖啡脚本编译的伟大工程,但在注释行失败,当涉及到SASS /指南针。

[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/compass 
[gulp] Finished 'sass' in 115 ms 
[gulp] Finished 'scripts' in 122 ms 
[gulp] Running 'default'... 
[gulp] Finished 'default' in 11 μs 

有没有解决的办法,或者是从4升级到5,在我的src /咖啡添加的基础文件,我最好的选择,所以不必依靠在寻找我的.rvm/../gems文件夹??

回答

6

尝试gulp-compass而不是一口气。

编辑

让我为我可怜的答案首先表示歉意。

我自己测试了gulp-compass,它工作。我不确定你的基金会设置,但我选择的是使用基础与指南针Getting Started on SASS

我gulpfile.js的相关部分是:

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

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

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

上面的例子具有不同的目录结构从你的。所以,你的gulpfile.js是:

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

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

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

为选项“指南针()”,“CSS”应该是你的“css_dir”你的“config.rb”和“青菜”的“sass_dir”如the README of gulp-compass中所述。

希望它能为你工作。

+0

哈哈哈,工作!虽然它的编译速度至少比普通罗盘手表慢两倍,但它的确有用。感谢您的回答,并对第一部分进行了改进。 – Seth