0

因此,像许多 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"
  }
}

提前致谢。

4

1 回答 1

0

通过使用具有正确 src 语法的 gulp-ruby-sass 并确保参数 "bundleExec: true, compass: true, require: "sass-globbing" 解决了这个问题

于 2015-06-17T01:38:01.043 回答