Basic gulp.js plugins
Chapter - 3






Gulp Plugins

It is the third part of the gulp for beginners series which deals in introducing gulp.js and then making you familiar with some basic gulp plugins. This article talks about 4 gulp plugins which are

  1. gulp-sass
  2. gulp-typescript
  3. gulp-markdown
  4. gulp-coffee

#gulp-sass

gulp-sass plugin is used to convert .sass file to .css file


		        
var gulp = require('gulp');			
var sass =  require('gulp-sass');
gulp.task('sass', function () {
	return gulp.src('source/*.scss')
	.pipe(sass().on('error', sass.logError))
	.pipe(gulp.dest('./css'));
});
                
	            

Run it at bash or command line using the following command :


					
$gulp	sass
					
	            

#gulp-typescript

This is a typescript compiler for gulp which is used to convert typescript files into javascript .


		        
var gulp = require('gulp');
var type = require('gulp-typescript');

gulp.task('default', function () {
    return gulp.src('source/*.ts')
        .pipe(type({
            noImplicitAny: true,
            out: 'type.js'
        }))
        .pipe(gulp.dest('./css'));
});
                
	            

Run it at bash or command line using the following command


		        
$gulp
                
	            

#gulp-markdown

gulp plugin used to convert markdown code to html code snippet .

							
var gulp = require('gulp');
var markdown = require('gulp-markdown');

gulp.task('default', function () {
    return gulp.src('source/mark.md')
        .pipe(markdown())
        .pipe(gulp.dest('dist'));
});
							
							

Run it at bash or command line using the following command :


							
$ gulp	
							
						


#gulp-coffee

This Gulp plugin is used to convert .coffee script files into .js javascript files.

							
var gulp = require('gulp');
var coffee = require('gulp-coffee');			
gulp.task('coffee' , function() {
	return gulp.src('source/*.coffee')
	.pipe(coffee())
	.pipe(gulp.dest('dest'));
});
							
							

Run it at bash or command line using the following command :


							
$ gulp	coffee
							
						

Summary

We learned about 4 packages related to gulp which includes gulp-sass , gulp-typescript , gulp-markdown , gulp-coffee .