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:
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.
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.
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 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.
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 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 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 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) });