生成根路径而不是相对的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}))