0

我已经开始尝试 gulp.js。

我习惯于使用 grunt 生成 CSS 源映射的 sass 包，我可以用它来调试我的 sass。我目前正在使用 gulp-ruby-sass 生成 CSS。

在该过程结束时，不会生成源映射，并且 CSS 文件中没有源映射引用。

我的 gulpfile 看起来像这样：

/* load plugins */
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browsersync  = require('browser-sync'),
    reload = browsersync.reload;


/*
*  define tasks
*/

gulp.task('sass', function() {
    return sass('assets/sass/main.sass', { sourcemap : true })
    .pipe(gulp.dest('assets/css'))
    .pipe(reload({stream : true})) ;
}) ;


/*
*  browsersync conf
*/

gulp.task('browser-sync', function() {
    browsersync({
    proxy: 'neat',
    port: '3000'
    });
});

gulp.task('browsersync-reload', function () {
    browsersync.reload();
});

gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('assets/sass/**/*', ['sass']);
});


/* Default task */
gulp.task('default', ['sass'], function() {
    gulp.watch("assets/sass/**.*", ['sass']);
});
4

1 回答 1

2

1.0发生了重大变化gulp-ruby-sass，现在它有一个相当奇怪的行为（尽管肯定有一些原因......只是不知道是哪一个 ;-)）

但似乎你不仅要告诉 Sass 你正在使用 sourcemaps，而且还必须使用 Gulps sourcemap 插件来实现这一点。我猜想有一天会做出改变以更好地与 Gulp 4 集成。无论如何，这是我写的关于该主题的文章：http: //fettblog.eu/blog/2014/04/10/gulp-sass-autoprefixer-sourcemaps/

这是要点：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default', function () {
    return sass('app.scss', {sourcemap: true, style: 'compact'})
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'));
});
于 2015-03-25T08:57:15.777 回答