• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/2/20

Get some practice building your project with Gulp

Log in or subscribe for free to enjoy all this course has to offer!

Its your turn!

In this activity, you will add Gulp to an existing project to automate build tasks.

The code you will need is in the following repo:

https://github.com/OpenClassrooms-Student-Center/5493201-js-for-the-web-gulp.git

Before adding anything, open  index.html  and  blog.html  in your browser and check how everything works.  Your build should work in exactly the same way.

Install Gulp to the project, and build separate tasks which do the following:

  • lint, transpile, and minify JavaScript code with JSHint, uglify, and Babel

  • copy all files to a  dist  folder

  • watch files for changes

  • have the browser reload whenever a file changes

You will need to install dependencies, making sure to keep your  package.json  up to date, and your development server should run from the  dist  folder.

This project uses  async/await , so you will need to install the necessary dependencies and make the necessary modifications to blog.html. You will also need to make sure the production build contains any files it will need.

Your default task should run all build tasks in correct sequence, watch files for changes, and update the browser.

Deliverables

Please upload a zip file containing your  gulpfile  and your  package.json .  When added to a clone of the original repo, these files should allow the person marking you (after running  npm install  and installing Gulp globally) to:

  • run  gulp  and get a working build which runs in the browser, watching files and live-reloading on any changes

  • run your tasks individually by name

Check your work!

To validate the activity, you need to check the criteria below:

  • Once Gulp has finished building your project, it launches it in the browser.

  • If any files are changed while the development server is running, the browser live-reloads.

  • The project, once built, works in exactly the same way as before the build (both pages).

  • The development server must run the  dist  build, not the original files.

Example of certificate of achievement
Example of certificate of achievement