गुलप स्रोतमैप कम/संक्षिप्त/autoprefixer/minifycss के साथ?

Question

क्या इन सभी परिवर्तनों के साथ एक स्रोतमैप उत्पन्न करना संभव है?

gulp.task('styles', function() { 
    return gulp.src(source.styles) 
     .pipe(plumber()) 
     .pipe(gulpif(/\.less$/, plumber().pipe(less({ 
      strictMath: true, 
      strictUnits: true, 
     })))) 
     .pipe(concat('bundle.css')) 
     .pipe(prefixer(['last 2 versions', '> 1%', 'ie 9'], {cascade: false})) 
     .pipe(minifyCss()) 
     .pipe(gulp.dest('public/css')); 
}); 

पुस्तकालय इस्तेमाल किया:

• gulp-less
• gulp-if
• gulp-concat
• gulp-autoprefixer
• gulp-minify-css

मुझे पता है less स्रोतमैप उत्पन्न कर सकते हैं, gulp-concat मुझे लगता है कि उनका समर्थन नहीं करता है, autoprefixer उन्हें संरक्षित करना है, और minify-css/clean-css स्रोत मानचित्रों का कोई उल्लेख नहीं प्रतीत होता है। मेरा भाग्य साथ नहीं दे रहा?

Answer 1

मुझे आज रात एक ही समस्या हो रही है, और मैं अभी भी एक साफ समाधान खोजने पर काम कर रहा हूं।

नोट:: हालांकि, मैं सिर्फ पाने के लिए कुछ तो काम कर मैंने सोचा कि मैं साझा करेंगे कामयाब रहा gulpif है और न ही minify उपयोग कर रहा हूँ न

उपयोग gulp-sourcemapsgulp-less के बाद से स्रोत नक्शा विकल्प (कम से कम के लिए बिना आने के लिए लगता है क्षण)।

gulp-concat-sourcemap को स्रोतमैप को संरक्षित करने के लिए बदलें।

Gulp-concat वर्तमान में gulp-sourcemaps (cf. README) द्वारा समर्थित नहीं है। तक कि ठीक हो जाए, क्या यहां हड़पने के लिए एक समझौता संस्करण है: https://github.com/floridoo/gulp-concat/tree/sourcemap_pipe2

gulp.task('less', function() { 
    gulp.src(sources.less) 
    .pipe(sourcemaps.init()) 
    .pipe(less()) 
    .pipe(prefix({ map: true })) 
    .pipe(concat('build.css')) 
    .pipe(sourcemaps.write() 
    .pipe(gulp.dest(dirs.build + 'assets/css')); 
}); 

Answer 2

के बाद से कम का संस्करण 2 आप कम संकलक के लिए प्लग इन का उपयोग कर सकते हैं। इसके अलावा घूंट-कम आप इन प्लग-इन (कार्यक्रम संबंधी) का उपयोग भी देख http://lesscss.org/usage/#plugins-using-a-plugin-in-code

घूंट-कम बताता है कि कैसे https://github.com/plus3network/gulp-less#plugins पर सफाई सीएसएस और autoprefix प्लगइन का उपयोग करने के लिए का प्रलेखन करने के लिए अनुमति देता है। ध्यान दें कि gulp-minify-css भी क्लीन-सीएसएस के कोड का लाभ उठा रहा है।

इसके अलावा के उपयोग घूंट-कम घूंट-sourcemaps sourcemaps बनाने के लिए https://github.com/plus3network/gulp-less#source-maps

में वर्णित किया गया है के साथ तो तुम उपयोग करने में सक्षम होना चाहिए:

var LessPluginCleanCSS = require("less-plugin-clean-css"), 
    cleancss = new LessPluginCleanCSS({advanced: true}); 

var LessPluginAutoPrefix = require('less-plugin-autoprefix'), 
    autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]}); 


gulp.src('./less/**/*.less') 
    .pipe(sourcemaps.init()) 
    .pipe(less({ 
    plugins: [autoprefix, cleancss] 
    })) 
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest('./public/css')); 

ऊपर उत्पन्न करनी चाहिए autoprefixed और न्यूनतम किया गया आपके कम स्रोत का सीएसएस, ./public/css/maps

वैकल्पिक रूप से आप Pleeease plugin का उपयोग करने पर विचार कर सकते हैं Pleeease कई पोस्टप्रोसेसरों को एक बार चला सकता है,देखें 210