Grunt / Bower / Yeoman ou comment automatiser le développement d'un projet web SPA
Maxime LUCECEO @ Touchify
@TouchifyApp
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
tech.days 2015#mstechdays
Node.JS
Scripts simples mais puissant
Projet web donc javascript !
Outils d’automatisation
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
Bower ?
Grunt ?
Yeoman ?
Outils d’automatisation
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
Gestionnaire de librairies JS / CSS
Utilisé pour installer et mettre à jour les librairies
Assure l’intégrité des versions
Définition
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
Registre de librairies JS / CSS
Enregistre les versions dans un fichier bower.json
Arbre de dépendances plat
Comment ça marche ?
Comment automatiser le développement d'un projet web SPA
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
tech.days 2015#mstechdays
Gestionnaire de tâches Node.JS
Automatise les tâches récurrentes
Enormément de tâches dans NPM
Définition
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
Configuration dans un fichier Gruntfile.js
Tâches dans NPM ou en local
Simple !!
Comment ça marche ?
Comment automatiser le développement d'un projet web SPA
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"]);
};
tech.days 2015#mstechdays
Gestionnaire de template de projets
Simplifie la création de projet et d’éléments
Force l’utilisation de bonnes pratiques
Définition
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
Générateurs dans NPM
Utilise Bower pour gérer les dépendances
Utilise Grunt pour gérer les tâches de compilation
Comment ça marche ?
Comment automatiser le développement d'un projet web SPA
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
Create a simple Grunt Task
module.exports = function (grunt) {
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
module.exports = function (grunt) {
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
module.exports = function (grunt) {
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"]);
};
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"] });
tech.days 2015#mstechdays
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
Comment automatiser le développement d'un projet web SPA