Question

我正在尝试在Gulp中运行任务，而且我在Linux上运行时遇到问题。该任务似乎没有正常工作

function jsTask() {
    return gulp.src('./frontend/src/js/**/*.js')
        .pipe(babel())
        .pipe(gulp.dvest('frontend/js'));
}

gulp.task('js', jsTask);
gulp.task('js-watch', () => {
    return watch('./frontend/src/js/**/*.js', { ignoreInitial: false }, jsTask);
});

function lessTask() {
    return gulp.src(['./frontend/src/less/*-main.less'])
        .pipe(less())
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest('./public/css'));
}

gulp.task('less', lessTask);
gulp.task('less-watch', () => {
    return watch('./frontend/src/less/**/*.less', { ignoreInitial: false }, lessTask);
});

gulp.task('default', ['js', 'less']);
gulp.task('watch', ['js-watch', 'less-watch']);

当我运行gulp js命令时，我收到以下错误

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /var/www/myproject/frontend/src/js/iframe.js: 
   9 |
  10 | export const routes = (
> 11 |     <Route path="" component={({children}) => (children) }>
     |     ^
  12 |         <Route path="/not-found" component={NotFoundPage} />

Answer 1

您必须使用Babel来转换您的JSX和ES2015代码。 Babel使用某些预设将您的代码转换为纯JavaScript但您没有通过任何预设，因此代码不会被转换为纯JavaScript。因此，它会引发语法错误，因为JSX不是有效的JavaScript。

您只是使用gulp-babel作为babel()而没有任何预设，因此无法对您的代码进行转换。您需要告诉Babel使用某些预设首先，安装适用于您的预设：

npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

这些命令将安装适当的预设来转换代码，用于ES2015和React。然后将它们应用到gulpfile作为babel的选项：

return gulp.src('./frontend/src/js/**/*.js')
    .pipe(babel({
        presets: ['es2015', 'react']
    }))
    .pipe(gulp.dest('frontend/js'));

另外，请务必使用gulp.dest而不是gulp.dvest。这应该正确地转换你的代码。

使用Gulp任务时出现意外的令牌错误

1 个答案: