Como comenzar a utilizar Gulp

Este tutorial supondrá que nunca antes ha usado una herramienta de compilación o una interfaz de línea de comandos y explicará todos los pasos necesarios para comenzar a utilizar Gulp.

¡La buena noticia es que en realidad es bastante simple! Travis Maynard Ha creado cinco pasos básicos que lo guían a través de todas las cosas intimidantes y le presentan las ideas centrales que necesitará saber para comenzar a usar Gulp. ¡Empecemos!

Paso uno - Instalar node

Primero, necesitamos nuestro requisito más importante, Nodo. Para instalar Node, simplemente visite nodejs.org y luego haga clic en el gran botón verde "Instalar". Una vez que se complete la descarga, ejecute esa aplicación y debería estar listo para comenzar. El instalador de Node también incluye npm, al que volveremos más adelante.

Paso dos: conozca su línea de comando

Ahora, puede que no esté muy familiarizado con su interfaz de línea de comandos (Terminal para OSX, Símbolo del sistema para Windows), ¡pero debería estarlo! Puede parecer intimidante al principio, pero una vez que lo domine, tendrá la capacidad de ejecutar muchas aplicaciones de línea de comandos diferentes, como Sass , Yeoman y Git . ¡Todas estas son herramientas muy útiles de las que su flujo de trabajo podría beneficiarse!

Si está familiarizado con su interfaz de línea de comandos, no dude en pasar al paso cuatro.

Como ejemplo rápido, abra su línea de comando y le lanzaremos un par de comandos para asegurarnos de que Node esté instalado correctamente.

node -v

Escriba eso y luego presione enter y debería obtener una respuesta en la siguiente línea con el número de versión del Nodo que ha instalado. Ahora, hagamos lo mismo para npm.

npm -v

Nuevamente, esto debería devolver el número de versión en la siguiente línea.

Si no recibió una respuesta, puede significar que Node no se instaló correctamente o puede que necesite reiniciar su aplicación de línea de comando. Si esto todavía no funciona después de reiniciar, simplemente salta hacia arriba y prueba el primer paso nuevamente.

Paso tres: navegue a su directorio de proyectos

Ahora que conocemos nuestra interfaz de línea de comandos y sabemos cómo comunicarnos con ella, nuestro siguiente paso será navegarla. Afortunadamente, solo se necesitan dos comandos para cambiar los directorios y ver qué hay dentro de ellos. Estos comandos son ls (o dir , para Windows) para enumerar lo que hay en un directorio y cd para cambiar los directorios.

Te sugiero que pases un tiempo jugando con estos comandos. Acostúmbrese a su sistema de archivos y sepa dónde se encuentra todo. No se apresure con esto, ¡le ahorrará mucho dolor de cabeza más tarde!

Una vez que se sienta cómodo con los comandos ls y cd , debemos navegar a nuestra carpeta de proyectos. Es probable que esto sea diferente para cada persona, pero como ejemplo, esto es lo que escribiría para navegar a mi proyecto local:

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

Es importante tener en cuenta que estoy trabajando en OS X. El sistema de archivos en Windows es muy diferente, por lo que, aunque este ejemplo puede ser similar, no se traducirá directamente a Windows.
Una vez que haya llegado al directorio de su proyecto, ejecutemos un comando npm rápido para inicializar nuestro package.json.

npm init

Esto nos llevará a responder algunas preguntas sobre nuestro proyecto. Una vez completado, creará un archivo en el directorio raíz del proyecto llamado package.json con que proporcionará información sobre el proyecto y sus dependencias. Ahora, estamos listos para instalar gulp.

Paso cuatro: instalación de Gulp

Has conocido tu línea de comandos y sabes cómo hablar con ella, incluso conoces tu sistema de archivos. ¡Ahora, conozcamos a npm e instalemos gulp!

npm es un administrador de paquetes para Node que le permitirá instalar módulos adicionales para usar en sus proyectos desde la línea de comandos. Para obtener más información sobre npm, tómese un momento y visite el sitio web de npm para navegar y buscar en todos los paquetes disponibles. Como un pequeño ejercicio, busque Gulp y eche un vistazo.

Cuando esté listo para instalar gulp, regrese a su aplicación de línea de comandos y escriba:

npm install -g gulp

Tomemos un momento para analizar esto.

1. npm es la aplicación que estamos utilizando para instalar nuestro paquete.
2. Estamos ejecutando el comando de instalación en esa aplicación.
3. El -g es un indicador opcional que se usa para indicar que queremos instalar este paquete global mente para que cualquier proyecto pueda usarlo.
4. Y finalmente, gulp es el nombre del paquete que nos gustaría instalar.

Una vez que se haya completado, verifique su línea de comandos para asegurarse de que no haya mensajes de error. Si no hay ninguno para ver, ¡felicidades! ¡Acabas de instalar Gulp! Solo para verificar dos veces, volvamos a los comandos de versiones que utilizamos anteriormente para Node y npm.

gulp -v

Al igual que antes, esto debería devolver el número de versión en la siguiente línea de su línea de comandos.

A continuación, también necesitamos instalar gulp localmente.

npm install --save-dev gulp

Lo único diferente aquí es que usamos el indicador --save-dev que indica a npm que agregue la dependencia a nuestra lista devDependencies en nuestro archivo package.json que creamos anteriormente.

Las dependencias nos ayudan a organizar qué paquetes son necesarios en nuestros entornos de desarrollo y producción a medida que otros contribuyen o utilizan nuestro proyecto. Si desea leer más sobre las dependencias, asegúrese de consultar la documentación de package.json.

Ahora que Gulp está instalado, el siguiente paso es configurar nuestro archivo Gulp. ¡Ya casi hemos terminado!

Paso cinco: configurar nuestro archivo Gulp y ejecutar Gulp

Una vez que se instala gulp, tenemos que darle algunas instrucciones para que sepa qué tareas realizar para nosotros. Pero, primero, debemos determinar exactamente qué tareas debemos ejecutar en nuestro proyecto. Tiempo para ... un ESCENARIO .

En nuestro emocionante escenario no genérico del mundo real® , nuestro jefe nos ha asignado las siguientes tareas:

• Lint nuestro jаvascript. (En serio. Hazlo)
• Compila nuestros archivos Sass. (Los navegadores no pueden leer esas cosas ...)
• Concatena nuestro jаvascript. (¡Reduzca las solicitudes HTTP!)
• Minificar y renombrar archivos concatenados. (¡Cada poquito cuenta!)

Me estoy imaginando a nuestro supervisor como el tipo impaciente y un tanto aterrador que come internos cuando no hacen lo que el jefe quiere. Entonces, vamos a hacerlo antes de que coman a nuestro compañero de almuerzo.

Instalar complementos necesarios

npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

Esto instalará todos los complementos que necesitaremos y los agregará a nuestras devDependencies en nuestro archivo package.json como lo hicimos cuando instalamos gulp. Vale la pena señalar que, además de los complementos de Gulp, también estamos instalando el paquete jshint . Solo estamos instalando esto porque es una dependencia requerida para el complemento gulp-jshint .

Si obtiene errores de permisos al instalar estos complementos, es posible que tenga algunos problemas con los permisos en su directorio de proyecto local. Puede anteponer esos comandos con sudo , pero ** no se recomienda ** ya que puede conducir a problemas más problemáticos más adelante. El mejor curso de acción es garantizar que los permisos de sus directorios estén configurados correctamente.

Cree nuestro archivo de Gulp

Ahora que nuestros complementos están disponibles para que los usemos, podemos comenzar a escribir nuestro archivo e indicarle a Gulp que realice las tareas que nuestro jefe nos asignó.

Antes de comenzar con el código, creo que es muy importante mencionar que Gulp solo tiene 5 métodos . Estos métodos son los siguientes: task , run , watch , src y dest . Esto es todo lo que necesitará para escribir sus tareas.

