Skip to content

Could you help me to add the gulp-react to a project ? #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
uaKorona opened this issue Jan 21, 2015 · 2 comments
Closed

Could you help me to add the gulp-react to a project ? #278

uaKorona opened this issue Jan 21, 2015 · 2 comments
Labels
need-to-write-a-recipe

Comments

@uaKorona
Copy link

Hi.
I use your generator-gulp-angular in my projects and it's awesome!
Now I want use React and *.jsx templates.
I finded the gulp plugin for React - https://www.npmjs.com/package/gulp-react
but don't understand how to add its to my project's configuration.

I tried to change the "inject.js" follows:

 var injectJSX = gulp.src([
    paths.src + '/{app,components}/**/*.jsx'
  ]).pipe(react());

....

return gulp.src(paths.src + '/*.html')
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectJSX, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe(wiredep(wiredepOptions))
    .pipe(gulp.dest(paths.tmp + '/serve'));

But it doesn't work correctly
Could you help me ?
@Toilal
Copy link
Contributor

Toilal commented Jan 23, 2015

You need to create javascript files using react() first and write them to a temporary directory, and then inject them with wiredep, you can't do all in a single step.

Create a task to compile JSX to JavaScript ...

gulp.task('jsx', function () {
 return gulp.src([
    paths.src + '/{app,components}/**/*.jsx'
  ]).pipe(react())
 .dist(paths.tmp + '/jsx');

And then depend from this task to wiredep generated javascript files in index.html

gulp.task('inject', ['styles', 'jsx'], function () { // Depend on jsx compile task
....
 var injectJSX = gulp.src([
    paths.tmp + '/jsx/**/*.js' // *.js because react() compiles to javascript
  ]).pipe(react());
...
return gulp.src(paths.src + '/*.html')
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectJSX, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe(wiredep(wiredepOptions))
    ...
);
...

I didn't try, it may have caveats, but idea is there.

@uaKorona
Copy link
Author

Oh, thanks a lot! It's that what I wanted

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
need-to-write-a-recipe
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Swiip @Toilal @uaKorona