gulp sass स्रोत मानचित्र

Question

मुझे उसी सीएसएस आउटपुट फ़ोल्डर में SASS कंपाइलर को स्रोत मानचित्र जोड़ने में सहायता चाहिए। अभी तक, मुझे gulpfile.js के भीतर gulp-sourcemaps मॉड्यूल स्थापित करना है, लेकिन gulp.task के रूप में sourcemaps.write को बांधने की सफलता को नहीं पता था।

किसी भी मदद की बहुत सराहना कर रहा है :)

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

घूंट कार्य 'सास' के लिए इस कोड का प्रयास करें:

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

पहले init sourcemaps तो उसी में है कि लिखने sourcemap के बाद सास() संकलन फ़ोल्डर ('।')

सादर

Answer 2

मैं 5 महीने के बाद से इस कार्य को उपयोग कर रहा हूँ हर रोज एक घ ठीक काम करता है,

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

}); 

इसके अलावा, उत्पादन संस्करण

Answer 3

घूंट-सास, नक्शे के लिए एक पूर्ण समाधान के लिए require('gulp-csso') आप सलाह देते हैं, सभी फाइलों को गिनती कम करें:

./sass/partial_folders/ 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']); 
})