Mini Personal Project(MPP)

• Demo
• Yarn - Fast, reliable and sequre dependency management.
  • Yarn is a JavaScript Package Manager, a direct competitor of npm, one of the Facebook Open Source projects.
  • Installation
  • An introduction to Yarn
• Gulp - Automate and enhance your workflow
  • gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
  • The references for learning
    • Gulp for Beginners
    • Gulp 4: The new task execution system
    • Using Gulp 4 in your workflow
  • The list of modules that my used:
    • gulp

      • yarn add --dev gulp

    • gulp-babel

      • # Babel 7
        yarn add --dev gulp-babel @babel/core @babel/preset-env
        # Babel 6
        yarn add --dev gulp-babel@7 babel-core babel-preset-env

    • gulp-if

      • yarn add --dev gulp-if

    • gulp-imagemin

      • yarn add --dev gulp-imagemin

    • gulp-postcss

      • yarn add --dev gulp-postcss

    • gulp-sass

      • yarn add --dev gulp-sass

    • gulp-uglify

      • yarn add --dev gulp-uglify

    • gulp-useref

      • yarn add --dev gulp-useref

    • del

      • yarn add --dev del

    • cssnano

      • yarn add --dev cssnano

    • autoprefixer

      • yarn add --dev autoprefixer

  • The full list of plugins
• I used the Bootstrap(4.3.1) as the world’s most popular front-end component library.

  • yarn add bootstrap

• I used the Quicksand font for document webpage.
  • Quicksand
• I used the Sass as the style sheet language.
  • Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

---

Install and Build

you have a package.json file with the list of dependencies but the packages have not been installed yet, run

yarn
# or 
yarn install

then for build

gulp build