0

そのため、Gulp を初めて使用する多くの人と同じように、開発マシン (win7、xampp、drupal) で gulp-sass または gulp-ruby-sass を適切に動作させるのに苦労しています。

私の質問は非常に単純です: livereload を使ってブラウザに sass コンパイルを実行するにはどうすればよいですか?

コンパスウォッチまたはバンドル exec ガードを使用して SASS が正しくコンパイルされることを確認できますが、drupal で Omega4 を使用して設定された通常の livereload は非常に遅いです。gulp/grunt を調べるように提案されたので調べてみましたが、設定が簡単であると報告されている gulp を選択しました。

また、Web サーバーのルートに gulp を正しくインストールしました。コマンド ラインを使用して、gulp ファイル内のいくつかの関数を個別に、または gulp を介してファイル全体として呼び出すことができます。

私が抱えている問題は、gulp-sass も gulp-ruby-sass も機能しないということです!

gulp-ruby-sass を使用すると、arguments to path.join must be stringsエラーが発生します。エラーは、この関数の 2 行目で発生します。

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