2

我对 gulp 很陌生，但我不明白为什么我的 javascript gulp 任务在导入 css 或图像时失败。

SVG图像：

$ gulp js
Using gulpfile ~/Project/gulpfile.js
Starting 'js'...
Error : Project/logo.svg:1
<?xml version="1.0" encoding="utf-8"?>
^
ParseError: Unexpected token

CSS：

$ gulp js
Using gulpfile ~/Project/gulpfile.js
Starting 'js'...
Error : Project/node_modules/react-table/react-table.css1
.ReactTable{position:relative;display:-webkit-box}
^
ParseError: Unexpected token

这是我的 package.json：

{
  "name": "project",
  "scripts": {
  "start": "http-server",
  "build": "gulp default",
  "watch": "gulp watch"
},
"devDependencies": {
  "babel-core": "^6.26.3",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-plugin-transform-react-jsx": "^6.24.1",
  "babel-preset-env": "^1.6.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "babelify": "^8.0.0",
  "browserify": "^14.5.0",
  "browserify-css": "^0.14.0",
  "cross-env": "^5.1.4",
  "gulp": "^3.9.1",
  "gulp-cache-bust": "^1.1.0",
  "gulp-concat": "^2.6.1",
  "gulp-react-templates": "^0.2.1",
  "gulp-sass": "^3.0.0",
  "http-server": "^0.9.0",
  "vinyl-buffer": "^1.0.0",
  "vinyl-source-stream": "^1.1.0"
},
"dependencies": {
  "axios": "^0.18",
  "font-awesome": "^4.7.0",
  "jquery": "^3.2",
  "laravel-mix": "^2.0",
  "lodash": "^4.17.10",
  "moment": "^2.21.0",
  "popper.js": "^1.12",
  "react": "^16.2.0",
  "react-bootstrap": "^0.32.1",
  "react-dom": "^16.2.0",
  "react-router-dom": "^4.2.2"
},
"browserify": {
  "transform": [
     [
       "babelify",
       {
         "presets": [
           "env",
           "react"
          ]
        }
      ]
    ]
  }
}

这是我的 .babelrc （不确定是否真的需要）：

{
    "presets": [
        "env", 
        "react"
    ]
}

最后是我的 gulpfile.js：

const gulp          = require('gulp');
const concat        = require('gulp-concat');
const sass          = require('gulp-sass');
const browserify    = require('browserify');
const source        = require('vinyl-source-stream');
const buffer        = require('vinyl-buffer');
const template      = require('gulp-react-templates');
const bust          = require('gulp-cache-bust');
const babelify      = require('babelify');

gulp.task('sass', function () {
    return gulp.src([
        'node_modules/font-awesome/css/font-awesome.css',
        'frontend/assets/styles/app.scss'
    ]).pipe(sass()).pipe(concat('app.css')).pipe(gulp.dest('public/css'));
});

gulp.task('html', function() {
    return gulp.src('frontend/app/**/*.html').pipe(template({ module: 'app' })).pipe(gulp.dest('public/js'));
});

gulp.task('fonts', function() {
    return gulp.src([
        'frontend/assets/fonts/**/*.*',
        'node_modules/bootstrap-sass/assets/fonts/**/*.*',
        'node_modules/font-awesome/fonts/*'
    ]).pipe(gulp.dest('public/fonts'));
});

gulp.task('js', function() {
    return browserify({
        entries: ['./frontend/app/app.js'],
        paths: ['./node_modules', './frontend/app/']
    })
        .transform(babelify, {
            presets: ['env', 'react']
        })
        .bundle()
        .on("error", function (err) { console.log("Error : " + err); })
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./public/js'));
});

gulp.task('lodash', function() {
    return gulp.src('./node_modules/lodash/lodash.min.js')
        .pipe(concat('lodash.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('bust', function() {
    return gulp.src('./public/index.php').pipe(bust({ type: 'timestamp' })).pipe(gulp.dest('./public/'));
});

gulp.task('images', function() {
    return     gulp.src('frontend/assets/images/**/*.*').pipe(gulp.dest('public/images'));
});

gulp.task('default', function() {
    return gulp.start(['images', 'fonts', 'html', 'sass', 'js', 'lodash', 'bust']);
});

gulp.task('basic', function() {
    return gulp.start(['html', 'sass', 'js', 'bust']);
});

gulp.task('watch', function() {
    gulp.start(['default']);

    gulp.watch('frontend/assets/styles/**/*.scss', {cwd: './'}, ['sass']);
    gulp.watch('frontend/assets/images/**/*.*', {cwd: './'}, ['images']);
    gulp.watch('frontend/assets/fonts/**/*.*', {cwd: './'}, ['fonts']);
    gulp.watch('frontend/app/**/*.html', {cwd: './'}, ['html']);
    gulp.watch('frontend/app/**/*.js', {cwd: './'}, ['js']);
});

因此，我最终注释掉了图像和组件特定 css 的导入语句，并且我的 ReactJS 代码编译成功。但是，我经常将图像和 css 导入我的 React 组件。有没有办法可以设置我的 gulp 任务来解释我的 React 组件中的任何导入的 css 或图像？我觉得我的配置有问题，但我似乎无法弄清楚。

4

0 回答 0