2015-03-01 8 views
4

Я пытаюсь заставить Susy работать с gulp-sass (libsass) и sourcemaps. Это исходные карты, которые, кажется, являются проблемой, поскольку без них все работает так, как должно. Я попытался добавить IncludePaths к задаче Sass, но это не помогло. Susy устанавливается с Bower и находится в активах/bower_components/susy.Gulp-sass with susy и sourcemaps

Ошибки я получаю выглядит так:

c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_mo 
dules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-ma 
p\lib\source-map\source-map-consumer.js:415 
     throw new Error('"' + aSource + '" is not in the SourceMap.'); 
      ^
Error: "/bower_components/susy/sass/susy/language/susy/_container.scss" is not i 
n the SourceMap. 
    at SourceMapConsumer_sourceContentFor [as sourceContentFor] (c:\Users\Devote 
e\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-mini 
fy-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-ma 
p\source-map-consumer.js:415:13) 
    at SourceMapGenerator.<anonymous> (c:\Users\Devotee\hemsidor\vvv\www\bb2-new 
-homepage\htdocs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl- 
sourcemaps-apply\node_modules\source-map\lib\source-map\source-map-generator.js: 
233:42) 
    at Array.forEach (native) 
    at SourceMapGenerator_applySourceMap [as applySourceMap] (c:\Users\Devotee\h 
emsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-minify- 
css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-map\s 
ource-map-generator.js:232:34) 
    at applySourceMap (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs 
\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply 
\index.js:23:15) 
    at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\ 
node_modules\gulp-minify-css\index.js:122:11 
    at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\ 
node_modules\gulp-minify-css\index.js:42:7 
    at whenSourceMapReady (c:\Users\Devotee\hemsidor\vvv\www\new-project\ht 
docs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\clea 
n.js:94:62) 
    at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\ 
node_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:100:77 
    at fromString (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app 
\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\utils\input- 
source-map-tracker.js:25:10) 

Извините за ужасное форматирование (Bash на Windows, ..).

Мой Gulpfile выглядит следующим образом:

var gulp = require('gulp'); 
var jshint = require('gulp-jshint'); 
var concat = require('gulp-concat'); 
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglify'); 
var sass = require('gulp-sass'); 
var autoprefixer = require('gulp-autoprefixer'); 
var minifyCSS = require('gulp-minify-css'); 
var sourcemaps = require('gulp-sourcemaps'); 
var del = require('del'); 
var browserSync = require('browser-sync'); 
var reload = browserSync.reload; 

// ==== CONFIGURATION ==== // 
// Project paths 
var src   = 'assets/', 
    dist  = 'dist/', 
    bower  = src + 'assets/bower_components/', 
    css   = dist + 'css/', 
    js   = dist + 'js/' 
; 

// ### JS-linting-compiling 
// Lint and minify our Javascript files 
gulp.task('js-linting-compiling', function(){ 

    // read all of the files that are in script/lib with a .js extension 
    return gulp.src('assets/js/*.js') 
     // run their contents through jshint 
     .pipe(jshint()) 
     // report any findings from jshint 
     .pipe(jshint.reporter('default')) 
     // concatenate all of the file contents into a file titled 'all.js' 
     .pipe(concat('all.js')) 
     // write that file to the dist/js directory 
     .pipe(gulp.dest(js)) 
     // now rename the file in memory to 'all.min.js' 
     .pipe(rename('all.min.js')) 
     // run uglify (for minification) on 'all.min.js' 
     .pipe(uglify()) 
     // write all.min.js to the dist/js file 
     .pipe(gulp.dest(js)); 
}); 

// ### SASS-TO-CSS 
// `gulp sass-to-css` - Compile SASS into CSS, autoprefix it and minify it. Also generate source maps (stripped in minified version) 
gulp.task('sass-to-css', function() { 
    gulp.src('assets/sass/style.scss') 
    .pipe(sourcemaps.init()) 
     .pipe(sass({ 
      includePaths: [ 
       'assets/bower_components/susy/sass' 
      ], 
      style: 'expanded', 
      errLogToConsole: true 
     })) 
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest(css)) 
     .pipe(reload({stream: true})) 
     .pipe(rename({ 
      suffix: '_min' 
     })) 
     .pipe(minifyCSS({ 
      keepSpecialComments:0, 
     })) 
     .pipe(gulp.dest(css)) 
     .pipe(reload({stream: true})); 
}); 


// ### Clean 
// `gulp clean` - Clean our dist folder before we generate new content into it 
gulp.task('clean', function (cb) { 
    del([ 
     // here we use a globbing pattern to match everything inside the `dist` folder, except our gitkeep file 
     'dist/**/*', 
     '!dist/.gitkeep{,/**}' 
     ], { dot: true }, 
    cb); 
}); 


// ### Build 
// `gulp build` - Run all the build tasks but don't clean up beforehand. 
// Generally you should be running `gulp` instead of `gulp build`. 
gulp.task('build', ['sass-to-css', 'js-linting-compiling'], function() { 
}); 


// ### Gulp 
// `gulp` - Clean up the dist directory and do a complete build. 
gulp.task('default', ['clean'], function() { 
    gulp.start('build'); 
}); 


// ### Watch 
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code 
// changes across devices. When a modification is made to an asset, run the 
// build step for that asset and inject the changes into the page. 
// See: http://www.browsersync.io 
gulp.task('watch', function() { 
    browserSync({ 
    proxy: "local.project.dev", 
    host: "localhost", 
    notify: true, 
    }); 
    gulp.watch(['assets/sass/**/*.scss'], ['sass-to-css']); 
    gulp.watch(['assets/js/**/*.js'], ['js-linting-compiling']); 
    gulp.watch('**/*.php', function() { 
    browserSync.reload(); 
    }); 
}); 

Любые идеи?

ответ

1

Я была такая же проблема ...

Попытка использовать INCLUDEPATHs, @import в файле Sass .... смешивания один, то другой, то оба ...

Единственное, что сработало для меня, - это перейти от susy от bower_components к моей папке sass, использовать «обычный» @import, и это сработало.

Я не эксперт в Глоток/узел, он может выглядеть как вопрос пути => bower_components находится вне определения Src задачи глотком ...:/

Надежда, что помогает