DEV Community: Ganesh Shinde

Gulp 4 Tutorial

Ganesh Shinde — Sun, 20 Jun 2021 11:09:42 +0000

Table of Contents

What is Gulp?
Common Tasks
Prerequisites
Create package.json
Install Packages
Create gulpfile.js
Import Packages
Add Paths
Create Tasks
- Copy Files
- Optimize Images
- Compile Styles
- Minify Scripts
- Cache Busting
- Watch Files
Export Tasks
Run Tasks
My gulpfile.js

What is Gulp?

Gulp is an open source Javascript toolkit and task runner
It was built on Node.js and NPM
Used for time consuming and repetitive tasks
Hundreds of plugins available for different tasks

Common Tasks

Minification of styles and scripts
Concatenation
Cache busting
Testing, linting and optimization

Prerequisites

Install Node.js

Install Gulp globally using following command in command line.
By default latest version will get installed.



npm install -g gulp

Check if Gulp is installed properly, Then we are good to move forward.



npm gulp --version

Create package.json

First create new directory for our project, if you already have one no need to create new.
Open command prompt and change current working directory as our project directory using below command (change path accordingly).



# Absolute path of directory
cd c:/projects/my-project

Now create package.json file for our project using below command.



npm init -y

Install Packages

Install required packages and save them as development dependencies using below command.



npm install --save-dev gulp gulp-concat gulp-rename gulp-replace gulp-imagemin gulp-sourcemaps gulp-sass postcss gulp-postcss autoprefixer cssnano gulp-terser

Find below, Purpose of installed packages.

gulp gulp-concat gulp-rename gulp-replace - Basic file operations such as concatenation, file renaming and file content replacement.

gulp-imagemin - Image optimization.

gulp-sourcemaps - Sourcemaps creation for styles and scripts.

gulp-sass postcss gulp-postcss autoprefixer cssnano - sass/scss compilation, Add vendor prefixes and minify styles.

gulp-terser - Minify scripts.

After this our package.json file will contain data something like below.



  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.2",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-replace": "^1.1.3",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-terser": "^2.0.1",
    "postcss": "^8.2.15"
  }

Create gulpfile.js

Open project in code editor and create gulpfile.js.
In this file we will define all the tasks that we want to automate.

Import Packages

Write below code inside gilpfile.js.
It will import all those installed packages, So that we can use them to perform tasks.



const gulp = require('gulp');
const { src, dest, watch, series, parallel } = require('gulp');
const imagemin = require('gulp-imagemin');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const terser = require('gulp-terser');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

Add Paths

Add below object of paths into gulpfile.js.
We are using this object because its the most convenient way to handle paths. It adds maintainability to our code.



const paths = {
  html: {
    src: ['./src/**/*.html'],
    dest: './dist/',
  },
  images: {
    src: ['./src/content/images/**/*'],
    dest: './dist/content/images/',
  },
  styles: {
    src: ['./src/scss/**/*.scss'],
    dest: './dist/css/',
  },
  scripts: {
    src: ['./src/js/**/*.js'],
    dest: './dist/js/',
  },
  cachebust: {
    src: ['./dist/**/*.html'],
    dest: './dist/',
  },
};

Selectors

Pattern	Match
*.scss	Matches any file ending with `.scss` from current directory
*/.scss	Matches any file ending with `.scss` from current directory and any child directory
*.+(scss\|sass)	Matches any file ending with `.scss` or `.sass` from current directory

Folder Structure

We will keep all our files in src directory and then using Gulp tasks we will create optimized files in dist directory.
Above paths object is created based on this folder structure.

Create Tasks

Gulp performs actions on files in pipeline. Pipeline / .pipe() operator is nothing but chained processes running synchronously.
Files are not affected until all processes are completed.
Gulp .src() and .dest() operators are used to read and write files.

Below is the basic syntax for creating a Gulp task.



function task_name() {
  return src('source-location') // Select files from given location
    .pipe(gulpPlugin()) // Send files through a gulp plugin
    .pipe(dest('destination-location')); // Write modified files at given location
}

Copy Files

Copy HTML files from src to dest location using below function.
We can add more function like this in case we want to copy some other files such as fonts or media files.
For that, All we need to do is add paths in the paths object.
Then create new function just as below and update src and dest paths.



function copyHtml() {
  return src(paths.html.src).pipe(dest(paths.html.dest));
}

Optimize Images

Optimize all types of images(.png, .jpeg, .gif, .svg).
If any error occurs during performing the task, We will be logging that to the console.



function optimizeImages() {
  return src(paths.images.src)
    .pipe(imagemin().on('error', (error) => console.log(error)))
    .pipe(dest(paths.images.dest));
}

Compile Styles

Compile sass/scss and convert them into optimized css.
Keep all the tasks that needs to be done on styles between sourcemaps.init() and sourcemaps.write('.'), Otherwise sourcemaps won't be generated properly.

We are using cssnano to optimize our styles that's why we are renaming files with .min suffix (Indicating minified).



function compileStyles() {
  return src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest(paths.styles.dest));
}

Minify Scripts

Optimize scripts using below function.



function minifyScripts() {
  return src(paths.scripts.src)
    .pipe(sourcemaps.init())
    .pipe(terser().on('error', (error) => console.log(error)))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest(paths.scripts.dest));
}

Cache Busting

Browser cache files which we link in our .html files and next time use cached files whenever request is made for the same .html page.
This sometimes creates issue like, Browser still uses old cached files even if we have done changes in the files. This is known as browser caching issue.

Cache busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn't retrieve the old file from cache but rather makes a request to the origin server for the new file.

To make this work we will add cache_bust parameter (with any number) to all style and script urls in our .html files.



<html>
  <head>
    <link rel="stylesheet" href="/dist/css/style.min.css?cache_bust=123" />
  </head>
  <body>
    <script src="/dist/js/script.min.js?cache_bust=123"></script>
  </body>
</html>

Now using below function we will replace these cache_bust parameter value with unique number. So that these urls will be unique, Browser will know that url is changed and instead of using already cached file it will request for the file from the server.



function cacheBust() {
  return src(paths.cachebust.src)
    .pipe(replace(/cache_bust=\d+/g, 'cache_bust=' + new Date().getTime()))
    .pipe(dest(paths.cachebust.dest));
}

Watch Files

Watch for file modification at specific paths and run respective tasks accordingly.



watch('path-to-watch',[tasks-to-perform]);

We can perform as many tasks as we want using series() and parallel() operators.
series() will execute tasks synchronously and parallel() will execute tasks asynchrously.



function watcher() {
  watch(paths.html.src, series(copyHtml, cacheBust));
  watch(paths.images.src, optimizeImages);
  watch(paths.styles.src, parallel(compileStyles, cacheBust));
  watch(paths.scripts.src, parallel(minifyScripts, cacheBust));
}

Export Tasks

Export created tasks so that they will be accessible to execute from command line.



exports.copyHtml = copyHtml;
exports.optimizeImages = optimizeImages;
exports.compileStyles = compileStyles;
exports.minifyScripts = minifyScripts;
exports.cacheBust = cacheBust;
exports.watcher = watcher;

Create one default task which will execute all the tasks that we want and later starts watching files for modification.



exports.default = series(
  parallel(copyHtml, optimizeImages, compileStyles, minifyScripts),
  cacheBust,
  watcher
);

Run Tasks

Run any specific task using below command.



gulp task_name

Run default task using below command.



gulp

To stop watcher task, which continuously watch for file modifications, press ctrl + c in command line and answer asked question as Y.



^CTerminate batch job (Y/N)? Y

My gulpfile.js

Check out my gulpfile.js for reference.

Source Maps

Ganesh Shinde — Sun, 20 Jun 2021 10:58:25 +0000

One of the easiest and effective performance wins you can gain for your website is to combine and compress your JavaScript and CSS files. But it will be really difficult and frustrating to debug the code within those compressed files. There is a solution for this and it goes by the name of source maps.

A source map provides a way of mapping code within a compressed file back to it’s original position in a source file. This means with the help of a bit of software, you can easily debug your applications even after your assets have been optimized. Most of the browsers (Chrome, Firefox, etc.) developer tools comes with built-in support for source maps.

Original main.css

body {
  background-color: rgb(27, 150, 199);
  color: white;
}

Optimized main.min.css

