0

gulp.js の実験を開始しました。

私は、自分の sass をデバッグするために使用できる CSS ソースマップを生成する 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 に伝える必要があるだけでなく、これを実現するには Gulps ソースマップ プラグインも使用する必要があるようです。いつの日か Gulp 4 との統合を改善するために変更が加えられたと思います。

そして、ここに要点があります：

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 に答える