gulp-sass - gulp-sass 自动前缀源映射

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']);
});

问题是自动前缀给了我一个错误并弄乱了源映射

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

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

[编辑]
我设法找到了问题，但还没有解决。这个东西工作的管道：gulp-autoprefixer -> 做一些事情 -> 前缀任务 -> 乙烯基-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}))

Answer 2

我知道这是一个老问题，但对于今天来到这里的人来说：

我可以毫无问题地让 Sourcemaps 和 AutoPrefixer 一起工作。所以看起来这个问题已经解决了。以下设置对我有用：

const
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    browserSync = require('browser-sync').create();

var
    scssSourcePath = './css/**/*.scss',
    cssDestPath = './css/',
    cssDestFile = 'styles.css';


// Task 'styles': 
// Compile SASS to CSS
gulp.task('styles', function () {
    return gulp.src(scssSourcePath)
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(concat(cssDestFile))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(cssDestPath))
        .pipe(browserSync.stream());
    });


// Default task: 
// Init Browser-Sync,
// Watch folders and start tasks on change
gulp.task('default', function () {
    browserSync.init({
        server: "."
    });

    return gulp.watch(scssSourcePath, gulp.series('styles'));
});

旁注：
我实际上建议使用 CSSnano 而不是 Autoprefixer。它包括 Autoprefixer 并进行了更多优化。只需将autoprefixer上述代码中出现的所有 替换为cssnano，您将获得额外的好处。

Answer 3

@philipb3 谢谢！！花了 2 天的大部分时间试图弄清楚为什么 autoprefixer 和 gulp-sourcemaps 不能很好地一起玩，然后当我最终解决这个问题时，浏览器同步将完全重新加载，但没有注入新生成的 css。这似乎解决了这个问题。

对于那些像我一样从解释中开始感到困惑的人，这里是我的 gulp 文件中我的 sass 任务的示例，其中包含对正在发生的事情的评论。

gulp.task('sass', function() {
    // create postcss processors
    var processors = [
        mqpacker,
        autoprefixer({ browsers: ['last 2 version'] })
    ];

return gulp.src(src.scss)
   .pipe(sourcemaps.init()) // start sourcemaps
   .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) // compile sass
   .pipe(sourcemaps.write()) // write map inline
   .pipe(gulp.dest(src.css)) // pipe to css dir
   .pipe(sourcemaps.init({loadMaps: true})) // init sourcemaps again after pipe to dest dir
   .pipe(postcss(processors)) // run postcss stuff
   .pipe(sourcemaps.write('./maps')) // write map to external dir instead of inline
   .pipe(gulp.dest(src.css)) // pipe to dest dir again
   .pipe(filter('**/*.css')) // filter out everything that isn't a css file
   .pipe(reload({ stream: true })); // pipe result to browser-sync for reload
});

编辑：所以最终当我开始向我的 gulp 构建添加更多任务和插件时，这也开始再次中断。我不完全确定是否有必要加载两次源地图。我已经重建了我的 gulp 文件，从 gulp-sass 和 gulp-sourcemaps 开始，即使在之后配置其他任务之后，这似乎也对我有用。希望这两种解决方案中的一种对某人有用。

相关插件：

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

//** Post CSS Modules **//
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mqpacker = require('css-mqpacker');

如果您使用浏览器同步：（还设置监视/服务任务）

//** Browser-Sync **//
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

来源：相应地改变这些

var src = {
   base: 'ROOT_FOLDER',
   js:     'ROOT_FOLDER/js/**/*.js',
   css:    'ROOT_FOLDER/css',
   html:   'ROOT_FOLDER/*.html',
   jsdir:  'ROOT_FOLDER/js',
   maps:   './maps',
   scss:   'ROOT_FOLDER/scss/**/*.scss'
};

任务

gulp.task('sass', function () {
    // load post-css plugins
    var processors = [
        mqpacker,
        autoprefixer({
            browsers: ['last 2 version']
        })
    ];
    // start sass task
    return gulp.src(src.scss)
      .pipe(sourcemaps.init()) // init sourcemaps
      .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError)) // compile scss
      .pipe(postcss(processors)) // autoprefix and combine media queries
      .pipe(sourcemaps.write(src.maps)) // write emaps relative to source dir
      .pipe(gulp.dest(src.css)) // pipe to css folder
      .pipe(browserSync.stream()); // send stream to browser-sync task
});