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

正如您可能猜到的那样，您的问题来自于rename之后的sourcemaps.write。您只想重命名*.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文件扩展名问题

1 个答案: