Question

我的任务如下：

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')({ camelize: true });

gulp.task('styles-compile', function() {
    return gulp.src(['less/site.less',
                'less/special-*.less',
                'less/editor-styles.less'])
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.less())
        .pipe(plugins.autoprefixer('last 15 versions', 'ie 8', 'ios 6', 'android 4'))
        .pipe(plugins.sourcemaps.write('.', {sourceRoot: '../less', includeContent: false}))
        .pipe(gulp.dest('css'))
});

而我似乎无法配置它以使源映射工作。这是我最接近工作版本的问题 - 唯一的问题是生成的源映射包含它在源代码列表中的文件 - 例如对于site.css.map我得到：

{"version":3,"sources":["site.css","../font/icon/css/fontawesome.css","site.less"...,"names":[],"mappings":"...","file":"site.css","sourceRoot":"../less"}

首先，我很确定目标文件本身（site.css）不需要出现在源列表中，但对于另一个，它不会出现在less目录中 - 它在css目录中。因此，当我在开发工具中加载它时，找不到它。

如果我删除autoprefixer它一切正常，所以我想我在这里看到的是autoprefixer对源文件和目标文件使用site.css的事实，因此它认为它们之间存在映射。 / p>

根据其他地方的一些建议，我尝试在sourcemaps.write()和sourcemaps.init()之间添加对less()然后autoprefixer()的调用，但这并不能解决问题，事实上向生成的CSS添加额外的sourceMappingURL注释。

是否有接受/更好的方法来做到这一点？

根据@ seven-phases-max的评论，我稍微改变了一下任务：

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')({ camelize: true }),
    autoprefixer = require('autoprefixer');
gulp.task('styles-compile', function() {
    return gulp.src(['less/site.less',
                'less/special-*.less',
                'less/editor-styles.less'])
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.less())
        .pipe(plugins.postcss([autoprefixer]))
        .pipe(plugins.sourcemaps.write('.', {sourceRoot: '../less', includeContent: false}))
        .pipe(gulp.dest('css'))
});

不幸的是输出看起来完全相同，我仍然将site.css作为第一个来源。

Gulp LESS + autoprefix + sourcemaps挫败感

0 个答案: