Skip to content

Latest commit

 

History

History
820 lines (682 loc) · 21.1 KB

clase20.md

File metadata and controls

820 lines (682 loc) · 21.1 KB
Raw

Clase 20

NPM

npm_logo

  • Instalar paquetes:
    • global:
    npm install -g <paquete>
  • local:
    npm install <paquete>
  • Buscar paquetes
    npm search <paquete>
  • Información de los paquetes
    npm view <paquete>
  • Lista de paquetes instalados
    npm ls
  • Lista de paquetes instalados globalmente
    npm ls -g

  • Instalando versiones especificas:

    • la más reciente:
    npm install <paquete>@latest
  • versión especifica:
    npm install <paquete>@1.x (1.xx.xx)
  • Otra versión especifica
    npm install <paquete>@2.10.x (2.10.x)
  • Paquetes desactualziados:
  npm outdated
  • Actualizando paquetes:
  npm update <paquete>
  • Desinstalando paquete:
  npm uninstall <paquete>
  • Información sobre Bugs
  npm bugs <paquete>

Dependency Hell:

Abyssus abyssum invocat. El abismo llama al abismo.

package.json

  • Datos proyecto

  • Tareas

  • Dependencias (dependencies y devDependencies)

  • Documentación

  • Creación:

  npm init
  • Guardar nuevas dependencias:
 npm install <paquete> --save
  • Guardar nuevas dependencias (solo para entorno desarrollo):
 npm install <paquete> --save -dev
  • Guardando versiones especificas:
    • (1.xx.xx):
  npm install --save <paquete>@1.x
  • (2.10.x)
  npm install --save <paquete>@2.10.x
  • Latest
  npm install --save <paquete>@lastest
  • Quitando dependencias:
  npm uninstall <paquete> --save
  • Instalamos las dependencias en el proyecto:
    • todo:
  npm install (todo)
  • Solo production:
  npm install --production (solo producción)
  • Solo development:
  npm install --dev
  • Semantic Versioning
    • Estructura -> X.Y.Z-Extra
    • Cambio Mayor - No retrocompatible
    • Cambio Menor - Retrocompatible - Nuevas funcionaldiades o cambios
    • Parche - Retrocompatible - Solución de errores
    • Extras - Indicativos o versiones especiales (Beta, Alfa, x86, etc...)

npm scripts (comandos de CLI)

  • Añadiendo comandos:
  // ...
  "scripts": {
      "test": "npm -v",
      "start": "node -v",
      "hola": "echo 'Hola mundo!'"
  }
  // ...
  • Mostrando todos los comandos:
    npm run
  • Ejecutando comandos:
    • test
    npm test
  • start
    npm start
  • hola
    npm run hola

Bower

Bower Logo

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Bower Instalamos Bower globalmente

  sudo npm install -g bower

Dependencias

  /home/ubuntu/.nvm/versions/node/v4.1.1/bin/bower -> /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower/bin/bower
  bower@1.6.6 /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower
  ├── is-root@1.0.0
  ├── destroy@1.0.3
  ├── stringify-object@1.0.1
  ├── junk@1.0.2
  ├── chmodr@1.0.2
  ├── user-home@1.1.1
  ├── q@1.4.1
  ├── abbrev@1.0.7
  ├── opn@1.0.2
  ├── bower-endpoint-parser@0.2.2
  ├── bower-logger@0.2.2
  ├── lockfile@1.0.1
  ├── archy@1.0.0
  ├── graceful-fs@3.0.8
  ├── nopt@3.0.6
  ├── lru-cache@2.7.3
  ├── retry@0.6.1
  ├── tmp@0.0.24
  ├── semver@2.3.2
  ├── md5-hex@1.1.0 (md5-o-matic@0.1.1)
  ├── fs-write-stream-atomic@1.0.4 (graceful-fs@4.1.2)
  ├── p-throttler@0.1.1 (q@0.9.7)
  ├── request-progress@0.3.1 (throttleit@0.0.2)
  ├── shell-quote@1.4.3 (array-filter@0.0.1, array-reduce@0.0.0, jsonify@0.0.0, array-map@0.0.0)
  ├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
  ├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
  ├── promptly@0.2.0 (read@1.0.7)
  ├── fstream@1.0.8 (inherits@2.0.1, graceful-fs@4.1.2)
  ├── which@1.2.0 (is-absolute@0.1.7)
  ├── bower-registry-client@1.0.0 (async@0.2.10, graceful-fs@4.1.2, request-replay@0.2.0, mkdirp@0.3.5)
  ├── mkdirp@0.5.0 (minimist@0.0.8)
  ├── glob@4.5.3 (inherits@2.0.1, inflight@1.0.4, once@1.3.3, minimatch@2.0.10)
  ├── fstream-ignore@1.0.3 (inherits@2.0.1, minimatch@3.0.0)
  ├── rimraf@2.4.4 (glob@5.0.15)
  ├── insight@0.7.0 (object-assign@4.0.1, async@1.5.0, tough-cookie@2.2.1, lodash.debounce@3.1.1, configstore@1.3.0, os-name@1.0.3)
  ├── bower-config@1.2.2 (graceful-fs@4.1.2, osenv@0.1.3, optimist@0.6.1)
  ├── github@0.2.4 (mime@1.3.4)
  ├── tar-fs@1.8.1 (pump@1.0.1, tar-stream@1.3.1)
  ├── request@2.53.0 (forever-agent@0.5.2, aws-sign2@0.5.0, caseless@0.9.0, tunnel-agent@0.4.1, oauth-sign@0.6.0, isstream@0.1.2, stringstream@0.0.5, json-stringify-safe@5.0.1, tough-cookie@2.2.1, qs@2.3.3, node-uuid@1.4.7, form-data@0.2.0, mime-types@2.0.14, combined-stream@0.0.7, http-signature@0.10.1, bl@0.9.4, hawk@2.3.1)
  ├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
  ├── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.1, semver-diff@2.1.0, latest-version@1.0.1)
  ├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, readable-stream@1.1.13, binary@0.3.0)
  ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
  ├── inquirer@0.10.0 (strip-ansi@3.0.0, ansi-regex@2.0.0, figures@1.4.0, ansi-escapes@1.1.0, cli-width@1.1.0, rx-lite@3.1.2, through@2.3.8, readline2@1.0.1, cli-cursor@1.0.2, run-async@0.1.0, lodash@3.10.1)
  ├── mout@0.11.1
  └── configstore@0.3.2 (object-assign@2.1.1, xdg-basedir@1.0.1, uuid@2.0.1, osenv@0.1.3, js-yaml@3.4.5)

