Gulp-sass or gulp-ruby-sass on win7, 解决 syntax/dependency 问题
Gulp-sass or gulp-ruby-sass on win7, resolving syntax/dependency issues
所以,像许多刚接触 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 文件中的几个函数,或者通过 [=46] 作为整个文件调用=].
我遇到的问题是 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 版本之间的语法发生了变化,但是新语法变化的 none 对我有用,而 gulp-sass 不应该有文件通配问题(?!)。
我不知道我需要哪种依赖项或语法组合才能实现这一目标。
供参考,这里是我的gulp文件和依赖项供参考。
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"
}
}
提前致谢。
通过使用具有正确 src 语法的 gulp-ruby-sass 并确保参数 "bundleExec: true, compass: true, require: "sass- 解决了这个问题通配
所以,像许多刚接触 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 文件中的几个函数,或者通过 [=46] 作为整个文件调用=].
我遇到的问题是 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 版本之间的语法发生了变化,但是新语法变化的 none 对我有用,而 gulp-sass 不应该有文件通配问题(?!)。
我不知道我需要哪种依赖项或语法组合才能实现这一目标。
供参考,这里是我的gulp文件和依赖项供参考。
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"
}
}
提前致谢。
通过使用具有正确 src 语法的 gulp-ruby-sass 并确保参数 "bundleExec: true, compass: true, require: "sass- 解决了这个问题通配