Gulp 4 configuration file

Gulp is an open-source task runner to automate tasks.

All Gulp configuration goes in gulpfile.js where plugins are loaded and tasks are defined.

Goal

Sass compilation
- CSS minification
- Rename files to .min.css
- Copy minified CSS to public folder.
Transpile ES6+ using Babel
- JS minification
  - Rename files to .min.js
  - Generate JS source maps
Cache bust
Watch for changes in code

Installation

NOTE: you need to have Node installed on your computer.

Step 1. Install the Gulp command line utility

Install Gulp CLI with Yarn globally

yarn global add gulp-cli

Or install Gulp CLI with npm globally

npm install -g gulp-cli

Step 2. Install the Gulp package in your devDependencies

Install Gulp with Yarn

yarn add gulp --dev

Or install Gulp with npm

npm install --save-dev gulp

Dev Dependencies

These are the dependencies/plugins that we will use

@babel/core: Babel compiler core
@babel/preset-env: A Babel preset for each environment
autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules
cssnano: A modular minifier, built on top of the PostCSS ecosystem
gulp-babel: Gulp plugin for Babel
gulp-postcss: PostCSS Gulp plugin to pipe CSS through several plugins, but parse CSS only once.
gulp-rename: Rename files easily
gulp-replace: A string replace plugin for Gulp
gulp-sass: SASS plugin for Gulp
gulp-sourcemaps: Source map support for Gulp
gulp-uglify: Minify files with UglifyJS

Step 3. Installing Gulp plugins

Install all necessary plugins

With Yarn

yarn add @babel/core @babel/preset-env autoprefixer cssnano gulp-babel gulp-postcss gulp-rename gulp-replace gulp-sass gulp-sourcemaps gulp-uglify --dev

Or with npm

npm install --save-dev @babel/core @babel/preset-env autoprefixer cssnano gulp-babel gulp-postcss gulp-rename gulp-replace gulp-sass gulp-sourcemaps gulp-uglify

Running

Step 4. Copy the Gulp file

Copy the gulpfile.js to the root of your project and run Gulp.

Step 5. Run the default task

Development environment

Run gulp to deploy your app for distribution in the public folder.

gulp

This will watches the following files:

.scss
.js

When a file changes, it runs its associated task.

Single task

To run individual tasks.

gulp [task name]

Example:

gulp sass

Task list

All available tasks

default: Default task (can be omitted)
javascript: It transpiles, adds sourcemaps and uglify your JS files
style: It compiles scss into css file, adds sourcemaps and minify
watch: It watches for files changes

Predefined file structure

your-app/
|—— src/
|   |—— sass/
|   |   |—— somefile.scss
|   |   |—— [otherfile].scss
|   |—— js/
|   |   |—— somefile.js
|   |   |—— [otherfile].js
|   |—— img/
|   |   |—— [original image files]
|—— public/
|   |—— css/
|   |   |—— somefile.min.css
|   |   |—— [otherfile].min.css
|   |—— js/
|   |   |—— somefile.min.js
|   |   |—— [otherfile].min.js
|   |—— img/
|   |   |—— [optimized image files]
|—— gulpfile.js
|—— package.json

Contributing

Want to contribute? All contributions are welcome. Read the contributing guide.

Questions

If you have questions tweet me at @sandro_m_m or open an issue.

License

This project is licensed under the MIT License - see the LICENSE file for details

**~ sharing is caring ~**

SandroMiguel / gulp-setup