Quellkarte mit weniger/concat/autoprefixer/minifycss?

Question

Ist es möglich, eine Quellkarte mit all diesen Transformationen zu erstellen?

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

Bibliotheken verwendet:

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

Ich weiß, less kann Quellkarten generieren, Schluck-concat ich glaube nicht, unterstützt sie, autoprefixer soll sie erhalten, und Minify-css/clean-css scheinen keine Quellenkarten zu erwähnen. Habe ich kein Glück?

Answer 1

Ich habe heute Abend dasselbe Problem, und ich arbeite immer noch daran, eine saubere Lösung zu finden. Aber ich schaffte es gerade noch etwas zum Laufen zu bringen, so dachte ich, ich würde teilen:

Hinweis: Ich verwende weder gulpif noch minify

Verwenden gulp-sourcemaps seit gulp-less ohne die Quelle Karte Option zu kommen scheint (zumindest für der Moment).

Ersetzen Sie gulp-concat durch gulp-concat-sourcemap, um die Quellkarten zu erhalten.

Gulp-concat wird derzeit nicht von gulp-sourcymaps unterstützt (vgl. README). Bis das behoben wird es eine gepatchte Version hier greifen: 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

Seit der Version 2 von weniger Sie Plugins für den weniger Compiler verwenden können. Auch schlucke-less können Ihnen diese Plugins (programmatische) verwenden, siehe auch http://lesscss.org/usage/#plugins-using-a-plugin-in-code

Dokumentation des schluck losen beschreibt, wie Sie mit dem Clean-CSS und autoprefix Plugin bei https://github.com/plus3network/gulp-less#plugins. Beachten Sie, dass gulp-minify-css auch den Code von clean-css nutzt.

Auch die Verwendung von großen Schluck-weniger mit großen Schluck-sourcemaps sourcemaps zu schaffen, hat bei https://github.com/plus3network/gulp-less#source-maps

beschrieben worden, so sollten Sie in der Lage sein zu verwenden:

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

Die obige erzeugen sollte die autoprefixed und minimierte CSS Ihrer Quelle weniger, mit CSS Sourcemaps in ./public/css/maps geschrieben

Alternativ könnten Sie die Verwendung der Pleeease plugin Pleeease können viele Postprozessoren einmal ausführen, siehe http://pleeease.io/docs/#features