body{background-color:#1b96c7;color:#fff}
/*# sourceMappingURL=main.min.css.map */

Source map main.min.css.map

{"version":3,"sources":["custom/main.scss"],"names":[],"mappings":"AAEA,KACE,wBAAmC,CACnC,UAJgB","file":"main.min.css","sourcesContent":["$font-color: white;\r\n\r\nbody {\r\n  background-color: rgb(27, 150, 199);\r\n  color: $font-color;\r\n}\r\n"]}

There are plenty of free plugins are available to optimize styles, scripts and create source maps for them.
Optimize styles
Optimize Scripts
Create Sourcemaps

Source maps allows developers to maintain a straight-forward debugging environment while at the same time optimizing their sites for performance.

Markdown Cheat Sheet

Ganesh Shinde — Sun, 13 Jun 2021 05:22:59 +0000

This cheat sheet is all you need to learn Markdown.
All the best creating those awesome README files and writing blogs.👍

Table of Contents

Headers
Quotes
Emphasis
Horizontal Rule
Lists
Links
Images
Code
Tables
Custom HTML
Custom CSS

Headers

Headers are defined by the '#' symbol. One '#' for H1, two for H2, etc.

# Heading 1

## Heading 2

...

###### Heading 6

Heading 1

Heading 2

...

Heading 6

Quotes

Quotes are defined by the '>' symbol.

> This is quote

> ### This is header quote

This is quote

This is header quote

Emphasis

Add emphasis with asterisks '*' and underscores '_'.

Two before and after (no spaces) a section of texts makes it bold.

**This text** is bold

This text is bold

One before and after (no spaces) a section of texts makes it italic.

_This text_ is italic

This text is italic

Create strike through text using tilde '~'.

Two before and after (no spaces) a section of texts makes it strike-through.

~~This text~~ is strike-through

~~This text~~ is strike-through

Horizontal Rule

A horizontal rule gives a visible line break. You can create one by putting three or more hyphens, asterisks or underscores (-, *, _).

---

Lists

You can create sub-lists by indenting.

Create unordered lists using '-', '*', '+'.

- List Item 1
- List Item 2
- List Item 3
  - Sub-List Item 1
  - Sub-List Item 2

List Item 1
List Item 2
List Item 3
- Sub-List Item 1
- Sub-List Item 2

Create ordered lists using a number prefix.

1. List Item 1
2. List Item 2
3. List Item 3
   1. Sub-List Item 1
   2. Sub-List Item 2

List Item 1
List Item 2
List Item 3
1. Sub-List Item 1
2. Sub-List Item 2

Create task list using brackets [].

- [x] Task 1
- [x] Task 2
- [ ] Task 3

[x] Task 1
[x] Task 2
[ ] Task 3

Note - Task list is supported by GitHub

Links

Create a link by surrounding it with angle bracket.

<https://github.com/ganesh-tyjo>

https://github.com/ganesh-tyjo

Create a link with text by surrounding text with brackets, [], and link immediately following with parenthesis ().

[My GitHub Profile](https://github.com/ganesh-tyjo)

My GitHub Profile

You can also show alias for your original link when mouse gets hover over your link. You can do that by providing alias immediately after specifying link in parenthesis ().

[My GitHub Profile](https://github.com/ganesh-tyjo 'github/ganesh-tyjo')

My GitHub Profile

What if you needed to reuse a link several times? Well, you could copy and paste that link each time. That means, if you need to update the link, you will have to do it each time its used. There's a better way!

Create reference style links by defining your link with a 'key' inside of brackets, colon, space, and the link.

[my-profile-link]: https://github.com/ganesh-tyjo

Then use the reference style link by using your text inside of brackets followed by the link 'key' inside of bracket.

[My GitHub Profile][my-profile-link]

My GitHub Profile

You can also link to other locations on your markdown page. Remember, your Markdown will get converted to HTML, so you can, in theory, use a anchor tag to link to an element with a specific ID.

When you create a header tag, it implicitly creates an id property.

Ex - '# Header' becomes <h1 id="header">Header</h1>

Names will be converted to ids by replacing spaces with hyphens and uppercase letters with lowercase letters (think css naming convention).

Ex 'Header Info' becomes header-info

Now link to headers section of this document

[Go To Headers](#headers)

Go To Headers

Images

Defining an image is similar to defining a link, except you prefix it with '!'.

![Markdown Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmqplzeeziemp2ztrw56.png)

Code

You can do inline code with back-ticks.

`This text` is inline code

This text is inline code

You can do blocks of code by surround it with 3 back-ticks.

var num1 = 0;
var num2 = 0;

<div>
  <p>This is an html example</p>
</div>

npm install

Tables

Tables are useful for displaying rows and columns of data. Column headers can be defined in between pipes (|). Headers are separated from table content with a row of dashes (-) (still separated by pipes), and there must be at least 3 dashes between each header. The row data follows beneath (still separated by pipes).

| Header 1    | Header 2    | Header 3    |
| ----------- | ----------- | ----------- |
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |

Header 1	Header 2	Header 3
Row 1 Col 1	Row 1 Col 2	Row 1 Col 3

You can also align (center, left, right) the text in a column by using colons (:) in the line breaks between headers and rows. No colon means the default left alignment. Colons on each side signifies center alignment. And a trailing colon means right alignment.

| Header 1                                  |                 Header 2                  |                                  Header 3 |
| ----------------------------------------- | :---------------------------------------: | ----------------------------------------: |
| Aligned Left                              |              Aligned Center               |                             Aligned Right |
| Large string to show alignment is working | Large string to show alignment is working | Large string to show alignment is working |

Header 1	Header 2	Header 3
Aligned Left	Aligned Center	Aligned Right
Large string to show alignment is working	Large string to show alignment is working	Large string to show alignment is working

Note - Table alignment supported by GitHub

Custom HTML

Since Markdown gets automatically converted to HTML, you can add raw HTML directly to your Markdown.

<p class="paragraph">This is a paragraph created with HTML</p>

This is a paragraph created with HTML

Custom CSS

You can also add custom CSS to your Markdown to add additional styling to your document. You can also include CSS by including a style tag.

<style>
.paragraph{
  color:#31a1d6;
  border: 1px solid #e8e9ea;
  border-radius:15px;
  padding:10px;
}
</style>

Note - Custom CSS is supported by markdown but GitHub ignores custom CSS, so whatever written inside <style></style> tag won't show any difference in GitHub markdown preview. Also not sure which previewers supports custom CSS.

NPM Cheat Sheet

Ganesh Shinde — Sun, 13 Jun 2021 04:56:16 +0000

This cheat sheet includes commands which will help you while using NPM packages and modules.
Don't worry about remembering all these NPM commands, Take a look at this cheat sheet whenever required.😉
Now go ahead and create something awesome.😎

Table of Contents

Get Version
Get Help
Create package.json
Set Defaults
Get Defaults
Remove Defaults
Install Packages
Install Certain Version
Update Packages
Remove Packages
Move to Another Folder
Find Root Folder
List Packages
NPM Scripts
Package Version

Get Version

npm -v

npm --version

Get Help

npm

npm help

Create package.json

npm init

# Below commands will create package.json file with default values
npm init -y

npm init --yes

Set Defaults

npm config set init-author-name 'YOUR NAME'

npm config set init-license 'MIT'

Get Defaults

npm config get init-author-name

npm config get init-license

Remove Defaults

npm config delete init-author-name

npm config delete init-license

Install Packages

Globally

npm install -g package-name

Production dependency

npm install --save package-name

Development dependency

npm install --save-dev package-name

Install Certain Version

Globally

npm install -g package-name@package-version

Production dependency

npm install --save package-name@package-version

Development dependency

npm install --save-dev package-name@package-version

Update Packages

Globally

npm update -g package-name

Production dependency

npm update --save package-name

Development dependency

npm update --save-dev package-name

Remove Packages

Globally

npm uninstall -g package-name

Production dependency

npm uninstall --save package-name

Development dependency

npm uninstall --save-dev package-name

Move to Another Folder

NPM stores installed packages inside node_modules folder.
Most people usually doesn't share node_modules folder along with their code, because you can easily install all the NPM packages they have used using below commands.

Install production and development dependencies.

npm install

Install production dependencies only.

npm install --production

Find Root Folder

Globally

npm root -g

Locally

npm root

List Packages

Globally

npm list -g

npm list -g --depth 0

npm list -g --depth 1

Locally

npm list

npm list --depth 0

npm list --depth 1

NPM Scripts

Define scripts in package.json file.

"scripts": {
  "start": "node index.js",
  "script-name":"command-to-run"
}

Run scripts

# Only "start" script will execute without run command
npm start

npm run script-name

Package Version

Find below, What package version with different symbols (*, ~, ^) represents in package.json file.

Version	Result
"*"	Install package with latest version
"4.17.3"	Install package with exact version
"~4.17.`3`"	Install package with latest patch update (Highlighted part gets updated)
"^4.`17.3`"	Install package with latest minor update (Highlighted part gets updated)

Most Preferred

"package-name": "^4.17.3"