Automatitzaci

de projectes
Xavier Sala Pujolar
La forma tradicional dafegir descarregar
mduls Javascript i CSS en jquery
una aplicaci ha estat una descarregar
Bootstrap
mica manual ...
Cal localitzar el codi que fa
falta i descarregar-lo
Les pgines actuals estan
formades per diverses
llibreries, fulles destil, utilitats,
recursos
l
htm

imatge
s
t
scrip
java
css
Els gestors de paquets
proporcionen una forma
estndard i rpida dinstallar
programari daltres
No cal Desca
zar la
localit a autom rrega
ticam
pgin ent

$ npm install bootstrap

o
n t e nir-l
ma
Pot ualitzat
act
Permeten installar, actualitzar,
eliminar i gestionar les Aix se
dependncies dels paquets stalvia
temps
!
Tamb lautomatitzaci de
tasques repetitives en els
projectes sha fet
di de e
manualment r a r el c o
t d el d min
Sepa lupamen imit
zar
e s envo oducci
d pr

op ma
ti tg
s

i
m es
r xiu

it
r a aris

za
n a
mi ss

r
Eli nece
in
Shan creat molts programes
per automatizar aquestes
tasques
Solen basar la configuraci
del projecte en un arxiu
JSON

configuracio = json,
nom = cap

}
Gestors de
paquets
npm es el gestor de paquets
de node.js. Aix implica que es
pot fer servir tant per frontend
com per backend

Es descarrega el paquet
demanat i les dependncies
que li fan falta

Els paquets segueixen

lespecificaci CommonJS
 Sinstalla automticament
$ node -version al installar node.js

El primer sol ser

actualitzar-lo
$ npm install npm --global

Install serveix tant

per actualitzar com per
installar
 Crear un arxiu
en el directori
actual
$ npm init

package.json
s habitual crear
{
un projecte abans
"name": "prova",
de comenar
"version": "1.0.0",
"description": "...",
"main": "main.js",
"author": "jo",
"license": "ISC"
}
 Hi ha un registre
dInternet on va a
buscar els paquets
Es
descarrega
$ npm search modaal a
NAME | DESCRIPTION | AUTHOR | DATE
modaal | An accessible | =humaan | 2016-12
$ npm install modaal node_modules
$ ls
node_modules/

Installa el paquet
i totes les seves
dependncies
 Aix permet
$ npm install modaal --save
replicar laplicaci
Es guarda que fcilment
sha installat a
--save package.json

package.json
$ npm install
--save-dev

Noms cal en temps "dependencies": {
de desenvolupament: "modaal": "^0.3.1"
test, etc... },

 Sinstalla en el
sistema i no en
el projecte

Es sol fer servir per

$ npm install modaal --global paquets que tinguin
executables

$ npm uninstall modaal

 Sactualitza noms a
versions compatibles
Lactualitzaci amb lactual
de paquets:
Es poden veure
$ npm update normalize.css els paquets
desactualitzats

$ npm outdated
Package Current Wanted Latest Location
electron-prebuilt 0.35.6 0.35.6 1.4.13 prova
pretty-bytes 2.0.1 2.0.1 4.0.2 prova
 Bower es un gestor de paquets
pensat i optimitzat per
frontend.

ro j e ctes
p
Hi ha n servir
Bower deixa la gesti de
a
que f r i npm dependncies en mans dels
bowe usuaris
 Es sol fer servir npm
per installar-lo
$ npm install -g bower

crear larxiu
bower.json
Creaci dun projecte:
{
"name": "bowertest",
$ bower init "authors": [
"Xavier Sala <utrescu@gmail.com>"
],
"description": "",
"main": "",
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
 bower search jquery
Bower permet
cercar des de la
lnia de comandes ...
https://bower.io/search

o des del
navegador
 bower install jquery Es descarrega el
paquet en la
carpeta
Si safegeix save
tamb es guarda
que sha --save bower_components
descarregat

bower.json bower uninstall jquery

$ bower list
bower check-new Checking for new versions of the project dependencies...
bowertest /bowertest
bootstrap#3.3.7 extraneous (latest is 4.0.0-alpha.6)
jquery#3.1.1
jquery#3.1.1 extraneous

Podem veure els ...si nhi ha noves

paquets installats versions
Actualitzar

bower update
yarn es un gestor de paquets
que neix per reemplaar npm i
bower.

Intenta ser ms rpid mantenint

una cach
Gestors de
tasques
Grunt s un gestor de tasques

Permet automatitzar les

tasques repetitives dels
projectes: minimitzar, optimitzar
imatges, comprovar el codi,
executar proves, generar
paquets de desplegament

Basat en npm
En Grunt es defineixen les
tasques a fer

Existeix una gran varietat de

plugins pensats per aconseguir
fer diverses feines
sc ript
j a va al
e l l e s
o u re m o du
m _
n ode js minimit
de tori za els
i r e c
d arxius
css
 Es fa servir npm
per installar-ne el
client i els plugins
$ npm install -g grunt-cli

$ npm install grunt-contrib-compress

$ npm install grunt-contrib-jshint

$ npm install grunt-contrib-uglify

...
Per crear un projecte Es crea larxiu
package.json

$ npm init

$ npm install grunt --save-dev Safegeix Grunt a

les dependncies
$ touch Gruntfile.js

Es crea el fitxer
Gruntfile amb les
tasques
Gruntfile.js El
fit
bs xer
module.exports = function(grunt){ ic
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});

