Screencast ES2015 With Babel and Gulp JavaScript

  • Carlos Souza
  • 3916 views
Badge student

Locked Content

A subscription is required for viewing this video. Enroll now to get full access to all Code School courses and content.

Enroll Now Sign in

Comments

  1. Dirk-Jan de Groot said

    Thanks Carlos, great starting point for a ES2015 project setup, would love to see another video using a similar setup for angular projects.

  2. davemount said

    When I run gulp after creating gulpfile.js, it complains: "Unexpected strict mode reserved word"

  3. Faculty

    Carlos Souza said

    @Dave could you provide more info about your environment and perhaps the code you are trying to run ? Maybe post this on our forum ( discuss.codeschool.io ) where other people might have run into similar issues.

  4. davemount said

    If that happens, just keep going. It all works out.

  5. Victor Potasso said

    Nice tips. What about Grunt.js?

    Cheers.

  6. Miguel GarcĂ­a Sanguino said

    Great!

    I love your terminal theme, could you tell us how to setup it?

    Thanks!

  7. Faculty

    Carlos Souza said

    @Miguel I use the Dark Theme from Solarized - http://ethanschoonover.com/solarized

  8. Faculty

    Carlos Souza said

    @Victor I'm not a big fan of Grunt. Feels like a huge configuration object rather than writing JavaScript functions.

  9. vhlongon said

    Hi Carlos!

    Great video, one problem though. I get an error after running npm install:

    failed to load external module babel/register and also doesnt understand the import expressing, so I am guessing that babel is no working correctly.

    i am running Windows and I have node v4.2.2 as well as gulp v 3.9.0 (globally) installed.

    I haven't modified anything from the boilerplate, just run npm install and then try to run gulp default task.

  10. vhlongon said

    another thing, I see that all node modules have been correctlt installed when looking on the project folder.

    Thanks for your help!

  11. Faculty

    Carlos Souza said

    @vhlongon I wonder if Windows is having issues reading the .babelrc file... I've moved the presets to package.json and pushed the changes to another branch, here:

    https://github.com/codeschool/babel-with-gulp/tree/windows-fix

    Let me know if this fix works for you!

  12. Ngt said

    Thanks for the video. It's a nice start with Gulp/Browserify/Babel.

  13. ovac said

    import gulp from 'gulp'; This part keeps giving me an unexpected token error.

  14. ovac said

    fixed... thanks.

  15. YTHALO ROSSY SALDANHA LIRA said

    Thanks, Carlos. This was a great start point.

  16. Jason said

    Babel changed recently so instead of npm install babel-core --save-dev you'll want to use npm install babel-cli babel-preset-es2015 --save-dev

  17. StephaneChauvin said

    When I run gulp, the first thing I get in the terminal is the following warning message : [20:11:43] Failed to load external module babel-register

    Then I get the same messages than in your Video.

    And despite the warning message, the bundle.js file is generated and works fine...

    Here is my setup :

    node --version = v4.4.5

    "babel-core": "^6.10.4", "babel-preset-es2015": "^6.9.0", "babelify": "^7.3.0", "browserify": "^13.0.1", "gulp": "^3.9.1", "vinyl-source-stream": "^1.1.0"

    I'm on OSX 10.11 but I get the same message on Windows7/Cygwin

    Thanks

  18. royherzel said

    @StephaneChauvin I had the same issue too. and managed to fix it. - OSX El Capitan - node v4.4.7 - Babel 6.10.1 (babel-core 6.10.4) - gulp 3.9.1

    Fix: 1. npm install --save-dev gulp 2. npm install babel-register 3. npm install babel-register --save-dev 4. npm cache clean

  19. qaisar786 said

    Hi, I am getting this error below, when I run "gulp"

    [root@DEV03:]$[/var/www/html/loankit/python_test/codeschool/javascript/babel] gulp [16:30:55] Requiring external module babel-register /var/www/html/loankit/python_test/codeschool/javascript/babel/gulpfile.babel.js:3 import gulp from "gulp"; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) at Module.compile (module.js:513:28) at loader (/var/www/html/loankit/python_test/codeschool/javascript/babel/node_modules/babel-register/lib/node.js:151:5) at Object.require.extensions.(anonymous function) /var/www/html/loankit/python_test/codeschool/javascript/babel/node_modules/babel-register/lib/node.js:161:7 at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module.load (module.js:409:3) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Liftoff.handleArguments (/root/.local/install/node/lib/node_modules/gulp/bin/gulp.js:116:3)

    Please kindly assist with this.

    Thanks

    Qaisar

  20. Faculty

    Carlos Souza said

    Can you tell me which node version are you using @qaisar786 ? Also, feel free to post your question on our forum - https://www.codeschool.com/discuss/ - You might get a faster response there!

  21. qaisar786 said

    Hi Carlos, The node version is: 4.2.1 Thanks

  22. Anirudh Pochiraju said

    @carlos Hi,

    I tried replicating this same thing in Windows environment, but am getting an error when running the last "gulp command", unable to debug the issue.

  23. Laerion said

    Hi Carlos,

    Very good screencast, I had no idea on using es6 and gulp, and your course first was very good and clear, and then the previous screencast of babel very clear and finally this one, all very very good, thank you.

    I am (still) a big user of Grunt, because is the first that I learned, but wanted to get my hands into some Gulp and it looks pretty easy. I'm with you in that Gulp looks more like JavaScript, whereas Grunt is more a big JSON, which is not bad, but it's prettier Gulp.

  24. Laerion said

    Also I want to recommend using "gulp-watch", so your Gulp script will be "watching" for changes on one or more directories, and trigger a new build when something changes, very handy.

  25. Faculty

    Carlos Souza said

    Thanks, Laerion!

  26. syafzal said

    Cool video, thanks!

  27. Paul Barron said

    Which video precedes this one?

  28. Faculty

    Carlos Souza said

  29. Paul Barron said

    I found it. I wanted to make sure I worked my way up to this point. Now I'm heading over to the ES 2015 Web Forum vid. On another note, you helped me understand what Gulp is and what it does. I've been so scared of using Grunt or Gulp because I wasn't sure what they were for, but now I do. Thanks for that!!!

  30. Faculty

    Carlos Souza said

    Glad to hear and you are very welcome!

  31. Noxxys said

    Hi, great video! I didn't why we had to rename gulpfile.js to gulpfile.babel.js. Does Gulp knows that it must call babel by just looking at the filename?

  32. sarahsga said

    It's been a year since this screencast came live. Do we still need to use babel, or do major browsers now support ES2015?

  33. Faculty

    Carlos Souza said

    @Noxxys The reason we had to rename the file is so could use the import statement.

  34. Faculty

    Carlos Souza said

    @sarahsga Major browsers should support most of the ES2015 features today, but using a transpiler like Babel is still recommended.

About This Screencast

In this episode, Carlos Souza will walk through how to use ES2015 with Babel and Gulp. This will allow us to automate the transpilation process and add support for some new ES2015 features, like modules. If you're not familiar with ES2015, head on over to the ES2015: The Shape of JavaScript to Come course now!

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now