La idea de esta publicación es aprender cómo puede automatizar su trabajo en el área de front-end, porque este no incluye solo traducir un diseño a la web, sino también cómo puede ahorrar tiempo y trabajo al crear su página, por ejemplo compilar archivos JavaScript y CSS (SASS, LESS, Stylus, etc.) y volver a cargar el navegador automáticamente al guardar cualquiera de estos archivos. Todo esto es posible utilizando un kit de herramientas llamado Gulp.js, que se utiliza para automatizar tareas que requieren mucho tiempo en su flujo de trabajo de desarrollo; 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 assets (CSS, JS, fuentesimá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

Paso 1

Debemos haber instalado el requisito más importante, Node.js. Si no lo tiene instalado, puede ir a https://nodejs.org y descargue la última versión estable. El instalador de Node lo guiará a través del proceso.

Paso 2

Ahora vayamos a instalar Gulp, para hacerlo solo ejecute esta línea de comando en su terminal:

npm install --global gulp-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 gulp

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 gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});

En tres simples pasos instalamos Gulp.js, ahora configuraremos un proyecto para ejecutar tareas simples a continuación.

LEER
Comenzando con Elixir y Phoenix

Usando SASS

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

npm install gulp-sass --save-dev

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

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

gulp.task('sass',function(){
  gulp.src('styles/main.scss')
  .pipe(sass({style:'expanded'})).on('error',gutil.log)
  .pipe(_.concat('style.css'))
  .pipe(gulp.dest('assets'))
});

Esta tarea compilará un archivo SASS y lo convertirá en un archivo CSS. La fuente para la compilación es “styles/main.scss” y se guardará como “assets/style.css”. Para ejecutar esta tarea, ejecute este comando:

gulp sass

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 gulp = require('gulp')
var cleanCSS = require('gulp-clean-css');

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

Esta tarea va a minificar el archivo CSS, en este caso “assets/style.css” y añadirña una extensión “.min.css” (que significa que es un archivo minificado) y se guardará como “assets/style.min.css”. Para ejecutar esta tarea, ejecute este comando:

gulp minify-css

Usando JS

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

npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat

En este punto, puede usarlos de esta manera:

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

gulp.task('build-js', function() {
  gulp.src('scripts/*.js')
  .pipe(uglify())
  .pipe(concat('script.js'))
  .pipe(gulp.dest('assets'))
});

Esta tarea compilará y minificará los archivos JS encontrados en “scripts /” y se guardarán en un solo archivo, “assets/script.js”. Para ejecutar esta tarea, ejecute este comando:

gulp build-js

Viendo Archivos

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

npm install browser-sync --save-dev
var browserSync = require('browser-sync').create()

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

Esta tarea es la más útil de todas porque combina todas las tareas en un solo comando, con esta tarea puede compilar y minimizar SASS, CSS y JS al mismo tiempo, y la mejor parte es que no necesita ejecutar esta tarea cada vez, porque una vez que se ejecuta se ejecutará 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:

gulp watch

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 pueda ayudarlo a automatizar todas estas tareas que pueden ser bastante aburridas.

var gulp = require('gulp')
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()
gulp.task('sass',function(){
  gulp.src('styles/main.scss')
  .pipe(sass({style:'expanded'})).on('error',gutil.log)
  .pipe(_.concat('style.css'))
  .pipe(gulp.dest('assets'))
});


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


gulp.task('build-js', function() {
  gulp.src('scripts/*.js')
  .pipe(uglify())
  .pipe(concat('script.js'))
  .pipe(gulp.dest('assets'))
});


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

Comentarios