grunt.registerTask('default', []);
};

No fa res ...
$ grunt

Done.
Les tasques es poden definir
amb Javascript per s ms
habitual fer-ho amb plugins less
watch
jshint connect
Entre els ms
usats hi ha
concat
cssmin
karma
uglify
clean
Els plugins sn mduls npm 1. Installar
el plugin

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

module.exports = function(grunt){
la grunt.initConfig({
a r pkg: grunt.file.readJSON('package.json')
g
r re ca });
C a as
t
2. grunt.loadNpmTasks(grunt-contrib-uglify);

grunt.registerTask('default', []);
};
 3. nfig
module.exports = function(grunt){

co
A
grunt.initConfig({

ve rac
pkg: grunt.file.readJSON('package.json'),

ga i
u
uglify: {

de
s
build: {

ca
files: {

l
'dest/output.min.js': ['js/*.js']
}
}
}
});
grunt.loadNpmTasks(grunt-contrib-uglify);
grunt.registerTask('default', []);$ grunt uglify
}; Running "uglify:build" (uglify) task
>> 1 file created.

Done.
 Gulp s un gestor de tasques
basat en streams de javascript

Permet automatitzar les

tasques habituals del
desenvolupament: minimitzar,
i x c o m a
e
Gulp n idor de executar proves, generar
t
compe
Grump
paquets de desplegament

Basat en npm
 Es fa servir npm
per installar-ne el
client i els plugins
$ npm install -g gulp

$ npm install gulp-concat --save-dev

Es parteix dun projecte de
node amb gulp i shi crea el
gulpfile.js

$ npm init
$ npm install gulp --save-dev

$ touch gulpfile.js

gulp = require(gulp);
gulp = require(gulp);
Registra un
a
funci

Executa la funci
task(nom, funci)
quan canvia
alguna cosa
watch(patr, funci)

Retorna un
src(patr) canal dentrada

Retorna un
dest(carpeta) canal de sortida
Es defineix la
tasca amb un
nom
var gulp = require('gulp');

gulp.task('hola', function() {
I el que console.log('Hola Pep!');
ha de fer });

gulp.task('default', []);
Si es posa a
default no
cal el nom $ grunt hola
de tasca Hola Pep!
gulp no fa gaire res
$ npm install gulp-concat --save-dev
sense plugins
var gulp = require('gulp');
gin
Carrega el plu
var concat =
require('gulp-concat');

gulp.task('scripts', function() {
tasca
return gulp.src('src/js/*.js')
Es crea una .pipe(concat('main.js'))
.pipe(gulp.dest('build/js'));
});

gulp.task('default', ['scripts']);
 Agafa els fitxers
gulp.src('src/js/*.js') de src/js/

Els empaqueta a
(
.pipe
main.js
concat(main.js)

( Desa el resultat
pe
.pi a build/js/
gulp.dest(build/js/)

$ gulp scripts
 gulp-uncss
gulp-util
gulp-concat
gulp-csso

gulp-plumber gulp-sourcemaps

gulp-minify-css autoprefixer

gulp-uglify
gulp-browser-sync gulp-load-plugins
Altres
Els bundlers sn eines que
empaqueten laplicaci

s corrent empaquetar tot el

javascript o CSS en un arxiu
per questions de rendiment
 Browserify permet fer servir
require() de node.js en el
javascript

$ npm install -g browserify

Canviar els
require() pel codi $ browserify dev.js > main.js

Es pot fer live

amb budo
 Yeoman s un creador de
plantilles de projectes

Genera estructures de
directoris i paquets per crear
projectes de diferents tipus

ors
$ npm install yeoman Els generad
mb
$ npm install generator-angular sinstallen a
npm
$ yo angular projecte
 Versi 1 - 2017

algunes images tenen copywrite