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
folderwatch 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 changesrun 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.