Gulp plugins

Na de introductie van Gulp zullen we ingaan op de  Gulp plugins.  Het enige wat Gulp zelf kan doen is taken uitvoeren, het kan bestanden inlezen, opslaan op een andere locatie en automatisch een taak uitvoeren zodra er een bestand is gewijzigd. Met de vele Gulp plugins die er zijn kan je daadwerkelijk iets met de bestanden doen of andere handige taken uitvoeren.

Populaire en handige Gulp plugins

Er zijn vele Gulp plugins, maar er zijn een paar de wij zelf bij elk project gebruiken:

gulp-watch

Deze plugin houdt bestanden in de gaten en zodra de opgegeven bestanden gewijzigd worden kan je een taak laten uitvoeren. Heel handig als je werkt met Less, Sass of PostCSS, zodra je het bestand opslaat, dan wordt er automatisch een CSS bestand gegenereerd en hoef je dit niet meer handmatig te doen!

Om de plugin gulp-watch te kunnen gebruiken moet je hem eerst installeren met npm install --save-dev gulp-watch.

gulp-notify

Het nadeel van taken die geautomatiseerd uitgevoerd worden is dat je geen feedback krijgt dat ze uitgevoerd worden. Met gulp-notify krijgt je een notificatie in je scherm zodra er een actie is uitgevoerd. Je kunt zelf instellen wanneer je een notificatie wilt zien.

Gulp plugins: gulp-notifyDe afbeelding hierboven is een notificatie die van onderstaande code. Om de notificaties te kunnen gebruiken moet je eerst de gulp plugin installeren met npm install --save-dev gulp-notify.

var gulp = require('gulp');
var notify = require("gulp-notify");

gulp.task('default', function() {
    gulp.src("./src/main.less")
    .pipe(notify({
        title: 'Dit is de titel',
	message: 'Gulp notificaties zijn geweldig!',
	icon: './icon.png', 
	sound: true, 
	wait: true
    }));
});