gulp-sass autoprefix sourcemap

Question

Questo fine settimana ho iniziato a giocare con il sorso. Ho voluto impostare un compito che può

• compilare i miei file Sass
  • continuare a lavorare se faccio degli errori nel file di sass
  • lavoro con sass Bootstrap
• generare sourcemaps
• aggiungi prefisso del browser
• inietti il ​​browser compilato css wihtout ricarica
• veloce (1-2 s top dev ENV)

ho ottenuto la maggior parte dei passi, ma prefissi navigatore mi ha dato un momento difficile Ecco quello che ho ottenuto finora

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

Il problema è che l'autoprefixer mi dà un errore e scombina le sourcemaps

l'errore che ottengo: "gulp-Sourcemap-scrittura: il file di origine non trovato: C: \ WEB \ skilldrill_v1 \ skilldrill \ sass \ app.css"

Quindi per qualche ragione cerca di trovare i file css nella directory sass

[Modifica]
Sono riuscito a individuare il problema, ma non ho potuto ancora risolverlo. Il tubo questa cosa funziona: gulp-autoprefixer -> fare alcune cose -> compiti come prefisso -> vinile-sourcemaps-applicano

Sulla linea 35 ° di gulp-autoprefixer \ index.js: applySourceMap (file, res.map .accordare()); Da questo punto la vinyl-sourmaps-apply capisce che anche il file corrente (nel mio caso app.css) diventa una fonte.

Qui ci sono i problemi: a) pensa che il file CSS è nella stessa cartella come specificato nel gulp.src(), che di solito non è vero b) non funziona solo con le linee aggiunte da l'autoprefixer, ma aggiunge riferimento a ogni singola riga

Hai qualche idea basata su queste informazioni? Ho iniziato a scavare nel gulp-concat che gestisce correttamente un problema simile.

Answer 1

Ho avuto gli stessi problemi con autoprefixer e sourcemaps. Ho modificato il mio flusso di lavoro per creare sourcemaps dopo aver compilato sass, quindi caricato nuovamente in gulp-sourcemaps quando eseguo autoprefixer e infine creando le sourcemaps aggiornate.

// 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')) 

E quindi solo guardando i file css per l'iniezione di stile.

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

Answer 2

@ philipb3 GRAZIE !! Ho passato la parte migliore di 2 giorni cercando di capire perché autoprefixer e gulp-sourcemaps non stessero giocando bene insieme, quindi quando finalmente ho risolto quel problema, la sincronizzazione del browser si sarebbe ricaricata completamente, ma non stava iniettando css appena generato. Questo sembra aver risolto il problema.

Per quelli che sono confusi com'ero all'inizio dalla spiegazione, ecco un esempio del mio compito sass nel mio file gulp con commenti su ciò che sta accadendo.

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

Edit: Così alla fine anche questo ha iniziato a rompere di nuovo quando ho iniziato l'aggiunta di alcuni più compiti e plugin per il mio sorso build. Non sono del tutto sicuro che sia necessario caricare due volte il sourcemaps. Ho ricostruito il mio file gulp, iniziando con gulp-sass e gulp-sourcemaps e questo sembra funzionare per me anche dopo aver configurato altre attività dopo. Spero che una di queste due soluzioni funzioni per qualcuno.

Plugin rilevanti:

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

Se stai utilizzando il browser-sync: (anche istituito orologio/servire compiti)

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

Fonti: cambiarli di conseguenza

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

Compito

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