Gulp

Published On - September 29, 2017

reshma

Installation Make sure that you’ve installed Node and npm before attempting to install gulp. Install the gulp command 

npm install --global gulp-cli
Make sure that you have your package.json created by manually creating it or typing npm init. Run this command in your project directory: 
npm install --save-dev gulp

Create a gulpfile

In your project directory, create a file named gulpfile.js in your project root with these contents: 
var gulp = require('gulp');
gulp.task('task-name', function() {
  // place code for your default task here
});
The first step to using Gulp is to require it in the gulpfile. Then you can begin to write a gulp task with this gulp variable. task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name. Run the gulp command in your project directory: 
gulp
To run multiple tasks, you can use gulp <task> <othertask> Gulp tasks are usually a bit more complex than this. It usually contains two additional Gulp methods, plus a variety of Gulp plugins. 
gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
  .pipe(aGulpPlugin()) // Sends it through a gulp plugin
  .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})
gulp.src tells the Gulp task what files to use for the task, while gulp.desttells Gulp where to output the files once the task is completed. Now, let’s run a task to compile the Sass. In terminal 
$ npm install gulp-sass --save-dev
In Gulpfile.js, we’ll write: 
var sass = require('gulp-sass');
/**
 * Compile Sass.
 */
gulp.task('sass', function() {
    return gulp.src('./sass/*.scss') // Create a stream in the directory where our Sass files are located.
    .pipe(sass())                    // Compile Sass into style.css.
    .pipe(gulp.dest('./'));          // Write style.css to the project's root directory.
});
A simple task which can be used to compile Sass and create style.css! To execute [‘sass’], simply type the following command into your terminal: 
gulp sass
Gulp can automatically compile Sass each time we save a Sass file 
/**
 * Watch the Sass directory for changes.
 */
gulp.task('watch', function() {
  gulp.watch('./sass/*.scss', ['sass']);  // If a file changes, re-run 'sass'
});
In your terminal, simply type 
gulp watch
Now, anytime you make changes and save any file with a .scss extension, it will trigger this [‘watch’] task which executes [‘sass’]. Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.

Reference

]]>