- 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
- 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
-
- gulp
- 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.
- 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.
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