gulp を使用するのはこれが初めてです。これまで、scss ファイルをコンパイルするために bundle exec compass watch を使用してきました。
gulp を実行すると、コマンド プロンプトに次のエラーが表示されます。
Syntax error: file to import not found or unreadable: singularitygs
load paths: ... .. on line 14 of C:\<my path>\scss\partials\0_global\_base.scss
events.js:72 throw er; /unhandled 'error' event
<-[36mgulp-ruby-sass<-[39m] Error in plugin '<-[36mgulp-ruby-sass<-[39m':
..
..
at ChildProcess. <anonamous> c:\<my path>\node_modules\gulp-ruby-by-sass\index.js:100:25)
at ChlidProcess.EventEmitter.emit(events.js:98:17)
at maybeClose(child_process.js:743:16)
at Process.ChildProcess._handle.onexit (child_process.js:810:5)
私の _base.scss ファイルでは、次のようになっています。
@import 'singularitygs';
@import 'toolkit';
@import 'sassy-buttons';
これらの拡張機能はすべて config.rb ファイルと gemfile で宣言されており、 bundle exec compass watch を実行すると正常に動作します
singularitygs をコメントアウトすると、toolkit と sassy-buttons をコメントアウトすると同じエラーが発生します。それらをすべてコメントアウトすると、ツールキットが使用する変数に気付かないため、エラーがスローされます。
私のgulpfile.jsには以下が含まれています:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload')
compass = require('gulp-compass');
gulp.task('styles',function(){
return gulp.src('scss/*.scss')
.pipe(sass({style: 'expanded', bundleExec:true}))
.pipe(compass({config_file: 'config.rb', css:'stylesheets', sass:'scss', font:'stylesheets/fonts', require: ['singularitygs', 'toolkit', 'sassy-buttons'], bundle_exec:true}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({message: 'Styles task complete'}));
});
私はこれに4時間以上頭を悩ませており、運がなかった場合に何ができるかを他の場所で探していました。バンドルされた依存関係が gulp で機能しないのは、私が初めてではありません。
私の宝石はすべて最新であり、bundle exec compass watch でコンパイルするとすべて正常に動作します。また、次のようないくつかの異なる gulp パッケージを再インストールしようとしました。
npm install gulp-ruby-sass
npm install gulp-compass
私は WAMP と Windows 8 も使用しています。
御時間ありがとうございます。