私は関連する質問を探していましたが、これに対する答え (または質問) が見つかりませんでした。ほとんどの質問は、間違ったパスまたはソースマップが生成されないことに関するものですが、このようなものは見つかりませんでした。
このタスクを処理すると、縮小された css ファイル (bootstrap.min.css) とソースマップ ファイル (bootstrap.min.css.map) が得られます。
しかし、これらのファイルを使用するコードを調べると、ソースが処理されたレスファイル自体ではなく、処理されたレスファイルである場合のように、一部のパーツはbootstrap.css(存在しない)に誘導します...そして一部のパーツは指示します私を.lessファイルに。
私をbootstrap.cssに誘導する部分は、縮小されていない、生成されたcssに私を連れて行きます。しかし、ソースのないファイルに導くためにそれが必要です (これが、最初にソース マップが必要な理由です)。
生成されたソースマップ内には、ソースに 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
}
};