因此,像许多 Gulp 新手一样,我正在努力让 gulp-sass 或 gulp-ruby-sass 在我的开发机器(win7、xampp、drupal)上正常工作。
我的问题很简单:如何通过 livereload 将 sass 编译到我的浏览器?
我可以确认我的 SASS 使用 compass-watch 或 bundle exec guard 正确编译,但是在 drupal 上使用 Omega4 设置的常规 livereload 非常缓慢。有人建议我研究 gulp/grunt,所以我做了,并选择了 gulp,因为据报道它易于配置
我还在我的网络服务器的根目录下正确安装了 gulp,我可以通过命令行单独调用我的 gulp 文件中的几个函数,也可以通过 gulp 调用整个文件。
我遇到的问题是 gulp-sass 和 gulp-ruby-sass 都不起作用!
使用 gulp-ruby-sass 我得到了arguments to path.join must be strings
错误。错误发生在此函数的第二行:
gulp.task('styles', function() {
return sass('postercatalogue/sites/all/themes/postomega/sass/**/*.scss', {style:'expanded'})
.pipe(sass({bundleExec: true, require: "sass-globbing"}))
.pipe(gulp.dest('./css'))
.pipe(livereload());
});
使用 gulp-sass,我得到一个错误file to import not found or unreadable: variables/**/*
gulp.task('styles', function() {
gulp.src('postercatalogue/sites/all/themes/postomega/sass/**/*.scss', {style:'expanded'})
.pipe(sass({bundleExec: true, require: "sass-globbing"}))
.pipe(gulp.dest('./css'))
这个错误也发生在 src/return sass 行。我知道 gulp-ruby-sass 版本之间的语法发生了变化,但是没有一个新的语法变化对我有用,而且 gulp-sass 不应该有文件通配问题(?!)。
我不知道我需要哪种依赖项或语法组合来实现这一点。
供参考,这里是我的 gulpfile 和依赖项供参考。
var gulp = require('gulp');
//var sass = require('gulp-sass');
var sass = require('gulp-ruby-sass');
var maps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
gulp.task('styles', function() {
return sass('postercatalogue/sites/all/themes/postomega/sass/**/*.scss', {style:'expanded'})
.pipe(sass({bundleExec: true, require: "sass-globbing"}))
.pipe(gulp.dest('./css'))
.pipe(livereload());
});
gulp.task('watch', function(){
livereload.listen();
gulp.watch('sass/**/*.scss',['styles']);
});
gulp.task('default',['styles','watch']);
{
"name": "postercatalogue",
"version": "0.1.0",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-connect": "^2.2.0",
"gulp-livereload": "^3.8.0",
"gulp-ruby-sass": "^1.0.5",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2"
}
}
提前致谢。