क्या इन सभी परिवर्तनों के साथ एक सोर्समैप उत्पन्न करना संभव है?
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"));
});
पुस्तकालयों का इस्तेमाल किया:
मुझे पता है कम से Sourcemaps, gulp-concat I don’t जेनरेट कर सकता है। autoprefixer उन्हें संरक्षित करने के लिए माना जाता है, और minify-css /स्वच्छ सीएसएस डॉन "लगता है कि स्रोत के नक्शे का कोई उल्लेख नहीं है? क्या मैं भाग्य से बाहर हूं?
उत्तर:
उत्तर № 1 के लिए 7मैं आज रात एक ही मुद्दा रहा है, और मैं अभी भी एक साफ समाधान खोजने पर काम कर रहा हूँ। हालांकि, मैं अभी कुछ काम कर पाने में कामयाब रहा, इसलिए मैंने सोचा कि मैं साझा करूंगा:
नोट: मैं न तो का उपयोग कर रहा हूँ gulpif न minify
उपयोग gulp-sourcemaps जबसे gulp-less स्रोत मानचित्र विकल्प के बिना आने के लिए लगता है (कम से कम फिलहाल)
बदलने के gulp-concat द्वारा gulp-concat-sourcemap Sourcemaps को संरक्षित करने के लिए।
गुलप-कॉनटैट isn "t वर्तमान में 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"));
});
जवाब के लिए 3 № 2
कम के संस्करण 2 के बाद से आप कम संकलक के लिए प्लगइन्स का उपयोग कर सकते हैं। इसके अलावा gulp-less आपको इन प्लगइन्स (प्रोग्राममैटिक) को देखने की अनुमति देता है http://lesscss.org/usage/#plugins-using-a-plugin-in-code
Gulp-less के दस्तावेज़ीकरण में साफ-सीएसएस और ऑटोप्रिफ़िक्स प्लगइन का उपयोग करने का तरीका बताया गया है https://github.com/plus3network/gulp-less#plugins। गौर करें कि gulp-minify-css क्लीन-सीएसएस का कोड भी ले रहा है।
इसके अलावा, स्रोत बनाने के लिए gulp-sourcemaps के साथ gulp-less के उपयोग का वर्णन किया गया है 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"));
ऊपर अपने कम स्रोत के स्वत: व्यवस्थित और छोटा सीएसएस उत्पन्न करना चाहिए, जिसमें सीएसएस sourcemaps लिखा है ।/public/css/maps
वैकल्पिक रूप से आप इसका उपयोग करने पर विचार कर सकते हैं प्लीज प्लग इन करें प्लीज एक बार कई पोस्टप्रोसेसर चला सकते हैं, देखें http://pleeease.io/docs/#features