gulp sass kaynak harita

Question

Aynı CSS çıktı klasöründe SASS derleyicisine kaynak harita eklemede yardıma ihtiyacım var. Şimdiye kadar, gulpfile.js içerisinde gulp-sourcemaps modülünü kurmam gerekiyordu, ancak sourcemaps.write'u gulp.task olarak bağlamak için başarılı olamadım.

Herhangi bir yardım çok takdir edilir :)

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var sourcemaps = require('gulp-sourcemaps'); 
var bs = require('browser-sync').create(); 

gulp.task('browser-sync', ['sass'], function() { 
    bs.init({ 
    server: { 
     baseDir: "./" 
    }, 
    proxy: { 
     target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port] 
     ws: true // enables websockets 
    } 
}); 
}); 

gulp.task('sass', function() { 
    return gulp.src('scss/**/*.scss') 
     .pipe(sourcemaps.init()) 
     .pipe(sass()) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(bs.reload({ 
      stream: true 
     })); 
}); 

gulp.task('watch', ['browser-sync'], function() { 
    gulp.watch("scss/*.scss", ['sass']); 
    gulp.watch("*.php").on('change', bs.reload); 
}); 

Answer 1

yudum görev 'küstahlık' için bu kodu deneyin:

gulp.task('sass', function() { 
    return gulp.src('scss/**/*.scss') 
     .pipe(sourcemaps.init()) 
     .pipe(sass()) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(bs.reload({ 
      stream: true 
     })); 
}); 

İlk init sourcemaps daha sonra aynı bu yazma sourcemap sonra küstahlığı() derlemek klasöründe ('')

Selamlar

Answer 2

Her gün bir 5 aydan beri bu görevi kullanıyorum

./sass/partial_folders/: d

const gulp   = require('gulp'), 
     autoprefixer = require('gulp-autoprefixer'), 
     plumber   = require('gulp-plumber'), 
     sass   = require('gulp-sass'), 
     sourcemaps  = require('gulp-sourcemaps'); 

var sassSourcePath = 'YourPath/scss/**/*.scss', 
    cssDestPath = 'YourPath/css/'; 


gulp.task('sass',() => { 

    return gulp 
    .src(sassSourcePath) 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 
    .pipe(sourcemaps.write({includeContent: false})) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(cssDestPath)); 

}); 

Ayrıca küçültmek tüm dosyaları saymak, üretim versiyonunda

Answer 3

yudum-sass, harita için tam bir çözüm için size require('gulp-csso') tavsiye çalışıyor index.scss

@import 'base/_reset'; 
@import 'helpers/_variables'; 
@import 'helpers/_mixins'; 
@import 'helpers/_functions'; 
@import 'base/_typography'; 
etc.. 

./gulpfile.js

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

gulp.task('styles', function(){ 
    return gulp 
      .src('sass/**/*.scss') 
      .pipe(sourcemaps.init()) 
      .pipe(sass().on('error', sass.logError)) 
      .pipe(concat('styles.css')) 
      .pipe(uglifycss({ 
       "maxLineLen": 80, 
       "uglyComments": true 
      })) 
      .pipe(sourcemaps.write('.')) 
      .pipe(gulp.dest('./build/css/')); 
}); 


gulp.task('default', function(){ 
    gulp.watch('sass/**/*.scss', ['styles']); 
})