Entity view (Content)

Best Gulp.js Plugins For A Front-End Developer

By jharvey
Mar. 25, 2015

Recently, I started using Gulp.js on my Drupal theming projects to automate and enhance my workflow for the front-end part. I had the chance to experiment a few plugins and I will highlight 3 of them that I found very useful.

Autoprefixer

This wonderful tool will parse your CSS and add vendor prefixes based on data from CanIUse. You can specify which browser you want to support so your CSS will be free of long list of prefix lines. You no longer need to worry about prefix vendor. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project by queries like last 3 versions or > 5%. By using this plugin, writing CSS will become very pleasant.

BrowserSync

This is my favorite plugin! BrowserSync makes your tweaking and testing faster by synchronizing file changes and interactions across multiple devices. It is fast and free to run and reuse. Browsersync will tell you the url for your project in the console. It also tells you a UI url. This url is where you’ll find some great features and debugging options such as a remote inspector, url history and interaction sync. You will be able to scroll, click and everything will mirror between all your browsers!

Gulp-load-plugins

If you use Gulp.js you will notice that you need to include each plugin you want to use by requiring them. Gulp-load-plugins will load all your gulp plugins from package.json and make them all accessible via a single object.

var $ = require('gulp-load-plugins')();

 

if I want to use gulp-autoprefixer:

.pipe($.autoprefixer({
browsers: ['last 5 versions', 'Firefix ESR', Opera 12.1],
cascade: false
}))

 

By using these plugins, I was able to remove 10 lines of code in my gulpfile.js!

 There’s plenty other plugins you can use for your project over gulpjs.com.  I suggest you to try a new one each time you start a project and see if you could benefit for your front-end development workflow. 

 

 

Post Tags: