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 LUCE
CEO @ Touchify
maxime@touchify.co
@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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

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

Similaire à Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet web SPA (20)

Plus de Microsoft

Plus de Microsoft (20)

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