gulp-sass autoprefix sourcemap

Question

这周末我开始玩gulp.我想建立一个可以的任务

• 编译我的sass文件
  • 如果我在sass文件中出错,继续工作
  • 使用sass Bootstrap
• 生成源图
• 附加浏览器前缀
• 注入已编译的css没有浏览器重新加载
• 快速(开发环境中的1-2秒)

我得到了大部分步骤,但浏览器前缀给了我一个艰难的时间这是我到目前为止所得到的

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

var config = {
    sassPath: './sass',
    bower: './bower_components',
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
    fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};

gulp.task('sass', function () {
    return gulp.src(config.sassPath + '/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                includePaths: [
                    config.sassPath,
                    config.bower,
                    config.bootstrap
                ],
                onError: function (err) {
                    notify().write(err);
                }
            }))
            .pipe(concat('app.css'))
            .pipe(autoprefixer('last 2 version'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css'))
        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('browser-sync', function() {
    browserSync({
        logLevel: "info",
        server: {
            baseDir: './',
            //directory: true,
            routes: {
                "/fonts": config.fonts
            }
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch(['./**/*.html', 'js/**/*.js'], reload);
    gulp.watch('sass/*.scss',['sass']);
});

问题是autoprefixer给了我一个错误并弄乱了源图

我得到的错误:"gulp-sourcemap-write:找不到源文件:C:\ WEB\skilldrill_v1\skilldrill\sass\app.css"

所以出于某种原因,它试图在sass目录中找到css文件

[编辑]
我设法找到了问题,但还没解决.这个东西管道工作:gulp-autoprefixer - >做一些东西 - >前缀任务 - > vinyl-sourcemaps-apply

在gulp-autoprefixer\index.js的第35行:applySourceMap(file,res.map.toString()); 从这一点来看,vinyl-sourmaps-apply理解当前文件(在我的情况下是app.css)也是一个来源.

以下是问题:a)它认为css文件与gulp.src()中指定的文件夹相同,这通常不正确b)它不仅适用于autoprefixer添加的行,而是添加引用到每一行

您是否有基于此信息的想法？我开始挖掘gulp-concat,正确处理类似的问题.

Answer 1

我对autoprefixer和sourcemaps也有同样的问题.我在编译sass之后改变了我的工作流程以创建源图,然后在运行autoprefixer时再次加载到gulp-sourcemaps中,最后创建更新的源图.

// Compile Sass
.pipe(sourcemaps.init())
    .pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('../public/assets/css'))

// Autoprefix
.pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer('last 2 version', 'ie 8', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('../public/assets/css'))

然后只观看css文件的样式注入.

// CSS Injection
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream:true}))