0

だから私は次のタスクがあります：

gulp.task('sass', function () {
    gulp.src(['./angular/app/**/*.s+(a|c)ss'])
        .pipe($.concat('app.css'))
        .pipe($.sourcemaps.init())
            .pipe($.sass({  includePaths: ['./angular/app/global'] }).on('error', $.sass.logError))
            .pipe($.if(gulpUtil.env.env === 'prod', $.uglify().on('error', onError)))
        .pipe($.sourcemaps.write('./'))

        .pipe(gulp.dest('public/css'))
        .pipe($.notify({
            title: 'Gulp',
            subtitle: 'success',
            message: 'sass compiled',
            sound: "Pop"
        }))
        .pipe($.livereload());
});

これは正常に機能し、css ファイルの隣にマップ ファイルを生成します。css ファイルの最終行は次のとおりです。

/*# sourceMappingURL=app.css.map */

しかし、クロムもFirefoxもそのマップファイルにロードされます。私は何か間違ったことをしていますか？または何かが機能していませんか？

同様のタスクを持つJSファイルは、devToolsのソースタブでjsを分割しますが

4

1 に答える 1

0

問題が見つかりました。連結との競合でした。

次の方法で修正しました：

var prefix = function () {
    var prefix = new Buffer("\n/* Added dynamically */\n", 'utf-8');

    return through.obj(function(file, enc, cb) {
        file.contents = Buffer.concat([prefix, file.contents]);
        this.push(file);
        cb();
    });
};

gulp.task('sass', function () {
    gulp.src(['./angular/app/**/*.s+(a|c)ss'])
        .pipe(prefix())
        .pipe($.sourcemaps.init())
            .pipe($.sass({  includePaths: ['./angular/app/global']}).on('error', $.sass.logError))
            .pipe($.if(gulpUtil.env.env === 'prod', $.uglify().on('error', onError)))
        .pipe($.concat('app.css'))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('public/css'))
        .pipe($.notify({
            title: 'Gulp',
            subtitle: 'success',
            message: 'sass compiled',
            sound: "Pop"
        }))
        .pipe($.livereload());
});

私が今抱えている唯一の問題は、ソースマップを別のファイルに入れることができないということです。

于 2016-01-25T08:33:23.853 に答える