En el directorio raíz de su proyecto, cree un nuevo archivo y asígnele un nombre gulpfile.js y pegue el siguiente código dentro.

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Ahora, analicemos esto y repasemos qué hace cada parte.

Core y complementos

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

Esto incluye el núcleo de Gulp y los complementos asociados con las tareas que realizaremos. A continuación, configuramos cada una de nuestras tareas separadas. Estas tareas son lint , sass , scripts y por defecto .

Tarea de pelusa

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Nuestra tarea de pelusa verifica cualquier archivo jаvascript en nuestro js/directorio y se asegura de que no haya errores en nuestro código.

Tarea Sass

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

La tarea sass compila cualquiera de nuestros archivos Sass en nuestro scss/directorio en CSS y guarda el archivo CSS compilado en nuestro dist/cssdirectorio.

Tarea de secuencias de comandos - Scripts

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

La tarea de secuencias de comandos concatena todos los archivos jаvascript en nuestro js/directorio y guarda la salida en nuestro dist/jsdirectorio. Luego, gulp toma ese archivo concatenado, lo minimiza, lo renombra y lo guarda en el dist/jsdirectorio junto con el archivo concatenado.

Ver tarea

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

La tarea de observación se utiliza para ejecutar tareas a medida que realizamos cambios en nuestros archivos. A medida que escribe código y modifica sus archivos, el gulp.watch()método escuchará los cambios y ejecutará automáticamente nuestras tareas nuevamente para que no tengamos que saltar continuamente a nuestra línea de comandos y ejecutar el comando gulp cada vez.

Tarea predeterminada

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Finalmente, tenemos nuestra tarea predeterminada que se utiliza como referencia agrupada para nuestras otras tareas. Esta será la tarea que se ejecuta al ingresar gulp en la línea de comando sin ningún parámetro adicional.

Ahora, todo lo que nos queda por hacer es correr Gulp. Vuelva a su línea de comando y escriba:

gulp

Esto llamará a Gulp y ejecutará todo lo que hemos definido en nuestra tarea predeterminada . En otras palabras, es lo mismo que correr:

gulp default

Además, no tenemos que ejecutar la tarea predeterminada. Podríamos ejecutar cualquiera de las tareas que definimos en cualquier momento. Simplemente llame a Gulp y luego especifique la tarea que le gustaría ejecutar directamente después. Por ejemplo, podemos ejecutar nuestra tarea sass manualmente en cualquier momento así:

gulp sass

Muy bien, ¿eh?

Terminando

Bueno, lo hemos logrado. Hemos sobrevivido a nuestro jefe temperamental y comedor interno y hemos salvado heroicamente a nuestro compañero de almuerzo. Tómate un momento para darte palmaditas en la espalda. Como resumen rápido, repasemos lo que hemos aprendido.

1. Aprendimos a instalar Node y npm.
2. Aprendimos sobre la línea de comandos y cómo usarla.
3. Aprendimos a usar npm para instalar gulp y varios complementos.
4. Aprendimos a escribir un Gulp y ejecutar tareas.

Espero que esta introducción haya hecho que la comprensión de las herramientas de construcción sea mucho más fácil y que pueda ver el valor real que Gulp agrega a su proyecto y su flujo de trabajo de desarrollo. Si tiene más preguntas, asegúrese de publicarlas en los comentarios.

Lectura adicional
Como siempre, es genial tener algunos recursos adicionales, especialmente en lo que no pudimos cubrir en detalle con este artículo. Entonces, aquí hay algunos recursos para llevarlo más allá del alcance de este artículo si decide ir allí.

• Gulp en la web
• Gulp Plugin Search
• Gulp en GitHub
• npm package.json Documentation

Muchas gracias a @contrahacks y @BlaineBublitz por revisar este artículo y asegurarse de que los ejemplos de código no exploten.