admin管理员组文章数量:1318156
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??
1 Answer
Reset to default 6Try 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
版权声明:本文标题:javascript - Gulp.js with foundationcompass - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742039037a2417466.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论