Hay muchos artículos excelentes que hablan sobre cómo usar Grunt o Gulp. Pero últimamente me resulta más práctico tener una pequeña cantidad de scripts en NPM que usar algunos paquetes determinados de Node para hacer el mismo trabajo.

No voy a entrar en detalle sobre cómo usar los scripts de NPM; para ello, puedes echarle un ojo a la propia documentación de NPM o leer un post mío anterior.

El objetivo del post de hoy es presentar la combinación de paquetes que me resulta más útil. Además, os dejo un repositorio de github que podéis usar a modo de boilerplate para vuestros propios proyectos.

Los Scripts

Aquí tenéis una lista de todos los scripts involucrados:

"scripts": {
    "clean": "rimraf dist && mkdir -p dist/{js,css} && echo \"*\n!.gitignore\" > dist/.gitignore",

    "predist": "npm run clean && touch dist/js/bundle.js",
    "dist": "npm run dist:javascript && npm run dist:styles && npm run dist:html",
    "dist:javascript": "browserify -t babelify src/javascript/index.js -o dist/js/bundle.js",
    "dist:styles": "node-sass src/style/index.scss dist/css/bundle.css --include-path=\"./node_modules/foundation-sites/scss/\"",
    "dist:html": "cp src/index.html dist/index.html",

    "prewatch": "npm run clean && touch dist/js/bundle.js",
    "watch": "concurrent --kill-others \"npm run watch:javascript\" \"npm run watch:styles\" \"npm run watch:html\" \"npm run serve\"",
    "watch:javascript": "watchify -t babelify src/javascript/index.js -o dist/js/bundle.js",
    "watch:styles": "nodemon --watch src/style -e scss --exec node-sass src/style/index.scss dist/css/bundle.css --include-path=\"./node_modules/foundation-sites/scss/\"",
    "watch:html": "nodemon --watch src/ -e html --exec cp src/index.html dist/index.html",

    "serve": "serve dist/ -p 8080",

    "publish": "gh-pages -d dist",

    "start": "npm run dist && npm run serve"
  },

Y estas son las acciones que podemos realizar:

  • npm run dist: compila todo lo que se encuentra en la carpeta src y lo deja en la carpeta dist.

  • npm run watch: compila todo lo que hay en src y lo deja en dist pero lo hace en modo watch. Es decir, cada vez que cambiamos un fichero se recompila ese fichero. Además, pone un servidor local en el puerto 8080 para que puedas ver el resultado de tu trabajo.

  • npm run publish: permite mostrar a otros tu proyecto publicando en Github Page el contenido de la carpeta dist.

  • npm start: es el comando que se ejecuta justo detrás de npm install, si te has bajado el proyecto desde su repo. Compila todas las fuentes y pone un servidor a la escucha.

Los nombres de los scripts siguen, todos, el formato [tarea]:[subtarea]. De esta manera, es mucho más fácil organizar los scripts dentro del package.json y no hay que pensar mucho qué nombre darle a cada cosa. Por otra parte, podemos jugar con la posibilidad de usar pre[nombre-del-script] para realizar tareas de limpieza antes de compilar algo nuevo.

Herramientas

Los scripts por sí solos obviamente no hacen nada; solo son los encargados de llamar a las herramientas que han de hacer el auténtico trabajo. En este caso, esas herramientas son:

  • Browserify: sirve para compilar todo nuestro código JS y crear un único bundle. Además, usamos Babelify para escribir nuestras fuentes en ES6.

  • Nodemon: es un paquete del que se suele pensar que solo sirve para reinciar un proceso de Node cada vez que se cambia algún fichero en el proyecto. Sin embargo, con la configuración que puedes ver en el package.json, también es útil para hacer de watch de esos ficheros definidos por extensión y para ejecutar cualquier acción arbitraria tras detectar el cambio. Esto lo aprovecho para recompilar SASS files o volver a copiar un fichero HTML.

  • concurrently: nos permite ejecutar varias tareas en paralelo que por separado son bloqueantes. Es decir, hace posible arrancar a la vez varios watchers y un servidor web, todos "en primer plano" pero sin que se bloqueen unos a otros. Como puedes ver, yo lo uso para la tarea watch.

  • node-sass: permite compilar ficheros SASS. Es posible utilizar librerías SASS de terceros que hemos instalado previamente con NPM mediante el flag --include-path.

  • gh-Pages: es tan simple como darle un directorio de tu proyecto y lo convierte en la página de tu proyecto en github.

  • rimraf: nos permite borrar un directorio fácilmente. Es cierto que podríamos usar rm pero no es infrecuente que dé un fallo.

Espero que te sirva de guía por lo menos para darte una idea de lo que se puede llegar a hacer con NPM, sin necesidad de meter otra capa más de complejidad.

Si te ha gustado este post, difunde la palabra. Tampoco dudes en dejar comentarios u observaciones. ¡Gracias! :)

Suscríbete a mi lista de correo

* Campos obligatorios