Arrancamos bower.json

  bower init

  {
    "name": "pruebas_bower",
    "homepage": "https://github.com/UlisesGascon/Curso-in-company-NexTReT",
    "authors": [
      "ulisesgascon"
    ],
    "description": "",
    "main": "",
    "moduleType": [],
    "license": "MIT",
    "private": true,
    "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "test",
      "tests"
    ]
  }

Buscamos paquetes

  bower search <paquete>
  bower search jquery

Instalando Paquetes

  bower install <paquete>
  bower install jquery

Instalando versiones especificas del paquete

  bower install <package>#<version>

Instalando Paquetes y guardandolos en bower.json

  bower install <paquete> -save
  bower install bootstrap -save

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower install bootstrap -save
  bower jquery#~2.1.4             cached git://github.com/jquery/jquery.git#2.1.4
  bower jquery#~2.1.4           validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
  bower bootstrap#*           not-cached git://github.com/twbs/bootstrap.git#*
  bower bootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
  bower bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.5.tar.gz
  bower bootstrap#*              extract archive.tar.gz
  bower bootstrap#*             resolved git://github.com/twbs/bootstrap.git#3.3.5
  bower jquery#~2.1.4            install jquery#2.1.4
  bower bootstrap#~3.3.5         install bootstrap#3.3.5

  // bower.json
  {
    "name": "pruebas_bower",
    "homepage": "https://github.com/UlisesGascon/Curso-in-company-NexTReT",
    "authors": [
      "ulisesgascon"
    ],
    "description": "",
    "main": "",
    "moduleType": [],
    "license": "MIT",
    "private": true,
    "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "test",
      "tests"
    ],
    "dependencies": {
      "jquery": "~2.1.4",
      "bootstrap": "~3.3.5"
    }
  }

Borrando paquetes

  bower uninstall <paquete>
  bower uninstall jquery

Borrando paquetes y guardandolos en bower.json

  bower uninstall <paquete>
  bower uninstall jquery

Verificando los paquetes instalados y sus dependencias

  bower list

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower list
  bower check-new     Checking for new versions of the project dependencies...
  pruebas_bower /home/ubuntu/workspace/profe/pruebas_bower
  ├─┬ bootstrap#3.3.5 (latest is 4.0.0-alpha)
  │ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
  └── jquery#2.1.4 (latest is 3.0.0-alpha1+compat)

Actualizando todo

  bower update

Actualizando un paquete específico

  bower update <package>

Usando Bower

  bower list -paths

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower list -paths

    bootstrap: [
      'public/vendor/bootstrap/less/bootstrap.less',
      'public/vendor/bootstrap/dist/js/bootstrap.js'
    ],
    jquery: 'public/vendor/jquery/dist/jquery.js'

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Bootstrap 101 Template</title>

      <!-- Bootstrap -->
      <link href="public/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="public/vendor/jquery/dist/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="public/vendor/bootstrap/dist/js/bootstrap.js"></script>
    </body>
  </html>

Bower (Entendiendo el funcionamiento)

