Optimización para producción

Clase 20 de 61 • Curso de JavaScript y jQuery 2015

Arturo Jesus Martínez Sáenz

student•

Para Windows a mi me funcionó este código:

"scripts": {  
    "public": "md public & cd public & del *.* /F /S /Q",  
    "build-js": "browserify -t [ babelify --presets [ es2015 ] ] index.js > public/app.js",  
    "copy-files": "copy index.css public & copy index.html public & cd public & ren index.css app.css",  
    "build": "npm run public & npm run build-js & npm run copy-files "  
  }

Ezequiel Rodriguez Esparza

student•

Gracias…tambien me funciono.

Luis Felipe Silgado Cortázar

student•

Buen aporte, casi me vuelvo loco buscando el equivalente de las lineas de linux y unix para windows.

Deiber Alberto Chacón Huertas

student•

En los scripts del package.json el comando "mkdir -p public" puede escribirse así en MS-DOS (Windows): "if not exist public mkdir public".

Alejandro Irimia Mesa

student•

Buen aporte, compañero. ¡Muchas gracias!

Edwin Cotrina

student•

En windows si pones mkdir -p public te crea dos carpteas -p y public :v

Abdel Mateos

student•

mkdir -p no hace lo que se dice. -p es una opcion que crea los directorios padre si estos no existen. No sirve de nada si lo que vamos a hacer es public, pero si por ejemplo queremos crear produccion/public y produccion no existe entonces si que necesitamos -p para que cree primero produccion y luego produccion/public. De lo contrario daria error. Consulatese la pagina man.
man mkdir
-p, --parents
no error if existing, make parent directories as needed

Belen Gudiño

student•

"build-js": "NODE_PATH=. browserify -t [ babelify --presets [ es2015 ] ] src/index.js > public/app.js",
"NODE_PATH" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
como soluciono este error en windows no reconoce en comando

Cognox Infra1

student•

Necesito ayuda con los comando de "copy-files" y "public" en Windows 10. Al correr los comandos de Mac y Linux que escribe el profesor en mi PC con Windows explota la consola.

Camilo Arguello

student•

En win 10 copy-files lo puedes escribir igual y funciona

"copy-files": "cp index.css public/app.css && cp index.html public/index.html"

Jose Ahumada

student•

"copy-files": "copy index.css public & copy index.html public & cd public & ren index.css app.css",

Eso servirá, éxito!

Manuel Galindez

student•

Si desean usar gulp - (automatizador de tareas), para la utilización de babel les dejo un link.

https://www.npmjs.com/package/gulp-babel/

Alexander Valencia

student•

gracias

David Esteban Tangarife

student•

Disculpen el código poco legible que mande anteriormente.

Tengo problemas con este código o con esta parte de la clase.

"scripts": {  
  ........  
  ........  
  
   "copy-files": "copy estilos.css public/app.css && copy index.html public/index.html",  
    "build": "npm run public && npm run build-js && npm run copy-files"  
  }

con esto genera la carpeta public y copia los archivos estilos.css y app.js pero no me copia el index.html, y me genera un archivo npm debug.log que me dice los errores que tengo.

error Windows_NT 6.1.7601  
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"  
19 error node v5.0.0  
20 error npm  v3.3.6  
21 error code ELIFECYCLE  
22 error tvify@0.1.0 build: `npm run public && npm run build-js && npm run copy-files`  
22 error Exit status 1  
23 error Failed at the tvify@0.1.0 build script 'npm run public && npm run build-js && npm run copy-files'.  
23 error This is most likely a problem with the tvify package,  
23 error not with npm itself.  
23 error Tell the author that this fails on your system:  
23 error     npm run public && npm run build-js && npm run copy-files  
23 error You can get their info via:  
23 error     npm owner ls tvify  
23 error There is likely additional logging output above.

Si alguno de ustedes les a pasado o saben el por que me esta pasando, le agradecería una ayuda.

Jose Carlo Rojas Mora

student•

yo he tenido el problema lo soluciones poniendo antes de todo sudo para darle permisos de super admin por ejemplo:

       
 "public": "sudo mkdir -p public",  
 "build-js": "browserify -t [ babelify --presets [ es2015 ] ] index.js > app.js",  
 "copy-files": "sudo cp index.css public/app.css && sudo cp index.php public/index.php"

Bruce Grover Lee

student•

a mi también me esta pasando eso. lo llegaste solucionar?

Henry

student•

he tenido problema al momento de buscar mi carpeta por medio de la terminal, me podrian recomendar algún post?

Miguel Angel Llacta Flores

student•

