css - gulp-sourcemap 文件扩展问题

Question

尝试创建一个 gulp 文件来获取我们的 LESS 文件并生成适当的 .css、.min.css 和 .css.map 文件。关闭，但 sourcemaps 正在将 map 写入扩展名为 .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 文件，因此以下解决方案应该可以解决问题:

1. 将 gulp-if 添加到您的依赖项中(如果尚不存在)

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

2. 按如下方式重写您的任务:

   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'。