Gulp-sass 与 susy 和源映射

Question

我正在尝试让 Susy 使用 gulp-sass (libsass) 和源映射。源映射似乎是问题所在，因为没有它们，一切都会按预期进行。我尝试将 IncludePaths 添加到 Sass 任务，但这没有帮助。 Susy 随 Bower 一起安装并驻留在 asset/bower_components/susy 中。

我收到的错误如下所示:

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)

抱歉，糟糕的格式(Windows 上的 Bash...)。

我的 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();
  });
});

有什么想法吗？

Answer 1

我也遇到了同样的问题...

尝试使用 includePaths， sass 文件中的 @import .... 混合其中之一，然后混合两者......

唯一对我有用的就是从 susy 从 Bower_components 移动到我的 sass 文件夹，使用“正常”@import，并且它起作用了。

我不是 gulp/node 方面的专家，它可能看起来像路径问题 => Bower_components 超出了 gulp 任务的 src 定义...:/

希望有帮助