4

我正在使用 Gulp.js，在我做了一个缩小步骤之后，我很难让 gulp-sourcemaps 一直指向原始的 less 文件。

由于 gulp-minify-css 不支持源映射，因此我使用的是 postcss 和 csswring。

理想情况下，我想结束：

  • ss.css（未缩小）
  • ss.css.map（从 ss.css 指向原始 .less 文件）
  • ss.min.css（缩小）
  • ss.min.css.map（从 ss.min.css 指向原始 .less 文件）

目前，我已经停止尝试输出缩小版和非缩小版，但即使让缩小版指向原始 .less 文件似乎也不起作用。

无需执行缩小步骤，我的 .map 文件就可以很好地工作，如下所示：

{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;...

当我执行缩小步骤时，它会更改地图以将缩小文件指向已编译的 CSS，而不是原始的 Less 文件：

{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;...

这是我的 gulpfile.js：

var csswring = require('csswring'),
    gulp = require('gulp'),
    less = require('gulp-less'),
    path = require('path'),
    postcss = require('gulp-postcss'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps');

var sourceLess = path.join(__dirname, 'app', 'assets', 'less');
var targetCss = path.join(__dirname, 'app', 'assets', 'css');

// Compile Less to CSS and then Minify, Include Sourcemaps
gulp.task('less-and-minify-css', function () {
    return gulp.src(lessFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(rename({suffix: "-min"}))
        .pipe(postcss([csswring]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(targetCss));
});

一如既往，任何想法表示赞赏！

我已经尝试使用过滤器只重命名生成的 .css 文件而不是其他任何东西，但这似乎并不能解决核心问题。

4

1 回答 1

0

经过更多的摆弄，我能够让它与缩小一起工作，尽管我仍然无法在单个任务中保存缩小和非缩小版本。

需要使用重命名函数，因为只需添加一个后缀，地图就会被命名为“file.css.min.map”而不是“file.min.css.map”，这是让它们到达的必要条件配对。

我添加了 gulpif 以节省通过 csswring 命令运行 .less 文件的时间。

gulp.task('less-css-and-minify', function () {
    return gulp.src(lessFiles)
       .pipe(sourcemaps.init())
       .pipe(less())
       .pipe(gulpif('**/*.css', postcss([csswring])))
       .pipe(rename(function (path) {
          if (path.extname === '.map') {
             path.basename = path.basename.replace('.css', '.min.css');
          }
          if (path.extname === '.css') {
             path.basename += '.min';
          }
       }))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(targetCss));
});
于 2014-12-01T19:01:02.323 回答