Introduction to Gulp.js

Standard

Core Feature of Gulp

  • Minification
  • Concatenation
  • Vendor prefixes
  • Less to CSS compilation
  • Optimizing 3rdparty and custom code
  • Injecting files into HTML
  • File revisions and versioning
  • Caching Angular templates
  • Testing
  • Code analysis

It streamline your SDLC cycle more efficiently using flow of continuous integration, testing and development. It help to improve quality, deliver faster and consistent.

1

Difference between Grunt and Gulp

Gulp is more codish as compare to grunt which is more into configuration, so Gulp is more readable, easier to debug. Its stream based so used node more readily.

2

Gulp Workflow

  • Fetch files to be modify
  • Modify the files
  • Create new files

3

Since Gulp is stream based, so in pipeline architecture, diagram would be as follows

4

5

Gulp API

  1. gulp.task == Define a task
  2. gulp.src == read files
  3. gulp.dest == write the files
  4. gulp.watch == watch the files when making code changes
    gulp.task('TaskName', [dependencyItem], function () {
        return gulp
            .src('./sourcePath')
            .pipe(operation)
            .pipe(gulp.dest('./destinationPath'));
    });
    

     

    gulp.task

    gulp.task(taskName [, arary of dependencies], function)
    
    • Register a task
    • Dependencies are optional
    • Dependencies are executed in parallel not in sequential order
    • Actual task is executed soon after completion of dependencies


gulp.src

gulp.src(file path [, options])
  • Fetch set of files to be modified
  • Wildcard operators may be used to emit/add files
  • Optionally specify options to apply to set of files (e.g. how much of path to be retained)


gulp.dest

gulp.dest(output folder path [, options])
  • Modified files are written to destination output folder
  • Write piped files to new file or same file
  • Optionally specify options to apply to set of output files or folder

    gulp.watch
     

    Used to monitor files when altering code during development

       gulp.watch(file path [, options], [task name])
    
    • Execute single or multiple tasks for the files matched with the file path
    • Optionally specify options to apply to set of files
      gulp.watch(file path [, options], CallbackFunction)
      
    • Optionally specify options to apply to set of files
    • Execute call back function for the files matched with the file path

 

*Images created by John Papa

Advertisements

One thought on “Introduction to Gulp.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s