フォントのGulpエラー素晴らしいCSS

Question

私は反応プロジェクトに取り組んでいます。私がノードモジュールとしてreact-faコンポーネントを追加したとき、私のgulpはエラーを投げ始め、その後に行った変更は公開されたフォルダに反映されません。ここで

は私のコンソールには、これは私がここで

E:\Ajanth\sample\node_modules\font-awesome\css\font-awesome.css:7 
@font-face { 
^ 
ParseError: Unexpected character '@' 

はここに私の一口jsの輸入およびコンフィグ

"use strict"; 

var gulp = require('gulp'); 
var connect = require('gulp-connect'); //Runs a local dev server 
var open = require('gulp-open'); //Open a URL in a web browser 
var browserify = require('browserify'); // Bundles JS 
var reactify = require('reactify'); // Transforms React JSX to JS 
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp 
var concat = require('gulp-concat'); //Concatenates files 
var lint = require('gulp-eslint'); //Lint JS files, including JSX 

var config = { 
    port: 9005, 
    devBaseUrl: 'http://localhost', 
    paths: { 
     html: './src/*.html', 
     js: './src/**/*.js', 
     images: './src/images/*', 
     css: [ 
      'node_modules/bootstrap/dist/css/bootstrap.min.css', 
      'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 
      'node_modules/toastr/toastr.css', 
      'node_modules/font-awesome/css/font-awesome.css', 
      './src/css/custom.css', 
      'node_modules/react-data-components/css/table-twbs.css' 
     ], 
     dist: './dist', 
     fonts: 'node_modules/font-awesome/fonts/*', 
     mainJs: './src/main.js' 
    } 
} 

です取得していますエラーです

あるCSSの一気タスクです

gulp.task('css', function() { 
    gulp.src(config.paths.css) 
     .pipe(concat('bundle.css')) 
     .pipe(gulp.dest(config.paths.dist + '/css')); 
}); 

gulp-concat-cssノードモジュールを追加しようとしましたが、concatの代わりにconcatCssをタスクに使用しました。しかし、まだ同じエラーを取得し、CSSはあまりにも縮小されていません。

私は、CSSファイルのパスからfont-awesome cssを削除してみました。しかし、まだ同じエラーが発生しています。

私はそれに固執しています。問題が何であるかを把握し、gulpタスクが正常に実行されるように修正してください。

Answer 1

dist/cssで抽出したfont-awesome.cssを開くと、srcがフォントを検索している@ font-faceの最初のブロックに表示されます。そのディレクトリにdist/fontsの対応するフォントがなければなりません。

gulpであなたのフォントをすばらしいものにすることはできません。フォントの設定にパスがありますが、このgulpタスクを追加する必要があります。

gulp.task('fonts', function() { 
    gulp.src(config.paths.fonts) 
     .pipe(gulp.dest(config.paths.dist + '/fonts')); 
});