Gulp - Basics

In this chapter, you will get acquainted with some basics related to Gulp.

What is a Build System?

A Build System is referred to as collection of tasks (collectively called as task runners), which automate the repetitive work.

Following is a pst of some of the tasks that can be handled using the build system −

Compilation of preprocess CSS and JavaScript.

Minification of files to reduce its size.

Concatenation of files into one.

Triggering the server for automatic reloading.

Creation of deployment builds to store the resulting files in one location.

In modern front-end workflow, the build system works with 3 components −

Package managers

Preprocessors

Task runners and build tools

Package Managers

It is used to automate the installation upgrade, removal of required dependencies, clean pbraries, and packages used in the development environment. Example for package managers are bower and npm.

Preprocessors

Preprocessors are very useful for an efficient modern workflow by adding an optimized syntax and additional features that compiles into its native language.

Some of the popular preprocessors are −

CSS − SASS, LESS and Stylus.

JS − CoffeeScript, LiveScript, TypeScript, etc.

HTML − Markdown, HAML, Spm, Jade, etc.

Task Runners

Task runners automate tasks pke SASS to CSS conversion, minify the files, optimize images, and many other tasks used in the development workflow. Gulp is one of the task runner in the modern front-end work environment and it runs on Node.

Setting Up Your Project

To set your project in your computer, create a folder called “work” for example. The work folder contains following sub-folders and files −

Src − Location of pre-processed HTML source files and folders.

Images − Contains images which are uncompressed.

Scripts − Contains multiple pre-processed script files.

Styles − Contains multiple pre-processed CSS files.

Build − This folder will be created automatically which contains the production files.

Images − Contains compressed images.

Scripts − Single script file that contains minified codes.

Styles − Single CSS file that contains minified codes.

gulpfile.js − It is the configuration file, which is used to define our tasks.