Question

我有以下Gulp文件运行Less，Autoprefixes，Concatinates文件然后缩小所有内容 - 所有less / 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

从teh gulp文件中可以看到 - 我已经在路径中添加了各种文件输出以查看发生了什么 - 文件保留了相对文件路径，直到它在Concatinate任务中复制（。pipe （gulp.dest（ './ 网/ CSS /'））

它是一个彻底的搔痒，我无法理解如何解决它 - 任何人都可以提供任何帮助，并保存我的理智！？

Answer 1

默认情况下gulp-concat-css尝试重新定义CSS文件中的url()引用，请参阅项目说明：

连接css文件，冒充@import语句（根据标准），可选地重新定位网址并内联本地@import语句。

如果您的连接文件最终位于另一个位置，但是引用的文件保持不变，这将非常有用。然后必须调整参考文献。

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

因此，您可以通过提供rebaseUrls选项来禁用网址设置：

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

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

1 个答案: