Gulp 文件生成根路径而不是相对路径

Question

我有以下 Gulp 文件，它一起运行 Less、Autoprefixes、Concatinates 文件，然后缩小所有内容 - 所有 less / dev 函数都在 _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');

});

我的路径有问题 - 例如，在我的 less 文件类中，我有以下背景声明 -

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

但是文件被gulped后，文件的路径是-

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

正如您从 gulp 文件中看到的那样 - 我已经沿路径添加了各种文件输出以查看发生了什么 - 该文件保留相对文件路径，直到它在 Concatinate 任务中被复制 (.pipe (gulp.dest('./web/css/'))

它是一个完整的刮擦器，我无法理解如何修复它 - 任何人都可以提供任何帮助并挽救我的理智！？

Answer 1

默认情况下，gulp-concat-css 尝试对 CSS 文件中的 url() 引用进行变基，请参阅项目描述：

连接 css 文件，冒泡 @import 语句（按照标准），可选地重新定位 url 并内联本地 @import 语句。

如果您的连接文件最终位于另一个位置，但引用的文件保持原样，这很有用。然后必须调整引用。

在您的情况下，minimg 任务将引用的图像复制到相同的位置，因此您的 CSS 文件中的相对路径可以保持不变。

因此，您可以通过提供 rebaseUrls 选项来禁用 url 变基：

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