使用less/concat/autoprefixer/minifycss的Gulp源代碼？

是否有可能通過所有這些轉換生成源映射？使用less/concat/autoprefixer/minifycss的Gulp源代碼？

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

庫使用：

我知道less可以生成源地圖，gulp-concat我不認爲支持它們，autoprefixer應該保留它們，並且minify-css/clean-css似乎沒有提及任何源地圖。我運氣不好嗎？

來源

2014-07-01 mpen

我一直有同樣的問題，今晚，我還在上找出一個乾淨的解決方案工作。不過，我好不容易纔得到的東西的工作，所以我想我也有同感：

注：我使用的是既不gulpif也不minify

使用gulp-sourcemaps因爲gulp-less似乎悄無源地圖選項（至少此時此刻）。

~~替換gulp-concat由gulp-concat-sourcemap來保留源地圖。~~

~~gulp-concat目前不被gulp-sourcemaps支持（參見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')); 
});

來源

2014-07-02 00:43:43

幾乎在那裏;你在做什麼樣的縮小？ – mpen

還沒有，爲dev env only ftm。任何提示，請讓我/我們知道！ –

好點，也許我應該放棄dev的縮小步驟。無論如何，我不確定是否需要生產源映射。 – mpen

由於減2版本，你可以使用插件對於不太編譯器。還可以使用這些插件（編程）另請參閱http://lesscss.org/usage/#plugins-using-a-plugin-in-code

gulp-less的文檔描述瞭如何在https://github.com/plus3network/gulp-less#plugins上使用clean-css和autoprefix插件。請注意，gulp-minify-css也在利用clean-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和精縮您的Less源代碼的CSS，將CSS源代碼映射到./public/css/maps中。

或者您可以考慮使用Pleeease plugin Pleeease可以運行多次後處理器，請參閱http://pleeease.io/docs/#features

來源

2015-01-08 00:07:16

我在將CSS加載到chrome時發現，地圖文件沒有指向正確的代碼行？ –

默認情況下，您的代碼已經包含在sourcemap中，另請參閱https://github.com/floridoo/gulp-sourcemaps#write-options以瞭解includeContent和sourceRoot選項 –

使用less/concat/autoprefixer/minifycss的Gulp源代碼？

回答

相關問題