Question

本周末，我开始玩耍。我想设置一个可以

的任务

编译我的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 - ＆gt;做一些事情 - ＆gt;前缀任务 - ＆gt;乙烯基sourcemaps申请

在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

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

我没有问题，可以使Sourcemap和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开始，这似乎对我有用，即使之后配置了其他任务。希望这两种解决方案中的一种适用于某人。

gulp-sass autoprefix sourcemap

3 个答案: