Cómo automatizar el flujo de trabajo en Frontend

La idea de esta publicación es evidenciar cómo el kit de herramientas Gulp.js permite automatizar el en el área de front-end. Ello incluye ahorrar tiempo al trabajar en la creación de la página, la compilación de archivos JavaScript y CSS ( SASS, LESS, Stylus, etc. ) y la cargar el navegador de cualquiera de estos archivos.

Gulp.js se utiliza para automatizar tareas que requieren mucho tiempo en el flujo de desarrollo web; además es un proyecto de JavaScript de código abierto.

Con Gulp.js usted puede:

• Minificar sus archivos HTML , CSS y JS.
• Compilar preprocesadores CSS como SASS o LESS .
• Volver a cargar el navegador automáticamente cada vez que guarde un archivo.
• Optimizar todos los activos ( CSS , JS , fuentes e  imágenes ).

También aprenderá a encadenar diferentes tareas en comandos simples que son fáciles de entender y ejecutar.

A continuación, voy a mostrar cómo instalar y configurar Gulp.

Instalación de Gulp.js

Paso 1:

Debemos instalar el requisito más importante: Node.js. Si no lo tiene instalado puede ir a https://nodejs.org y descargar la última versión estable.

El instalador de Node lo guiará a través del proceso.

Paso 2:

Instalar Gulp. Para hacerlo solo debe ejecutar esta línea de comando en su terminal:

npm install --global trago-cli

 

De esa manera instalará Gulp en su computadora, para instalarlo en sus dependencias debemos ir al directorio de su proyecto en su consola y ejecutar este comando:

 

npm install --save-dev trago

Paso 3:

Es necesario crear un archivo de configuración llamado gulpfile.js en su carpeta de proyecto, allí es donde vamos a escribir todas las tareas, incluso para compilar SASS , minificar CSS , compilar y minificar archivos JavaScript , minificar HTML , entre otros.

Ahora agregaremos un código básico para comenzar:

var trago = require('trago');
trago.tarea('predeterminado', función() {
// coloque el código para su tarea predeterminada aquí
});

En tres pasos simples instalamos Gulp.js.

Ahora configuraremos un proyecto para ejecutar tareas simples a continuación.

Usando SASS

Primero debemos instalar el complemento SASS, es por eso que vamos a ejecutar:

npm instala trago-sass --save-dev

 

A continuación, debemos llamar al complemento instalado en gulpfile.js, por lo que lo haremos:

var trago = require('trago')
var sass = require('gulp-sass')

trago.tarea('sass',función(){
  gulp.src('estilos/main.scss')
  .pipe(sass({estilo:'expandido'})).on('error',gutil.log)
  .pipe(_.concat('estilo.css'))
  .pipe(gulp.dest('activos'))
});

 

Esta tarea compilará un archivo SASS y lo cambiará en un archivo CSS.

La fuente para la compilación es «styles/main.scss» y se guardará como «assets/style.css».

Para ejecutar emplee este comando:

tragar descaro

Minificar css

Ahora que puede compilar su código SASS en CSS puede ser usado en su HTML , pero para mejorar el rendimiento y la carga de la página podemos minimizarlo.

Para lograr esto, instalaremos gulp-clean-css :

 

npm install gulp-clean-css --save-dev

var trago = require('trago')
var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {
  return gulp.src('activos/estilo.css')
  .pipe(cleanCSS())
  .pipe(_.rename({extname: '.min.css'}))
  .pipe(gulp.dest('activos'));
});

 

Esta tarea va a minificar el archivo CSS , en este caso «assets/style.css» y añadir una extensión «.min.css» (que significa que es un archivo minificado) y se guardará como «assets/style.min.css «.

Para ejecutar esta tarea, emplee este comando:

tragar minify-css

Usando JS

Para compilar o minificar JavaScript necesitaremos instalar algunos complementos, gulp-uglify y  gulp-contact, así que los instalaremos:

npm install --save-dev trago-uglify
npm install --save-dev trago-concat

En este punto, puede usar de esta manera:

var _ = require('gulp-load-plugins')({lazy: false});
var uglify=require('gulp-uglify'),concat=require('gulp-concat');

gulp.tarea('construir-js', función() {
  gulp.src('guiones/*.js')
  .pipe(feo())
  .pipe(concat('script.js'))
  .pipe(gulp.dest('activos'))
});

Esta tarea compilará y minificará los archivos JS encontrados en «scripts /» y se guardarán en un solo archivo, «assets/script.js».

Para ejecutar use este comando:

tragar construir-js

Ver Archivos

Si desea que su navegador se vuelva a cargar cuando se cambien algunos archivos, primero debe instalar Browsersync:

npm instalar la sincronización del navegador --save-dev

var browserSync = require('browser-sync').create()

gulp.task('reloj', function() {
  gulp.watch('scripts/*.js', ['build-js']).on('cambiar', browserSync.reload)
  gulp.watch('styles/*.scss', ['sass']).on('cambiar', browserSync.reload)
  gulp.watch('estilos/*.css', ['minify-css']).on('cambiar', browserSync.reload)
});

 

Esta tarea es la más útil de todas porque combina todas las tareas en un solo comando, así que puede compilar y minimizar SASS, CSS y JS al mismo tiempo.  Además, la mejor parte es que no necesita ejecutar esta tarea cada vez, porque una vez que se hace quedará en la consola.

Este comando volverá a cargar su navegador cuando realice cambios y guarde cualquier archivo de los mencionados. Para ejecutar este comando use:

reloj trago

Si desea todas las tareas aquí abajo, las dejaremos, con esto puede facilitar su trabajo, ya que acelerará su trabajo y puede ahorrar tiempo en su trabajo como desarrollador frontend.

Esperamos que esta publicación le ayude a automatizar todas aquellas tareas que requiera: 

 

var trago = require('trago')
var sass = require('gulp-sass')
var cleanCSS = require('gulp-clean-css')
var _ = require('gulp-load-plugins')({lazy: false});
var uglify=require('gulp-uglify'),concat=require('gulp-concat');
var browserSync = require('browser-sync').create()
trago.tarea('sass',función(){
  gulp.src('estilos/main.scss')
  .pipe(sass({estilo:'expandido'})).on('error',gutil.log)
  .pipe(_.concat('estilo.css'))
  .pipe(gulp.dest('activos'))
});


gulp.task('minify-css', function() {
  return gulp.src('activos/estilo.css')
  .pipe(cleanCSS())
  .pipe(_.rename({extname: '.min.css'}))
  .pipe(gulp.dest('activos'));
});


gulp.tarea('construir-js', función() {
  gulp.src('guiones/*.js')
  .pipe(feo())
  .pipe(concat('script.js'))
  .pipe(gulp.dest('activos'))
});


gulp.task('reloj', function() {
  gulp.watch('scripts/*.js', ['build-js']).on('cambiar', browserSync.reload)
  gulp.watch('styles/*.scss', ['sass']).on('cambiar', browserSync.reload)
  gulp.watch('estilos/*.css', ['minify-css']).on('cambiar', browserSync.reload)
});