Gulp Demo - Javascript build

The code base is located in https://github.com/ivanzcai/gulp-demo

This project is used for demonstrating what Gulp is and how it works. It perform a couple of simple tasks to give you a quick overview of what it does. First it converts newer js to ES5 for backward browser compitibility and copy the modified files in the stream to deploy folder.

  • Create package.json
    npm init
    
  • Create deploy and vendor in the gulp-demo root directory

  • install gulp package in your devDependencies
    npm install --save-dev gulp
    
  • Verify your gulp installation
    gulp --version
    
  • Install gulp cli, babel and uglify
    npm install gulp-cli -g
    npm install --save-dev gulp-babel @babel/core @babel/preset-env
    

    babel is used for converting javascript to ES5 so even the older browsers can render the site.

  • Add fsevents library to your devDependencies in your package.json
    "fsevents": "*"
    
  • Then run:
    npm i -f
    npm install --save-dev gulp-uglify
    
  • run the default work flow
    gulp 
    

    If this works, you will see files generated in the deploy folder

For if you want to learn about gulp bundle assets in an extensive way, there are some great examples in this github repository