Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet web SPA

AMBIENT INTELLIGENCE

tech days•

2015

#mstechdays techdays.microsoft.fr

Grunt / Bower / Yeoman ou comment automatiser le développement d'un projet web SPA

Maxime LUCECEO @ Touchify

[email protected]

@TouchifyApp

tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA

tech.days 2015#mstechdays

Gestion des dépendances

Compilation / Minification / Tests / Linting

Développement

Tâches récurrentes d’un projet web

Comment automatiser le développement d'un projet web SPA


Node.JS

Scripts simples mais puissant

Projet web donc javascript !

Outils d’automatisation



Bower ?

Grunt ?

Yeoman ?

Outils d’automatisation




Gestionnaire de librairies JS / CSS

Utilisé pour installer et mettre à jour les librairies

Assure l’intégrité des versions

Définition



Registre de librairies JS / CSS

Enregistre les versions dans un fichier bower.json

Arbre de dépendances plat

Comment ça marche ?


Bower

# install bower

$ npm install –g bower

# install a package

$ bower install jquery --save

#install from github

$ bower install user/repo --save-dev

# install from url

$ bower install http://path.to/script.js


Bower




Gestionnaire de tâches Node.JS

Automatise les tâches récurrentes

Enormément de tâches dans NPM

Définition



Configuration dans un fichier Gruntfile.js

Tâches dans NPM ou en local

Simple !!



Grunt CLI

# install grunt globally

$ npm install –g grunt-cli

# install grunt locally

$ npm install grunt --save-dev

# install a task

$ npm install grunt-contrib-concat --save-dev

# run a task

$ grunt concat:dist

Gruntfile.js

module.exports = function (grunt) {

grunt.initConfig({

// task config

concat: {

dist: {

src: "app/*.js",

dest: "dist/app.js"

}

}

});

// load task

grunt.loadNpmTasks("grunt-contrib-concat");

// alias task

grunt.registerTask("build", ["concat:dist"]);

};


Grunt




Gestionnaire de template de projets

Simplifie la création de projet et d’éléments

Force l’utilisation de bonnes pratiques

Définition



Générateurs dans NPM

Utilise Bower pour gérer les dépendances

Utilise Grunt pour gérer les tâches de compilation



Yeoman

# install yeoman

$ npm install –g yo

# install generator

$ npm install –g generator-backbone

# run generator

$ yo backbone

# run sub generator

$ yo backbone:model user


Yeoman



Create a simple Grunt Task


grunt.registerTask("myCustomTask", function () {

// read package.json to get version

var pkg = grunt.file.readJSON("package.json");

// get the version.js content

var content = grunt.file.read("version.js");

// replace the tag {{version}} by the package’s version

content = content.replace("{{version}}", pkg.version);

// write the new content into version.js

grunt.file.write("version.js", content);

});

};

Create a multi Grunt Task


grunt.registerMultiTask("myVersionTask", function () {

var pkg = grunt.file.readJSON("package.json");

// loop over configured files

this.files.forEach(function (file) {

// loop over src / dest match

file.src.forEach(function (src) {

var content = grunt.file.read(src);

content = content.replace("{{version}}", pkg.version);

grunt.file.write("version.js", file.dest);

});

});

});

};

Create a multi Grunt Task


grunt.initConfig({

// task config

myVersionTask: {

dist: {

src: "app/**/*.js",

dest: "dist/"

}

}

});

// load task from local directory

grunt.loadTasks("tasks");

// alias task

grunt.registerTask("build", ["myVersionTask:dist"]);

};


Grunt avancé



Create a Template

• app/• templates/

• …

• index.js

• model/• templates/

• …

• index.js

Create a Template

var yeoman = require("yeoman-generator");

var CustomGenerator = yeoman.generators.Base.extend({

constructor: function () { },

prompting: function () { },

writing: {

git: function () { },

bower: function () { },

gruntfile: function () { },

index: function () { },

mainjs: function () { },

},

install: function () { },

});

module.exports = CustomGenerator;

Create a Template

// prompting

var prompts = [{

type: "text",

name: "title",

message: "Title of the application"

}];

this.prompt(prompts, function (answers) {

this.title = answers.title;

});

// writing

this.fs.copy(this.templatePath("gitattributes"), this.destinationPath(".gitattributes"));

this.fs.copyTpl(this.templatePath("_gruntfile.js"), this.destinationPath("Gruntfile.js"), { arg1: "value1" });

// installing

this.installDependencies({ skipInstall: this.options["skip-install"] });


Yeoman avancé



Slides : http://fr.slideshare.net/Touchify/grunt-bower-yeoman-ou-comment-automatiser-un-projet-web-spa

Démo :https://github.com/spatools/techdays2015

Documentations :http://bower.io http://gruntjs.com http://yeoman.io

Liens


http://fr.slideshare.net/Touchify/grunt-bower-yeoman-ou-comment-automatiser-un-projet-web-spa

https://github.com/spatools/techdays2015

https://bower.io/

http://gruntjs.com/

http://yeoman.io/

© 2015 Microsoft Corporation. All rights reserved.

tech days•

2015

#mstechdays techdays.microsoft.fr

Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet web SPA

Technology