npm vs grunt vs gulp vs webpack vs .. ¡vaya lío de frontend!

¡Vaya lío de frontend! Existen 1000 herramientas con las que trabajar. Buscamos en internet, nos encontramos con muchísimos post sobre distintas tools para hacer frontend. Además, si somos más de backend puede «cortocircuitarnos».

Hoy vamos a ver unas cuantas herramientas para mejorar nuestro flujo de trabajo en front. Como ya hemos visto, el «flujo de trabajo» de un programador es una tarea compleja a la que debemos dedicar tiempo para ser más productivos y aprovechar nuestro tiempo en tareas que aportan valor.

¿Por qué hablamos de esto? Imaginemos que estamos en un proyecto y usamos un framework css, da igual que sea foundation, bootstrap, algo de material design,… Además tenemos que usar un preprocesador para css Less o Saas y cómo no es necesario que usemos algo de javascript, al menos JQuery, o VueJS, o Angular, o mejor React ¿Cómo unimos todo esto? y encima tenemos que minimizarlo para ganar performance,…

Todo esto puede ser difícil de gestionar y si le añadimos el hecho de que al buscar en Internet encontramos demasiada información. Ahora vamos a ver distintas herramienta, para que se utilizan y como usarlas.

NPM

NPM es un gestor de paquetes de node, viene por defecto al instalar node. Es similar a composer de PHP. Con esta herramienta podemos gestionar las versiones de Jquerym añadir nuevas librerías a nuestro proyecto, e incluso ejecutar tareas (task runner)

Para utilizarlo desde 0 solo tenemos que hacer un npm init en nuestro proyecto, este comando nos creará una archivo package.json donde pondremos todas las librerías que necesitamos en nuestro proyecto. Del mismo modo si ya estamos en un proyecto con un archivo package.json, lo primero que tenemos que hacer es npm install este comando nos descargará todas los módulos y librerías del proyecto en el directorio npm_modules (paciencia).

Incluso podemos ejecutar scripts usando npm, como con composer. Aquí un post interesante sobre cómo hacerlo http://blog.teamtreehouse.com/use-npm-task-runner

Grunt

Grunt es un «task runner», es decir una herramienta para automatizar tareas repetitivas como la compilación de css, la ejecución de test,… En un fichero JS llamado Gruntfile.js escribimos nuestras tareas y con un comando las ejecutamos.

Para instalar grunt, lo mejor es hacerlo de manera global npm install -g grunt-cli y después en nuestro proyecto definir las tareas en el archivo de grunt. Lo mejor de esta herramienta es que ya tenemos muchos plugins y tareas creadas aquí http://gruntjs.com/plugins

Gulp

gulp es una herramienta que permita automatizar tareas de desarrollo. Cómo ves es muy similar a la anterior, aunque su filosofía es un poco diferente. Se instala igual así: npm install --global gulp-cli Gulp se basa de pipe (tuberías de Unix) así que lo que hacemos es construir una tubería en vez de ir encadenando tareas, por ello modificar el flujo es sencillo y además el código resultante es muy fácil de leer:

gulp.task('styles',function (){
    return gulp.src('assets/less/main.less')
        //Compilar los less
        .pipe(less())
        //Dejarlos en la carpeta
        .pipe(gulp.dest('assets/css'))
        //renombrados con el sufijo
        .pipe(rename({suffix: '.min'}))
        //minimificarlos
        .pipe(minifycss())
        //y dejarlos en la misma carpeta
        .pipe(gulp.dest('assets/css'))
        .pipe(notify({ message: 'Styles task complete' }));
 
});

Aquí tenemos la típica tarea de compilar los less. Del mismo modo usando los watch podemos compilar los less cuando algún archivo cambie. Otro punto a tener en cuenta es que se integra bastante bien con PHPStorm.

La mayor diferencia con respecto a grunt es que gulp usa streams de node, por lo que puede que en algunas tareas sea algo más rápido que grunt.

Gulp viene con una tarea por defecto llamada default que es la que se ejecutará siempre que escribamos gulp en la linea de comandos cuando estemos en el directorio de nuestro proyecto. Así que lo mejor es que en esa tarea llamemos a las tareas de compliar css y minimificar los js.

Webpack

En la web de webpack este se define como module bundler y básicamente lo que hace es ayudarnos con la fragmentación. Todas las páginas de nuestro site no necesitan el mismo código JS, por ejemplo si tenemos un mapa en una sección con bastante funncionalidad JS, no tenemos que arrastrar ese código a toda la web. En esto nos ayuda webpack. Para instalarlo solo tenemos que ejecutar npm install -g webpack

Aquí un post con más información: https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.lznacz56t

Bower

Bower es un manejador de paquetes, al igual que npm sirve para gestionar las dependencias frontend de un proyecto (jquery, fonts,…). Se instala de manera sencilla haciendo:

 npm install -g bower

En nuestro proyecto tendremos un archivo bower.json en el que definimos las dependencias. Además podemos buscarlas usando

 bower search bootstrap

Conclusiones

Elegir las herramientas a utilizar es una de las tareas más complejas. Tenemos muchas opciones y como hemos dicho antes la productividad de un programador esta ligada a las herramientas que utiliza. Mi recomendación es utilizar la herramienta más simple, aprender todos sus trucos y librerías y forma de trabajar para sacarle el máximo rendimiento. Si tu proyecto no tiene una gran carga de JS y de CSS, quizás te interesa utilizar algo como Gassetic para olvidarte de todo y solo configurar un YML.