将供应商CSS与LESS组合并在gulp-minify之后将Sourcemap错误

时间:2014-08-14 13:09:02

标签: gulp gulp-less gulp-sourcemaps

我试图执行以下操作:

  1. 合并所有CSS文件(jQuery插件)
  2. 合并媒体查询
  3. 缩小CSS
  4. 撰写sourcemap
  5. 之后我尝试在另一个文件夹中做其他事情

    1. 翻译LESS
    2. 合并媒体查询
    3. 缩小生成的CSS
    4. 撰写sourcemap
    5. Autoprefix stuff
    6. 看起来像这样:

      gulp.task('styles', function() {
        var streamCSS = gulp.src(sources.css)
          .pipe(sourcemaps.init())
          .pipe(concat('vendor.css'))
          .pipe(cmq())
          .pipe(minify({ keepSpecialComments: '*' }))
          .pipe(sourcemaps.write());
      
        var streamLESS = gulp.src(sources.less)
          .pipe(plumber({ errorHandler: errorHandler }))
          .pipe(sourcemaps.init())
          .pipe(less())
          .on('error', swallowError)
          .pipe(cmq())
          .pipe(minify({ keepSpecialComments: '*' }))
          .pipe(sourcemaps.write())
          .pipe(prefix("last 2 versions", "> 1%", "ios >= 6", { map: true }))
          .on('error', swallowError);
      
        return es.merge(streamCSS, streamLESS)
          .pipe(plumber({ errorHandler: errorHandler }))
          .pipe(concat('main.css'))
          .pipe(gulp.dest(destinations.css))
          .pipe(connect.reload());
      });
      

      我遇到的唯一问题是生成的源图是错误的,并且总是引用错误的LESS文件。

      我使用以下库来实现这一目标:

      • 吞-的concat
      • 吞少
      • 吞-autoprefixer
      • 吞-结合媒体查询
      • 吞-sourcemaps
      • 吞掉-缩小-CSS

      我知道如果我省略供应商的东西会有用,但我希望只有一个结果样式表。

      感谢您的每一条建议!

1 个答案:

答案 0 :(得分:1)

您可以在调用sourcemap init函数之前尝试组合流吗?

我没有机会测试以下代码(许多需要省略)但你可以有一个想法:

var filter = require('gulp-filter');

var lessFilter = filter('**/*.less');

gulp.task('styles', function() {
    return gulp.src([sources.css, sources.less])
        .pipe(sourcemaps.init())
        .pipe(lessFilter)
        .pipe(less())
        .pipe(filter.restore())
        .pipe(minify({ keepSpecialComments: '*' }))
        .pipe(concat('main.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(destinations.css))
});