en la parte del copy a mi me funciono en windows de esta forma

"copy-files": "copy index.css > public/app.css, copy index.html > public/index.html"

Miguel Angel Llacta Flores

student•

no funciona xD sigue bajando

Jaime Diaz

student•

Hola, después de varios intentos pude copiar ambos archivos con el siguiente comando:

"copy-files": "copy style.css public/app.css & copy index.html public/app.html"

la razon del error en mi caso (WIN 8) es que el nombre de los archivos destino en su debido orden debe ser : "public/app.css... public/app.html" y tras ejecutar dicho comando los archivos destino se copian con el nombre del origen :|

john alexander pinilla celis

student•

porque no puedo ejucar el comando npm run build , lo ejecuto y llega una parte donde me sale error

Carlos Salazar

student•

Noto que es importante que se tengan conocimientos básicos
de consola o les parecerá confuso

Elias Rodelo

student•

Estoy con pequeño problema en mi código, alguien podría ayudarme?:
Este es el error que me muestra:

SyntaxError: /home/elias/Documentos/Platzi/Frontend/jsyjquery/package.json: Error while parsing JSON - Unexpected token } while parsing file: /home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/index.js  
    at Object.parse (native)  
    at OptionManager.addConfig (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/option-manager.js:214:62)  
    at OptionManager.findConfigs (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/option-manager.js:370:30)  
    at OptionManager.init (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)  
    at File.initOptions (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/node_modules/babel-core/lib/transformation/file/index.js:191:75)  
    at new File (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/node_modules/babel-core/lib/transformation/file/index.js:122:22)  
    at Pipeline.transform (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/node_modules/babel-core/lib/transformation/pipeline.js:42:16)  
    at Babelify._flush (/home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/node_modules/babelify/index.js:28:24)  
    at Babelify.<anonymous> (_stream_transform.js:118:12)  
    at Babelify.g (events.js:260:16)  
  
npm ERR! Linux 3.13.0-76-generic  
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build-js"  
npm ERR! node v4.2.4  
npm ERR! npm  v2.14.12  
npm ERR! code ELIFECYCLE  
npm ERR! tvify@0.1.0 build-js: `browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js`  
npm ERR! Exit status 1  
npm ERR!   
npm ERR! Failed at the tvify@0.1.0 build-js script 'browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js'.  
npm ERR! This is most likely a problem with the tvify package,  
npm ERR! not with npm itself.  
npm ERR! Tell the author that this fails on your system:  
npm ERR!     browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js  
npm ERR! You can get their info via:  
npm ERR!     npm owner ls tvify  
npm ERR! There is likely additional logging output above.  
  
npm ERR! Please include the following file with any support request:  
npm ERR!     /home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify/npm-debug.log

Lo peor del caso es que el archivo package.json está correcto, lo verifiqué en jsonlint.com y no me arrojó ningún error. Este es el package.json:

{  
  "name": "tvify",  
  "version": "0.1.0",  
  "description": "Una web para ver descripciones, puntuaciones y demás cosas de tus series favoritas",  
  "dependencies": {  
    "jquery": "^2.2.0"  
  },  
  "devDependencies": {  
    "babel-preset-es2015": "^6.3.13",  
    "babel-preset-react": "^6.3.13",  
    "babelify": "^7.2.0",  
    "browserify": "^13.0.0"  
  },  
  "scripts": {  
    "build-js": "browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js"  
  },  
  "main": "index.js",  
  "repository": {  
    "type": "git",  
    "url": "git+https://github.com/eliasrodeloso/TVify.git"  
  },  
  "keywords": [  
    "tvify"  
  ],  
  "author": "Elias Rodelo",  
  "license": "ISC",  
  "bugs": {  
    "url": "https://github.com/eliasrodeloso/TVify/issues"  
  },  
  "homepage": "https://github.com/eliasrodeloso/TVify#readme"  
}

Por otro lado, este es el debug.log:

