Honderd keer per dag je browser refreshen, je code minifyen, afbeeldingen optimaliseren. Het starten en refreshen van je browser wanneer er een bestand veranderd is. Dit zijn allemaal dingen die je als web developer bijna dagelijks doet. Hoe zou het zijn als je dit allemaal met een command in de terminal zou kunnen doen?

Een introductie tot Gulp.js

Gulp is een automation tool. Het voert taken uit die jij hebt gedefineerd. Deze taken kunnen de dingen zijn die in de inleiding als voorbeeld staan, maar er zijn nog veel meer mogelijkheden met de meer dan 2100 plugins die er beschikbaar zijn. Doordat Gulp werkt met plugins is het klein en snel. Je installeert en gebuikt alleen de plugins die je nodig hebt.

Beginnen met Gulp

Gulp is een NPM package. Dus voordat je Gulp kan installeren heb je Node.js en NPM nodig. Op de website van Node.js staat hoe je deze moet installeren.

Nu kunnen we gulp installeren. Start eerst je terminal. Deze staat op je mac in de map

/Applications/Utilities/Terminal.app

Gulp installeren doe je door het onderstaande commando uit te voeren.

npm install -g gulp

npm = de manier hoe je npm aan spreekt.

install = het installer commando van npm

-g = de npm package moet globaal geïnstalleerd worden. Dit houd in dat je het vanuit elke map op je computer kan uitvoeren.

gulp = is de naam van de package die je wilt installeren.

Wanneer je een error krijgt licht dit vaak aan onvoldoende rechten. Dit los je op door `sudo` voor het command zetten. Dit houd in dat je het als administrator wilt uitvoeren.

Het maken van een gulp project

In dit voorbeeld ga je onderstaande gulp flow bouwen.

  • Combineer de CSS bestanden tot een bestand
  • Prefix de CSS- Minify de CSS
  • Zet het nieuwe CSS bestaand in een map.

Op github staat een start project. Deze kan je downloaded van Github. In dit project heb ik de volgende bestandsindeling gemaakt.

new-gulp-project/ 
  src/ 
    css/ 
      main.css 
      reset.css 
    js/ 
      script.js 
  index.html 
  gulpfile.js

Wanneer je het project hebt gedownload moet je gulp in de map installeren. Open je terminal weer en ga naar de map op je computer. Dit doe je door onderstaande regel uit te voeren in je terminal.

cd /path/to/new-gulp-project

Hierna installeren we gulp lokaal in deze map. Dit doe je door onderstaande regel uit te voeren.

npm install gulp --save-dev

save-dev = sla hem op in het package.json file zodat je makkelijk de packages kan installeren op een andere computer.

De taken schrijven

Om de verschillende taken uit te voeren heb je verschillende gulp plugins nodig. Hier onder staat hoe je deze moet installeren.

npm install gulp-concat --save-dev 
npm install gulp-cssnano --save-dev 
npm install gulp-autoprefixer --save-dev

Open nu de gulpfile.js.

Voeg onderstaande code bovenaan het bestand toe.

var gulp = require('gulp'); 
var concat = require('gulp-concat'); 
var cssnano = require('gulp-cssnano'); 
var autoprefixer = require('gulp-autoprefixer');

Wat deze code doet is het importeren van deze script bestanden. Je kan deze dan verderop in je gulp file gebruiken. Voeg daarbij onderstaande code onderaan het bestand toe. In de comments staat wat de code doet.

gulp.task('styles', function () { 
	gulp.src('src/css/*.css') // hij pakt alle css files in de map 'src/css/' 
	.pipe(concat('main.css')) // hij combineert de bestanden tot een 'main.css' bestand 
	.pipe(autoprefixer()) // hij voegt prefixes to aan de code zodat het in oudere browsers ook werkt. 
	.pipe(cssnano()) // hij minifyd de code 
	.pipe(gulp.dest('dist/css/')) // zet het bestand in de map 'dist/css' });

Om de code nu uit te voeren voer dan de volgende regel uit in de terminal.

gulp styles

De code die je net hebt gedefineerd voert gulp uit met het bovenstaande commando uit.

Refresh je browser automatisch bij een css verandering

Bij dit gulp script moet je elke keer op nieuw 'gulp styles uitvoeren als je je css verandert hebt. Dit is dus nog omslachtig. Hieronder ga ik uitleggen hoe je dit niet meer hoeft te doen.

Hiervoor moet zijn nog wel een npm packages nodig. Voer onderstaande commando's uit om deze te installeren. Deze package is browser sync. Dit is een handige npm plugin waarmee je een locale server kan opzetten. Daarnaast synchroniseert hij alle browsers met elkaar. Dus als je op je laptop scrolt, scrolt de browser op je mobiel ook mee. Dit werkt ook bij formuleren, links en een aantal ander dingen. Op de site van browser sync kan je alles hierover vinden.

npm install browser-sync --save-dev

Voeg onderstaande code toe aan je 'gulpfile.js'.

gulp.task('watch', function () { // maak een LiveReload server 	   
  
  //kijk naar veranderingen in de map 'src/css' 
  browserSync.init({ 
    server: { baseDir: \"./\" } 
  }); 
  //kijk naar veranderingen in de map '/dist/' en als er een verandering is herlaad de browser.
  gulp.watch('./src/css/*.css', 
     ['styles']
  );  
  
  gulp.watch({ 
    glob: 'dist/**' 
  }, [browserSync.reload]); });

Voer nu de onderstaande command uit.

gulp watch

Je ziet dat er een nieuw browser venster geopend word. Wanneer je de url kopieertin een andere browser zie je dat ze allebei meescrollen.

Samengevat

Hieronder staat het hele bestand dat je hebt gemaakt. Ook staat er een gulp task in die naar de javascript bestanden kijkt en deze combineert.

Je moet nog wel onderstaande plugins installeren.

npm install gulp-uglify --save-dev 
npm install gulp-notify --save-dev 
npm install gulp-babel --save-dev 
npm install babel-preset-es2015 --save-dev

De gulp file:

// Load plugins 
var gulp = require('gulp'), 
  babel = require('gulp-babel'), 
  uglify = require('gulp-uglify'), 
  concat = require('gulp-concat'), 
  notify = require('gulp-notify'), 
  cssnano = require('gulp-cssnano'), 
  browserSync = require('browser-sync'); // Styles gulp.task('styles', 

    function (cb) { 
      gulp.src(['src/js/*.css']) 
         .pipe(concat('main.css')) 
         .pipe(cssnano()) 
         .pipe(gulp.dest('dist/css/')) 
      }); 

      // Scripts 
      gulp.task('scripts', function (cb) { 
        gulp.src('src/js/*.js') 
         .pipe(concat('weatherApp.js')) 
         .pipe(babel({ presets: ['es2015'] })) 
         .pipe(uglify()) 
         .pipe(gulp.dest('dist/js/')) 
         .pipe(notify({ message: 'Scripts task complete' })); 
      }); 
		
      // Default task 
      gulp.task('default', function () { 
         gulp.start('styles', 'scripts', 'worker'); 
      }); 
			
      // Watch task 
      gulp.task('watch', function () { 
       browserSync.init({ 
         server: { baseDir: "./" } 
      }); 

      // Watch .js files 
      gulp.watch('./src/css/*.css', ['styles']);
      
      // Create LiveReload server 
      gulp.watch('./src/js/*.js', ['scripts']); 
      gulp.watch(
        { glob: 'dist/**' }, 
        [browserSync.reload]
      ); 
});