bower.json. ¿Qué necesitamos?

  {
      "name": "Mi Aplicación",
      "version": "1.0.0",
      "dependencies": {
          "modernizr": "*",
          "jquery": "~2.0.2",
          "bootstrap": "*",
          "requirejs": "*"
      }
  }

.bowerrc ¿Donde lo necesitamos?

  {
      "directory": "public/vendor",
      "json": "bower.json"
  }

Instalamos todo lo anterior

  bower install

Bower (Trucos)

  • Se puede instalar componentes aislados primero y luego hacer bower init para generar el bower.json con todo incluido.

  • Ignoramos la carpeta bower_components con .gitignore. Recuerda que haciendo bower.init se instala todo de nuevo.

  • Instalación de paquetes más alla de los definidos en search:

  • Paquetes registrados:

  $ bower install jquery
  • Acesso directo -> GitHub:
  $ bower install desandro/masonry
  • .git:
  $ bower install git://github.com/user/package.git
  • URLs:
  $ bower install http://example.com/script.js

Gulp

Gulp Gulp_anatomy

  • Caractísticas

    • Filosofía de código sobre configuración
    • Basado en stream
    • No es necesario usar archivos temporales

  • Instalación

    • Instalamos Gulp global
    npm install --global gulp
    • Incluimos la dependencia en package.json
    npm install --save-dev gulp

  • Tareas por defecto

    • Creamos gulpfile.js y agregamos dependencias y la primera tarea por defecto
    • Definición
      var gulp = require('gulp');

  gulp.task('default', function() {
    console.log("Estas en la tarea por defecto!")
  });
    • Lanzamiento
      gulp

  • Más tareas

    • Creamos una tarea nueva para gestionar la concatenación y minificación de los archivos js.
    • Definición
    var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

  gulp.task('concat-ugly', function() {
    console.log("Estas en la tarea de concatenación!")  
    gulp.src('js/sources/*.js')
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
  });
    • Instalamos las nuevas dependencias
      npm install -save gulp-concat && npm install -save gulp-uglify
    • Lanzamiento
      gulp concat-ugly

  • Agrupando tareas

    • Definición
      gulp.task('distro-lista', ['imagenes', 'css', 'js']);
    • Lanzamiento
      gulp distro-lista

  • Concatenando tareas

    • Definición
      gulp.task('css-paso-2', ['css-paso-1'], function(
    console.log("css-paso-2 empieza solo cuando... css-paso-1 haya termiando!")
  ));
    • Lanzamiento
      gulp css-paso-2

  • Ejemplo de gulpfile.js

Entendiendo Gulp

  • gulp.src() y gulp.dest()
    • Un solo archivo
      gulp.src('client/templates/index.jade')
  // .pipe(...)
    • Múltiples archivos
      gulp.src(['client/*.js', '!client/b*.js', 'client/bad.js'])
  // .pipe(...)
    • Múltiples archivos y carpetas
      gulp.src('client/templates/**/*.jade')
  // .pipe(...)
    • Exclusión
      !js/secreto-config.js
    • Especificando la extensión
      publico/*.+(js|css)
  • gulp.watch()
    • Monitoriza de manera activa uno o varios archivos y dispara tareas específicas cuando se hayan modificado
      gulp.watch('js/source/*.js', ['js']);

Plugins

Grunt vs. Gulp

gulp_vs_grunt

Grunt:

Grunt_WF

Gulp:

Gulp_WF

Yeoman

Yeoman Logo

The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Grunt, Gulp, etc) and the package manager (like Bower and npm).

Yeoman Instalamos Yeoman global (incluye Grunt, Bower...)

  npm install yo -g

Instalamos globalmente el generador de proyectos web

  npm install --global generator-gulp-webapp

En la carpeta deseada lanzamos el generador para que se cree un pryecto completo

  yo gulp-webapp

Acabada la instalación con exito

  gulp serve

Preparando todo para producción

  gulp

Yeoman (gestión de errores de instalación)

Verificamos que es lo que no funciona.

  yo doctor

[ NO RECOMENDADO ] Entramos como root

  sudo yo

[ NO RECOMENDADO ] Forzamos la instalación de un paquete global especificando la versión.

  sudo npm install -force -g <paquete>@version

Instalación Manual de dependencias

  npm install && bower install

Yeoman (en C9.io)

1 - Verificar versiones

node --version && npm --version

Resultado

v4.4.3
2.14.20

2 - Solucionamos el problema de la instalación global en c9.io

echo "export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/versions/node/v4.4.3/lib/node_modules" >> ~/.bashrc && source ~/.bashrc

3 - Actualizamos NPM

npm update -g npm

4 - Instalamos Gulp

npm install -g gulp

5 - Instalamos Bower

npm install -g bower

6 - Instalamos yo

npm install -g yo

Resultado esperado:

Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version
✔ NODE_PATH matches the npm root

7 - Instalamos un generador como webapp en la carpeta que queramos

npm install -g generator-webapp

8 - Lanzamos el generador desde la carpeta deseada

yo webapp

Generadores