gulp-sourcemap 文件扩展名问题

Question

尝试创建一个 gulp 文件来获取我们的 LESS 文件并生成适当的 .css、.min.css 和 .css.map 文件。关闭，但 sourcemaps 正在将地图写入扩展名为 .css.min.css.

的文件

/// <vs BeforeBuild='less' SolutionOpened='less' />
/// <binding BeforeBuild='less' ProjectOpened='less' />
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var minifycss = require('gulp-minify-css');
var pleeease = require('gulp-pleeease');
var rename = require('gulp-rename');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var postcss = require('gulp-postcss');

var processors = [
        autoprefixer({ browsers: ["IE >= 9, firefox > 10, last 2 Chrome versions, last 2 safari versions, last 2 ios versions"] }),
        mqpacker
];
gulp.task('less', function () {
    gulp.src('./itims/Content/*.less', { base: './itims/content'})
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(postcss(processors))
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(gulp.dest('./itims/content'))
        .pipe(minifycss())
        .pipe(sourcemaps.write('./'))
        .pipe(rename({
            suffix: '.min',
            extname: '.css'
        }))
        .pipe(gulp.dest('./itims/content'));
});

Answer 1

您可能猜到了，您的问题来自 sourcemaps.write 之后的 rename。您只想重命名 *.css 个文件，因此以下解决方案应该可以解决问题：

将 gulp-if 添加到您的依赖项中（如果尚不存在）
```
var if = require('gulp-if');
```

重写你的任务如下：

gulp.src('./itims/content/*.less', {base: './itims/content'})
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(postcss(processors))
    .pipe(gulp.dest('./itims/content'))
    .pipe(minifycss())
    .pipe(sourcemaps.write('./'))
    .pipe(if('*.css', rename({extname: '.min.css'}))
    .pipe(gulp.dest('./itims/content'));

备注：

我删除了你的第一个重命名，因为 less 插件已经处理了 *.less 到 *.css
注意路径名的大小写。你混合了 './itims/Content' 和 './itims/content'.

gulp-sourcemap 文件扩展名问题

gulp-sourcemap file extension issue

css

less

gulp