生成根路徑而不是相對的gulp文件

Question

我有下面的gulp文件，它運行Less，Autoprefixes，Concatinates文件，然後縮小所有內容 - 所有更少的/ dev fuctins位於_dev文件夾中，編譯的文件被複制到_web文件夾..

var gulp = require('gulp'); 
var cleanCSS = require('gulp-clean-css'); 
var minifyCSS = require('gulp-clean-css'); 
var less = require('gulp-less'); 
var autoprefixer = require('gulp-autoprefixer'); 
var notify = require('gulp-notify'); 
var gutil = require('gulp-util'); 
var sourcemaps = require('gulp-sourcemaps'); 
var liveReload = require('gulp-livereload'); 
var path = require('path'); 
var path = require('clean'); 
var moment = require('moment'); 
var plumber = require('gulp-plumber'); 
var jslint = require('gulp-jslint'); 
var imagemin = require('gulp-imagemin'); 
var rename = require("gulp-rename"); 
var concatCss = require('gulp-concat-css'); 
var concatJs = require('gulp-concat'); 




//LESS Task 
gulp.task('less', function() { 
    return gulp.src('./_dev/less/main.less') 
    .pipe(plumber({ 
     errorHandler (err) { 
     notify.onError('LESS Error: <%= error.message %>')(err) 
     this.emit('end') 
     } 
    })) 
    .pipe(less()) 

    .pipe(rename("lessed.css")) 
    .pipe(gulp.dest('./_dev/css/')) 

    .pipe(notify('Finished: <%= file.relative %>')) 
}) 

//Autoprefixer 
gulp.task('autoprefixed', function() { 
    return gulp.src('./_dev/css/lessed.css') 
    .pipe(autoprefixer({ 
     browsers: ['last 2 versions'], 
     cascade: false 
    })) 
.pipe(rename("styles.css")) 
    .pipe(notify('Autoprefixed (' + moment().format('MMM Do h:mm:ss A') + ')')) 
    .pipe(gulp.dest('./_dev/csscomp/')); 
}); 


//Merge all CSS into one file 
gulp.task('concatinate', function() { 
    return gulp.src(['./node_modules/bootstrap3/dist/css/bootstrap.min.css', './_dev/csscomp/styles.css']) 

    .pipe(plumber({ 
     errorHandler (err) { 
     notify.onError('Concat Error: <%= error.message %>')(err) 
     this.emit('end') 
     } 
    })) 
    .pipe(notify('Concat')) 
    .pipe(concatCss("sitebundle.css")) 
    .pipe(gulp.dest('./_web/css/')) 
    .pipe(notify('finished concatinating')); 
}); 

gulp.task('concatstuff', function() { 
    return gulp.src(['./node_modules/bootstrap3/dist/css/bootstrap.min.css', './_dev/csscomp/styles.css']) 
    .pipe(concatCss("sitebundle.css")) 
    .pipe(gulp.dest('./_web/css/')) 
}); 



//Minify 
gulp.task('minify-css', function() { 
    return gulp.src('./_web/css/sitebundle.css') 

     .pipe(cleanCSS({debug: true}, function(details) { 
      console.log(details.name + ': ' + details.stats.originalSize); 
      console.log(details.name + ': ' + details.stats.minifiedSize); 
     })) 
     .pipe(rename("styles.css")) 
     .pipe(gulp.dest('./_web/css/')) 
     .pipe(notify('Minified.. ALL DONE')); 
}); 

//Lint JS 
gulp.task('scripts', function() { 
    return gulp.src('./_dev/*.js') 
    .pipe(concat('all.js')) 
    .pipe(gulp.dest('./dist/')); 
}); 

//COMPRESS IMAGES 
gulp.task('minimg' , function() { 
    gulp.src('./_dev/images/*') 
    .pipe(imagemin()) 
    .pipe(gulp.dest('./web/images')) 
}); 

//GULP TASKS 
//WATCH TASKS 
gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch('./_dev/less/**/*.less', ['less']); 
    gulp.watch('./_dev/css/lessed.css', ['autoprefixed']); 
}); 

//DEFAULT 
    gulp.task('default', function() { 

    gulp.watch('./_dev/less/**/*.less', ['less']); 
    gulp.watch('./_dev/css/lessed.css', ['autoprefixed']); 
    gulp.watch('./_dev/csscomp/styles.css', ['concatinate']); 

    gulp.watch('./_web/css/sitebundle.css', ['minify-css']); 
    gulp.start('less'); 

}); 

我有路徑的問題 - 例如，在我不太文件類我有以下背景聲明 -

background:url('../images/link.png'); 

但該文件已被一飲而盡後的文件的路徑 -

background: url("../../../../_dev/csscomp/images/link.png") no-repeat 

你可以從格蘭一飲而盡文件中看到 - 我更增添了多種文件輸出沿途看到什麼happeneing - 文件仍然具有相對的文件路徑，直到它在Concatinate任務（複製過來。管（gulp.dest（「./ 網/ CSS /」））

它是一個完整的國際象棋，我無法理解如何解決它 - 任何人都可以提供任何幫助，並保存我的理智！？

Answer 1

默認情況下gulp-concat-css試圖變基在CSS文件中引用url()，看到項目介紹：

串接css文件，冒泡@import聲明（根據標準），以及可選網址重訂並內聯本地@import語句。

如果您的連接文件在另一個位置結束，但引用的文件保持原樣，這非常有用。然後必須調整參考。

在你的情況下，minimg任務將引用的圖像複製到相同的位置，所以CSS文件中的相對路徑可以保持不變。

.pipe(concatCss("sitebundle.css", {rebaseUrls:false}))