CODEWITHSUNDEEP
reactjsnpmgulp
DadyByte
DadyByte

Reputation: 914

How to add gulp to reactjs?

I followed a tutorial: http://jpsierens.com/tutorial-javascript-es6-babelv6/ .

Tutorial githubrepo: https://github.com/jpsierens/es6-babel6

Can anyone help me with following questions?

  1. I created basic react app using create-reat-app boilerplate and added bablerc and gulpfile.js when i am trying to run it saying sytax error in App.js:

    [17:55:56] { SyntaxError: /home/dadybyte/Workspace/react-gulp/src/App.js:     Unexpected token (8:6)
    6 |   render() {
    7 |     return (
 >  8 |       <div className="App">
      |       ^
    9 |         <header className="App-header">
   10 |           <img src={logo} className="App-logo" alt="logo" />
   11 |           <h1 className="App-title">Welcome to React</h1>
     at Parser.pp$5.raise (/home/dadybyte/Workspace/react-gulp/node_modules/babylon/lib/index.js:4454:13)

  2. what does npm run gulp really do?

  3. If i run it on server with nohup and exit the terminal will the project still be running?

Upvotes: 2

Views: 9347

Answers (1)

Mika Sundland
Mika Sundland

Reputation: 18939

When you run npm run gulp you will run the script called gulp in the scripts section of package.json. The scripts section in package.json of the repo you linked to is:

"scripts": {
  "start": "npm run start-server & npm run gulp",
  "start-server": "python -m SimpleHTTPServer 3000",
  "gulp": "gulp"
}

So in this particular case, the command gulp will be run. When gulp is run without arguments it will look for the default task in the gulpfile. The default task is the gulpfile of the linked repo is:

gulp.task('default', ['es6','watch']);

In this particular case two tasks will be run: es6 and watch. The es6 task is set up to run babel (transform new syntax to old) and then bundle all your subfiles into one big file. The watch task will look for changes in the code and then run the es6 task if there are any.

When you create a project with create-react-app you already have a system that does this for you. It's called react-scripts and it does babel and bundling for you. Instead of using a watch task you'll run npm start and all the babeling and bundling is done for you behind the scenes. When you want to deploy your code you use npm run build to create the final files.

I would suggest you don't run babel, don't do any bundling and don't run watch tasks when you integrate Gulp with React. This is already being done by react-scripts. You can use Gulp for simple stuff like compressing images instead.

By the way, the error message is most likely due to babel not understanding the special JSX syntax that React uses. There are special plugins, like transform-react-jsx, that have to be used together with babel to get that to work.

Upvotes: 3

Related Questions