Op de lijst van items voor het examen van de 70-486 staan deze items benoemd. Ik verwacht dat er geen of algemene vragen over gesteld worden, maar ik ben liever voorbereid door er méér van te weten dan nodig is, in plaats van dat ik straks vragen krijg waar ik geen enkel antwoord op weet. Daarom op maandag 8 oktober begonnen met Bower en Grunt.
Een aantal jaren geleden kwam ik bij de fitness iemand tegen die een goede site aan me doorgaf waar allemaal tutorials op staan. Omdat ik voor het examen van 70-486 bezig ben, daar deze onderwerpen benoemd worden, wilde ik die tutorials even doornemen. Je raadt het al, geen idee meer wat de URL van die site was... Na een korte zoek-actie kom ik uit bij https://css-tricks.com/gulp-for-beginners/. Even snel doorgebladerd, ziet er uit als een gedegen tutorial. Via een LinkedIn bericht kwam ik uit op de pagina van Adam Tuliper, werkzaam bij Microsoft. Hij heeft een eigen blog en in 2015 een artikel geplaatst (het artikel wat ik zocht, maar op LinkedIn een 404 gaf). Dit is het artikel op msdn.microsoft.com. Het is natuurlijk een wat ouder artikel, als ik nog even zoek op visual studio 2017 gulp, dan kom ik uit op deze pagina waar ook wel een goed voorbeeld staat: https://blog.bitscry.com/2018/03/13/using-npm-and-gulp-in-visual-studio-2017/.
Maar goed, ik heb nu nog niets, dus ik begin gewoon bij het blog van Adam. Dat begint op de blog-post waar hij naar verwijst: https://msdn.microsoft.com/magazine/mt573714. Eerst maar eens even in de command-prompt (windows-toets + R indrukken, vervolgens commando cmd) het commando npm en node intypen. Dat werkt al, dus ik hoef die installatie niet meer uit te voeren. Begin dit jaar heb ik namelijk mijn eerste stappen gedaan met Angular, de basis daarvan is dat je NPM en Node installeert. Daar staat ook de rechtstreekse link: blog-post Angular. We kunnen dus door met de volgende stap. Dat is het installeren van GIT. Maar dat heb ik zo te zien ook al eens eerder gedaan. Mocht je GIT nog niet hebben (op je Windows-machine), hier is de link: https://gitforwindows.org/. Dan ga ik nu echt wat doen. Want bower had ik nog niet geïnstalleerd. Voer in de command-prompt dus het commando npm install -g bower uit. Als ik dat gedaan heb krijg ik een warning van NPM te zien: We don't recommend using Bower for new projects. Please consider Yarn and Webpack or Parcel, met een referentie naar https://bower.io/blog/2017/how-to-migrate-away-from-bower/. Het ziet er dus naar uit dat ik nu iets probeer te doen met een pakket wat uitgerangeerd is. Toch maar even de voorbeeldcommando's doorlopen. Met de bower install jquery --save krijg ik inderdaad een flinke rits bestanden in een map bower_components/jquery. Met het commando bower.init krijg ik netjes een bower.json-bestand met de huidige instellingen. Meer informatie is te vinden op de Github-locatie.
We gaan door met het blog van Adam, we gaan Grunt installeren. Daar levert hij de volgende commando's bij aan:
#only do this once to globally install the grunt command line runner npm install –g grunt-cli #run within your project folder one time to create package.json #this file will track your installed npm dependencies #like grunt and the grunt plug-ins, similar to bower.json (see the last article) npm init #install grunt as a dev dependency into your project (again see last article) #we will still need a gruntfile.js though to configure grunt npm install grunt –save-dev
Hierna moet je een gruntfile.js of gruntfile.coffee maken. Ik kies hier voor de gruntfile.js met deze inhoud dit ook op het blog staat:
module.exports = function (grunt) { // Where does uglify come from? Installing it via: // npm install grunt-contrib-uglify --save-dev grunt.initConfig({ uglify: { my_target: { files: { 'dest/output.min.js': '*.js' } } } }); // Warning: make sure you load your tasks from the // packages you've installed! grunt.loadNpmTasks('grunt-contrib-uglify'); // When running Grunt at cmd line with no params, // you need a default task registered, so use uglify grunt.registerTask('default', ['uglify']); // You can include custom code right inside your own task, // as well as use the above plug-ins grunt.registerTask('customtask', function () { console.log("\r\nRunning a custom task"); }); };
Als ik nu in de command-prompt grunt aanroep, dan krijg je de melding dat grunt-contrib-uglify niet bekend is. Die moet je nog installeren. Dat doe je met npm install grunt-contrib-uglify. Vervolgens werkt het grunt statement wel. Doet nu niet zoveel nuttigs, want het grunt.js bestand wordt nu naar dest/output.min.js geminified. Ik heb daarom de regel met 'dest/output.min.js' : '*.js' daarom even vervangen met ' 'dest/output.min.js': 'bower_components/jquery/src/*.js''
Dat ziet er al goed uit. In het blog wordt ook nog even het voorbeeld gegeven waarbij zowel de uglify als een concat wordt uitgevoerd: grunt.registerTask('default', ['uglify', 'concat']); Daarbij kwam ik in een melding ook nog even de verwijzing tegen naar de officiële site van grunt: https://gruntjs.com/
Tot zover het Grunt deel, op dinsdag 9 oktober ga ik door met Gulp. Eerst maar volgens de stappen installeren:
#Only do this once to globally install gulp npm install –g gulp #Run within your project folder one time to create package.json #this file will track your installed npm dependencies #like gulp and the gulp plug-ins npm init #Install gulp as a dev dependency into your project #we will still need a gulpfile.js to configure gulp npm install gulp --save-dev
Daarna het voorbeeld gebruikt, en daarvoor een aantal acties moeten uitvoeren zoals npm install gulp-uglify om de functie te kunnen gebruiken.
Hierna in mijn nieuwe ASP.NET Core project het bestand gulp.js geplaatst met de volgende inhoud:
// All the 'requires' to load your
// various plug-ins and gulp itself
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');gulp.task('build', function () {
gulp.src('./src/*.js')
.pipe(concat('script.js'))
.pipe(uglify('script.js'))
.pipe(gulp.dest('./wwwroot/scripts'));
});
In Visual Studio 2017 krijg je als je met de rechtermuisknop op dit bestand klikt de optie Task Runner Explorer. Daar wordt echter getoond dat er geen taken zijn. Huh? Maar dat komt omdat ik in die map via de terminal nog niet npm install uitgevoerd heb ( link ). Dit werkt zo niet. Dan de stappen maar volgen van deze pagina: https://blog.bitscry.com/2018/03/13/using-npm-and-gulp-in-visual-studio-2017/
Dus een npm install gulp --save
Hierdoor komt onderstaand blok in mijn package.json erbij:
"dependencies": {
"gulp": "^3.9.1"
}
Na het klikken op het refresh-knopje krijg ik wel de functie in beeld! Maar als ik daarna even in de map kijk, zie ik dat er een map node_modules aangemaakt is met heel veel meuk. Dat wil ik niet. Daarvoor had ik de boel toch "globaal" geïnstalleerd? Als laatste punt staat in dit artikel dat je de locatie van nodejs moet toevoegen (in mijn geval op de D-schijf): link. Als ik dat doe raak ik inderdaad het uitroepteken bij Dependencies - NPM kwijt, maar zie ik dat ook weer allemaal mappen en bestanden naar node_modules gekopieerd worden. Schijnbaar hoort het erbij. In ieder geval, ik kwam ook nog een duidelijk voorbeeld van Microsoft zelf tegen qua gebruik: https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1