Grunt, Bower, Yeoman ou comment automatiser 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 un projet web SPA

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Grunt, Bower, Yeoman ou comment automatiser un projet web SPA

Similar to Grunt, Bower, Yeoman ou comment automatiser un projet web SPA (20)

Grunt, Bower, Yeoman ou comment automatiser un projet web SPA

Editor's Notes