3

gulp-concat-css を使用して、選択した CSS のリストを 1 つに結合しています。私のプロジェクトのフォルダー構造は次のようになります。

[]Project Folder
gulpfile.js
---[]public
------[]assets
---------[]libs (All bower install libraries such as bootstrap will be placed here)
---------[]css (All my custom CSS including the combined CSS will be placed here)

さて、私のgulpタスクは次のようになります。

gulp.task('concatcss', function() {
  return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css',
    'public/assets/libs/angular-motion/dist/angular-motion.min.css',
    'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css',
    'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css',
    'public/assets/css/mycustom.css'])
    .pipe(concatCss("css/all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('public/assets'));
});

問題は、最終出力に間違った URL リベースが含まれていることです。これは、CSS URL がファイルの間違ったパスを指している原因です。たとえば、 の元の URLbootstrap.min.cssはurl('../fonts/glyphicons-halflings-regular.woff'). 現在、結合された CSS には の URL が付いていますがurl(../../fonts/glyphicons-halflings-regular.woff)、これは間違っています。そのはずurl(../libs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff)

gulp-concat-css のドキュメントによると、「適切なインポートのインライン化と URL リベースを行うには、入力ファイルに適切なベースを設定してください」と書かれています。

入力ファイルの適切なベースを設定して、正しい URL リベースを取得するにはどうすればよいですか?

4

1 に答える 1

2

次のように、ベースを gulp.src のオプションとして設定する必要があります{ base: 'public/assets' }。

gulp.task('concatcss', function() {
  return gulp.src(['public/assets/libs/bootstrap/dist/css/bootstrap.min.css',
    'public/assets/libs/angular-motion/dist/angular-motion.min.css',
    'public/assets/libs/bootstrap-additions/dist/bootstrap-additions.min.css',
    'public/assets/libs/blueimp-file-upload/css/jquery.fileupload.css',
    'public/assets/css/mycustom.css'], { base: 'public/assets' })
    .pipe(concatCss("css/all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('public/assets'));
});
于 2016-02-11T10:30:40.093 に答える