Frontend Management Using GULP.JS

Originally Posted On...

Gulp deals with rendered HTML content, compressing and minified assets, compiling Sass to CSS code, deploying files from development to the production side, automating the most frustrating tasks, etc.

Gulp is the task manager that helps with developing applications. It allows specifying tasks that for example process files or run different programs. The commands can be easily chainable which results in better re-usability. There can also be established dependency between the commands.

What you should know? It is a command Line toolkit (CLI-based tool) so you should be familiar with the terminal. Also, you should have knowledge of the basics of javascript, install node.js and also install Node Package Manager (NPM).

Why use Gulp.js? Gulp deals with rendered HTML content, compressing and minified assets, compiling Sass to CSS code, deploying files from development to the production side, automating the most frustrating tasks, etc.

Gulp is the task manager that helps with developing applications. It allows specifying tasks that for example process files or run different programs. The commands can be easily chainable which results in better re-usability. There can also be established dependency between the commands.

Introduction : Gulp is a task runner toolkit to automate & enhance your workflow. It is used to automate slow, repetitive workflows and compose them into efficient build pipelines in web development.

Installing Gulp: To check Node and NPM are installed in the machine or not run the following command:

Node –version
npm –version

Install the gulp command line globally.

$ npm install --global gulp-cli
Create a project folder and navigate to it.

$ mkdir sample_project
$ cd sample_project
$ npm init
$ npm install --save-dev gulp (It will install the gulp package in your dev dependency)
$ gulp –version (verify your gulp version)
Create a “gulpfile.js” (or Capitalized Gulpfile.js).

-Create a file named gulpfile.js in your project folder.
Role: The file called gulpfile.js holds the specification of tasks It will be run automatically when you run the ‘gulp’ command. It is written in JavaScript and therefore it is easy to use different libraries Note: if you are using Typescript, rename to gulpfile.ts and install ts-node module and same for babel, rename to gulpfile.babel.js and install @babel/register module.

What are Tasks in a gulp: The task is asynchronous javascript functions to execute it. There are two types of tasks, public tasks which allow you to execute tasks using the gulp command over all projects, and private tasks are made to be used internally, it looks like other tasks but the end user can’t execute them independently.

To register as a public task it should be exported.

**Series() & parallel() are the composing methods that allow any number of task functions. They will execute tasks as per their names in series and parallel respectively.

src() and dest() interact with files in your computer to read files from the source and end or put files to a destination within the stream. Here src can be operated in three diff modes: streaming, buffering, and empty.

pipe() is there to chain transform files.**

Note: Before putting it at the destination we can apply an operation on files. There are many modules available to make it easy. For example, uglifyJS is a javascript parser, composer, and beautifier toolkit, and ‘rename’ is to change the file name on the production side.

For example: const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
exports.default = function() {
return src('src/.js')
.pipe(src('vendor/.js'))
.pipe(dest('output/'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(dest('output/'));
}

Here all js files will be minified and renamed by filename.min.js and stored in the/dest folder. GLOB: it is a string used to match file paths.

For example:

‘src/.js’ : will consider all .js files available in the src folder.
'scripts/**/.js'’ : will consider all .js files in /script folder and in subfolder too.
['scripts//*.js' ’: '!scripts/vendor/special'] : from the script folder it will consider all .js files except the folder /vendor.

Conclude: Gulp toolkit is handy for web developers to make it easy on the production side of web development. Still, many features are there which will be discussed in part-2.

Get In Touch With Us To Know More...