Gulp Basics - Gulp


In the following chapter, you will some of the important basics related to Gulp.

What is a Build System?

A Build System is known as a collective collection of tasks ( task runners), which are used to repeat the automated repetitive work.

The following is a list of tasks which can be controlled using a build system:

  • Concatenation of various files into a single file
  • Minification of files so as to reduce the size of the file.
  • Preprocessing CSS and JavaScript for compilation.
  • Allowing the server for automatic reloading.
  • It helps us in the creation of deployment builds which are used to store the resulting files into a single location.

In the present front-end workflow, the build system consists of 3 components,They are:

  • Preprocessors
  • Task runners and build tools
  • Package managers

What are Package Managers?

These are used to automate the installation upgrade,to clean libraries, for the removal of required dependencies, and the packages used in development environment. Some examples of package managers are npm and bower.

What are Pre-processors?

These are very useful for the efficient modern workflow and adds an optimized syntax along with some additional features that helps us in compiling in its native language.

Some of the very well known preprocessors are:

  • HTML – HAML, Markdown, Jade, Slim, etc.
  • CSS - Stylus ,SASS and LESS.
  • JS -TypeScript, CoffeeScript, LiveScript,etc.

Task Runners

Task runners are generally use for the automation of tasks such as SASS to CSS conversion,optimization of images,for the minification of files, and many other tasks which are used in the development of workflow. So,gulp is one of such task runner that works in the modern front-end environment and uses a Node to run.

How to set up up your Gulp project ?

To start or set up your project in your computer,first create a folder called “setup” for example. The setup folder contains the following files and sub-folders :

SRC – It is the location of pre-processed HTML source files and folders.

  • Styles - It contains a number of multiple pre-processed CSS files.
  • Images - Images which are uncompressed are present in this folder.
  • Scripts – Contains multiple pre-processed script files.

BUILD – This is a folder which has been created automatically to contain the production files.

  • Images – It contains compressed images.
  • Scripts – It is a single script file which contains minfied codes.
  • Styles – It is a single CSS file that contains minified codes.

Gulpfile.js – It is a configuration file which can be used for defining our tasks.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Gulp Topics