3-Gulp and Browser Sync

Key Objectives

• Set up npm in our project

• Set up gulp for build environment efficiency

• Use Node to install packages

Video

Overview

In this module, we take some time to set up an efficient development environment. We use browserSync and gulp to allow us to automatically reload the view after we save a change in our index.html file. This takes a few minutes to set up and will speed up development tenfold after we do.

Notes/Tips

Gulp can be tricky at times to get set up. If you don't succeed in this portion and don't have immediate help, you can run http-server in your terminal window. This will serve the project up for you. The only problem with this route: it won't reload when you make a change.

Steps

1. Please start by taking a look at the instructional video.

2. The finished code for this module can be found at this branch. However, please don't simply copy and paste the code. README files also have useful resources.

3. Check to be sure that you are on the module-2-setup branch in the example project. Again, you can do this by clicking in the lower left corner in VS Code.

4. Things that you'll want to do in your own project in this phase:

   • Run npm init to start up a package.json file. Just hit enter through all the questions or answer them how you'd like.

   • Run the installation for the gulp packages.

   • Install BrowserSync: npm install browser-sync --save-dev

   • Install gulp packages: npm install gulp gulp-clean-css gulp-filter gulp-header gulp-rename gulp-sass gulp-uglify gulp-watch --save-dev

   • Set up and test your gulp file so that your browser reloads after you make a change. You can use our starter file to help you. Make sure to read the code though.

     /*  Gulp will be used for development and deployment tasks, 
     such as minification of code, translating SCSS into SASS & CSS,
     and reloading after a save.See the README.md for gulp commands.
     */
     var gulp        = require('gulp');
     var browserSync = require('browser-sync').create();
     var reload      = browserSync.reload;
     /* Our objective is to make some html stubs and be able to have the browser change everytime we save.
     // So the first parameter is the gulp task name. This is what we call on the command line.
     // When we run gulp serve, it will fire a function that initializes browserSync and serves up
     // the index.html from the base of the project.
     // the gulp.watch will look for changes in the .html and the .css files.
     // At this point, try running gulp serve.
     // Then, with the app up, change both the index.html & the main.css files. Be sure to save.
     // It doesn't work if you just change the .css and save.
     // We'll add more here later.
     */
     gulp.task('serve', function () {
         /* Serve files from the root of the project */
         browserSync.init({
             server: {
                 baseDir: "./"
             }
         });
         gulp.watch("*.html").on("change", reload);
     });

   • Commit your code and push it to your GitHub repository when finished.

5. Go to the next module.