Cómo configurar Gulp-sass usando la línea de comando si eres un principiante

Actualmente hago una pasantía en una empresa de tecnología, y hace unos días recibí un desafío de mi jefe acerca de escribir un artículo. Así que decidí escribir algo sobre Gulp-sass.

Configurarlo puede ser frustrante a veces, especialmente cuando es nuevo en él. Utilizo Windows, y buscar un artículo que resolviera mi problema fue como hacer que Jack in Black-ish deletreara "disminuir".

Ok, creo que me dejé llevar un poco por ahí… basta de mí, ¡comencemos!

PD: este es mi primer artículo publicado y espero que les guste. :)

Instalación de nodo

Primero, abra la línea de comando e instale node.js en su computadora. Viene con un Administrador de paquetes de nodo (npm) que puede usar para instalar Gulp. Después de la instalación, puede instalar Gulp ejecutando npm install gulp -g. El -gindica a npm que instale Gulp globalmente en su computadora (esto significa que puede usar los comandos de gulp en cualquier lugar de su computadora).

Antes de continuar, supongo que está familiarizado con la línea de comandos.

Navegue hasta el directorio de su proyecto y ejecútelo npm init. Esto creará un archivo package.json, presione enter y agregará lo que necesita en

el archivo package.json.

Sí, puede que se pregunte qué es un archivo package.json, ¿verdad?

Un archivo package.json contiene varios metadatos relevantes para su proyecto. Este archivo da información anpmy le permite identificar el proyecto, así como manejar las dependencias del proyecto. También facilita la instalación de todas las tareas que se utilizan en un proyecto de Gulp.

Si aún no lo entiendes, probablemente necesites que Diane te lo explique mejor. ¿Cuál es mi problema / obsesión con Black-ish?

Después de ejecutarlo npm-init, escriba npm install gulp --save-dev, esto le indica a npm que instale Gulp en su proyecto. Mediante el uso--save-dev almacenamos Gulp como una dependencia de desarrollo en package.json.

Creando un Gulpfile

Ahora que ha instalado Gulp, está listo para instalar la primera tarea. Tienes que requireGulp. Cree un nuevo archivo llamado gulpfile.js en el directorio de su proyecto. Puede hacerlo utilizando cualquier editor de texto. Comience agregando el siguiente código a su archivo gulp.

‘use strict’;
var gulp = require(‘gulp’);

Configurar una tarea

Ahora puede instalar una tarea de gulp; en este caso, instalaríamos Gulp-sass. Esta tarea hace posible convertir Sass a CSS . Aún usando la línea de comando, puede instalar Gulp-sass ejecutando npm install gulp-sass --save-dev. Después de eso, requiera Gulp-sass en su gulpfile.js.

Ponga var sass = require(‘gulp-sass’);debajo de la línea que requirió tragar.

Estructurando su proyecto

Antes de utilizar las líneas siguientes, supongo que también sabe cómo estructurar una aplicación web. Aquí voy a utilizar la estructura de aplicaciones web comunes.

Compilar sass / scss

Entonces, lo último es indicar a gulp qué archivos necesita convertir y dónde debería estar el destino, dónde se almacenará el archivo de salida.

Utilice lo siguiente;

//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });

El archivo en gulp.src se convertirá, también puede seleccionar todos los archivos .scss en un directorio usando “app/scss/*.scss”. Esto seleccionará todos sus archivos .scss en la carpeta scss.

El gulp.dest es la salida. La salida se almacenará en la carpeta CSS dentro de la carpeta de la aplicación.

Gulp-watch-sass

Gulp tiene una sintaxis de vigilancia que le permite monitorear los archivos fuente y luego “observar” los cambios realizados en su código. Simplemente agregue la sintaxis a su gulpfile.js escribiendo:

//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});

¡Eso es prácticamente todo lo que tienes que hacer! No fue tan estresante, ¿o sí?

¡Gracias por leer!