Top 5 gulp plugins

In the previous Post  We saw how gulp can make doing regular tasks much easier in our front end/javascript  programs.

In the last post I mentioned that there are many useful plugins for gulp and in this article We’ll overview the best of them and learn how to use them.

(the list is in random order)

1-gulp-imagemin

It’s always better to lower the size of our web sites or applications as much as possible and images play an important role in that. this plugin can be really helpful, it sometimes decreases jpg, png and svg files sizes significantly. usage with gulp 4:

function minifyImages(cb){
    src('src/images/*')
        .pipe(imagemin())
        .pipe(dest('dist/images'))
    cb();
}

2-uglify and uglifycss

uglify minifies js and uglifycss does the same thing for css files.

usage:

// uglifycss
function minifyCSS(cb){
    src('src/*.css')
        .pipe(uglifycss())
        .pipe(dest('dist/'))
    cb();
}

// uglify
function compileJS(cb){
    src('src/*.js')
        .pipe(uglify())
        .pipe(dest('dist/'))
    cb();
}

3- gulp-responsive

As I mentioned earlier we need our websites and apps load fast and run quickly using large images for small img elements or as background images for small elements is a bad Idea, using this awesome plugin you can generate multiple images with different sizes.

4- gulp-babel

Still some of older browsers don’t support JavaScript ES6 and newer versions features, babel converts es6 js code to es5 and with gulp-babel we can do that automatically:

function babelJS(cb){
    src('src/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(dest('dist/'))
    cb();
}

5- gulp-w3cjs

writing w3c standard HTML code is  important for any website’s seo.

this useful gulp plugin logs your mistakes.

usage:

function w3c(cb){
	src('src/*.html')
		.pipe(w3cjs())
		.pipe(w3cjs.reporter())
        cb();
}