Magento2 en gulp in plaats van grunt

26 januari 2016

Er is al heel erg veel over geschreven, al zijn alle nieuwe technieken een grote vooruitgang van Magento 2. Er zijn ook genoeg kritieken te vinden. Zo hadden veel ontwikkelaars liever Gulp gezien in plaats van Grunt, of Sass in plaats van Less. Zelf liep ik direct aan tegen het CSS pre-processen aan. In dit korte artikel een hulpje voor ieder die Gulp wilt gebruiken in combinatie met Magento2 en Livereload.

De file die ik heb gemaakt blinkt niet uit in schoonheid, technische complexiteit of innovatie. Toch denk ik dat het waardevol genoeg is om dit te delen. Ik liep tijdens het ontwikkelen van ons eerste Magento 2 project gelijk aan tegen de snelheid van het CSS pre-processen, vooral in een laatste fase van een project waarin veel kleine CSS zaken worden opgeschoond en verbeterd was dit een doorn in het oog. Nu met deze simpele Gulp / Magento2 oplossing vind hij middels de gulp watch commando je aanpassingen binnen enkele milliseconden en is de .css file sneller verwerkt en ververst dan je op ALT+TAB kan klikken om naar je chrome window te gaan.

Gulp installatie voor Magento2

Om gulp te kunnen gebruiken zijn een aantal stappen nodig. Installeer eerst gulp
sudo npm install gulp -g

Vervolgens installeer je ook gulp lokaal.
npm install gulp --save-dev

In de gulpfile gebruiken we verschillende plug-in’s voor o.a. Livereload, Less, Sourcemaps, Concat enz. Installeer deze:
npm install jshint gulp-jshint gulp-less gulp-concat gulp-uglify gulp-rename gulp-util gulp-livereload --save-dev

Vervolgens maak je een gulpfile.js aan in de root van de magento installatie.
De gulpfile die ik heb gebruikt is als volgt:


var gulp = require('gulp'),
jshint = require('gulp-jshint'),
less = require('gulp-less'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
livereload = require('gulp-livereload'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
return gulp.src(['app/design/frontend/[vendor]/[theme]/web/css/[cssname].less'])
.pipe(less())
.pipe( sourcemaps.write() )
.pipe( livereload() )
.pipe(gulp.dest('pub/static/frontend/[vendor/[theme]/nl_NL/css'));
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/design/frontend/[vendor/[theme]/web/css/*.less', ['less']);
});
gulp.task('default', ['less', 'watch']);

Dit is echt een eerste aanzet, daarom raad ik de Gist te volgen op Github. Er komen ongetwijfeld snel revisie’s aan die de functionaliteit uitbreiden of verbeteren. Advies en tips zijn natuurlijk ook altijd welkom!

Vervolgens hoef je alleen nog maar
gulp watch
te doen en hoppa hij draait.
Vergeet niet de livereload extensie voor chrome te downloaden, dit is echt een mega time-saver.

Blijf op de hoogte? Ontvang periodiek updates met interessante artikelen