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

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

javascript gulp less

Javascript 生成根路径而不是相对路径的Gulp文件,javascript,gulp,less,Javascript,Gulp,Less,我有下面的Gulp文件，它运行Less、Autoprefixes、concataties文件，然后缩小所有内容-所有Less/dev fuctin都在一个_dev文件夹中，编译的文件被复制到一个_web文件夹中 var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var minifyCSS = require('gulp-clean-css'); var less = require('gulp-less')

我有下面的Gulp文件，它运行Less、Autoprefixes、concataties文件，然后缩小所有内容-所有Less/dev fuctin都在一个_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("../../../../_dev/csscomp/images/link.png") no-repeat

正如您可以从gulp文件中看到的那样-我在路径上添加了各种文件输出，以查看发生了什么-该文件保持相对文件路径，直到它被复制到Concatatite任务（.pipe（gulp.dest（'./web/css/'））

这是一个完整的划痕，我无法理解如何修复它-有人能提供任何帮助并保存我的理智吗？

默认情况下，尝试重新设置CSS文件中的

url（）

引用的基础，请参阅项目说明：

连接css文件，冒泡出@import语句（根据标准），并选择性地重新设置URL的基址和内联本地@import语句

如果连接的文件最终位于另一个位置，但引用的文件保持原样，则此选项非常有用。然后必须调整引用

在您的例子中，

minimg

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

因此，您可以通过提供

rebaseUrls

选项来禁用url重定基址：

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