0 info it worked if it ends with ok  
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build-js' ]  
2 info using npm@2.14.12  
3 info using node@v4.2.4  
4 verbose run-script [ 'prebuild-js', 'build-js', 'postbuild-js' ]  
5 info prebuild-js tvify@0.1.0  
6 info build-js tvify@0.1.0  
7 verbose unsafe-perm in lifecycle true  
8 info tvify@0.1.0 Failed to exec build-js script  
9 verbose stack Error: tvify@0.1.0 build-js: `browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js`  
9 verbose stack Exit status 1  
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:214:16)  
9 verbose stack     at emitTwo (events.js:87:13)  
9 verbose stack     at EventEmitter.emit (events.js:172:7)  
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)  
9 verbose stack     at emitTwo (events.js:87:13)  
9 verbose stack     at ChildProcess.emit (events.js:172:7)  
9 verbose stack     at maybeClose (internal/child_process.js:818:16)  
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)  
10 verbose pkgid tvify@0.1.0  
11 verbose cwd /home/elias/Documentos/Platzi/Frontend/jsyjquery/tvify  
12 error Linux 3.13.0-76-generic  
13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build-js"  
14 error node v4.2.4  
15 error npm  v2.14.12  
16 error code ELIFECYCLE  
17 error tvify@0.1.0 build-js: `browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js`  
17 error Exit status 1  
18 error Failed at the tvify@0.1.0 build-js script 'browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js'.  
18 error This is most likely a problem with the tvify package,  
18 error not with npm itself.  
18 error Tell the author that this fails on your system:  
18 error     browserify -t [ babelify --presets [ es2015 react ] ] index.js -o bundle.js  
18 error You can get their info via:  
18 error     npm owner ls tvify  
18 error There is likely additional logging output above.  
19 verbose exit [ 1, true ]

No sé que hacer!! llevo tres días con el mismo error, he reinstalado node.js para que se reinstale npm y nada, he reinstalado las librerias browserify y babelify, incluso instalé el preset de react para ejecutar el comando tal cual estaba en la página de babelify en npm y nada!!! :(

Luis Daniel Gordo Navas

student•

No se si sea muy tarde pero creo que puede ser que:

Instalaste dependencias con sudo o que estas ejecutando fuera de la carpeta del proyecto capeta raíz no public

Gustavo Adolfo Delgado Medina

student•

Que diferencia hay entre Browserify y grunt ?

Gonzalo Sanchez

student•

Buenas, para que el copy funcione bien en la linea de comandos de windows va a requerir usar doble \ en vez de /:

"scripts": {
    "public": "if not exist public mkdir public",
    "build-js": "browserify -t [babelify --presets [ es2015 ] ] src/index.js > public/app.js",
    "copy-files": "copy src\\index.html public & copy src\\index.css public\\app.css",
    "build": "npm run public & npm run build-js & npm run copy-files",
    "serve": "serve public"
  }

Mucha suerte y tremendo curso se han mandado acá. Gracias!

David Esteban Tangarife

student•

Hola, he tenido problema con este código:  
"copy-files": "copy estilos.css public/app.css && copy index.html public/index.html",  
"build": "npm run public && npm run build-js && npm run copy-files"  
genera la carpeta public y copia los archivos estilos.css y app.js pero no me copia index.html y me genera un npm-debug.log donde en la parte de los errores sale esto:  
  
error Windows_NT 6.1.7601  
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"  
19 error node v5.0.0  
20 error npm  v3.3.6  
21 error code ELIFECYCLE  
22 error tvify@0.1.0 build: `npm run public && npm run build-js && npm run copy-files`  
22 error Exit status 1  
23 error Failed at the tvify@0.1.0 build script 'npm run public && npm run build-js && npm run copy-files'.  
23 error This is most likely a problem with the tvify package,  
23 error not with npm itself.  
23 error Tell the author that this fails on your system:  
23 error     npm run public && npm run build-js && npm run copy-files  
23 error You can get their info via:  
23 error     npm owner ls tvify  
23 error There is likely additional logging output above.  
24 verbose exit [ 1, true ]  
si alguien le a pasado y lo a logrado resolver le agradecería que me dijera como o el que sepa resolver este fallo gracias por la colaboración.

Alexander Valencia

student•

Edgar Marcel Turizo Poveda

student•

Para poder utilizar el git init de donde lo instalo???

Ricardo Azpeitia P.

student•

Depende si estas en windows, lo mas probable es que lo tengas que descargar.

https://git-scm.com/downloads

Si estas en mac

brew install git

O si estas en linux lo instalas desde tu administrador de paquetes tipicamente

yum install git

apt-get install git

Edgar Marcel Turizo Poveda

student•

Gracias problema resuelto...

Marcos

student•

Los comandos escritos en el archivo package.json. son en lenguaje Bat en caso de Windows o Shell-Script verdad?

Juan Sebastián Cardozo Lozano

student•

El script “build-js” me arroja el siguiente error

Error: Cannot find module 'src/render' from 'C:\tvify\src'

Jorge Zamudio

student•

para que es browserify y para que es babelify?

Ricardo Azpeitia P.

student•

Browserify es para usar módulos de node en el navegador.
Babelify pasa de babel a browserify