我一直在寻找相关问题,但没有找到答案(或问题,就此而言)。大多数问题是关于错误的路径或未生成源映射,但我还没有发现类似的东西。
当我处理这个任务时,我得到一个缩小的 css 文件(bootstrap.min.css)和一个源映射文件(bootstrap.min.css.map)。
但是,当我检查使用这些文件的代码时,某些部分会将我引导至 bootstrap.css(它不存在),例如源是已处理的 less 文件,而不是 less 文件本身……并且某些部分会直接我到 .less 文件。
引导我到 bootstrap.css 的部分确实将我带到了生成的 css,而不是缩小。但我需要它来引导我访问源代码较少的文件(这就是我们首先需要源映射的原因)
在生成的 sourcemap 中有一个指向 bootstrap.css 的源链接,但没有生成 bootstrap.css。
我的 bootstrap.less 任务会发生这种情况,但其他一些几乎完全相同的任务也会发生这种情况。
我还没有找到任何模式可以告诉我为什么有些部分确实会引导我进入较少的文件而有些则不会。
我一直在拉我的头发一整天试图找出问题所在!
我希望你能帮忙。
var less = require('gulp-less');
var gulpif = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var minify = require('gulp-minify-css');
var rename = require("gulp-rename");
var plumber = require('gulp-plumber');
// config
var config = require('../../../config.json');
// options
var options = require('../../options/styles');
var useSourcemap = true;
gulp.src(config.source.less + '/bootstrap.less')
.pipe(plumber())
.pipe(gulpif(useSourcemap, sourcemaps.init()))
.pipe(less(options.less))
.pipe(autoprefixer(options.autoprefixer))
.pipe(csscomb(options.csscomb))
.pipe(minify(options.minify))
.pipe(rename({
extname: '.min.css'
}))
.pipe(gulpif(useSourcemap, sourcemaps.write('./', {includeContent: true, sourceRoot: '/sourcemaps'})))
.pipe(gulp.dest(config.destination.base + config.destination.css));
}
};
和选项文件...
var config = require('../../config.json');
module.exports = {
less: {
strictMath: false,
paths: [
config.source.less,
config.bootstrap.less,
config.bootstrap.mixins
]
},
autoprefixer: {
browsers: config.autoprefixerBrowsers
},
csscomb: {
configPath: config.source.less + '/.csscomb.json'
},
minify: {
compatibility: 'ie8',
keepSpecialComments: '*',
advanced: false
}
};