Gulp: un conjunt d'eines per automatitzar tasques doloroses en desenvolupament
Gulp és un petit conjunt d'eines que automatitza tasques repetitives. Aquestes tasques repetitives solen compilar fitxers CSS, JavaScript o, bàsicament, quan utilitzeu un marc que s'ocupa de fitxers JavaScript/CSS no estàndard, voldreu utilitzar una eina d'automatització que agafi aquests fitxers, els empaqueti i el compili tot perquè el vostre navegador pugui entendre fàcilment. això.
Gulp és útil per automatitzar les tasques següents:
- Compilació de fitxers JS i CSS
- Actualització de la pàgina del navegador quan deseu un fitxer
- Feu una prova unitària
- Anàlisi de codi
- Còpia de fitxers modificats a un directori de destinació
Per fer un seguiment de tots els fitxers que necessiteu per crear un fitxer gulp, desenvolupar la vostra eina d'automatització o automatitzar tasques, heu de generar un fitxer package.json. El fitxer conté bàsicament una explicació del que hi ha dins del vostre projecte, quines dependències necessiteu per fer que el vostre projecte funcioni.
En aquest tutorial, aprendràs a instal·lar Gulp i a automatitzar algunes tasques bàsiques per als teus projectes. Farem servir npm, que significa gestor de paquets de nodes. S'instal·la amb Node.js, i podeu comprovar si ja heu instal·lat Nodejs i npm amb:
# node --version # npm --version
Si encara no el teniu instal·lat al vostre sistema, us recomano que consulteu el tutorial: Instal·leu la darrera versió de Nodejs i NPM als sistemes Linux.
Com instal·lar Gulp a Linux
La instal·lació de gulp-cli es pot completar amb npm mitjançant l'ordre següent.
# npm install --global gulp-cli
Si voleu instal·lar el mòdul gulp localment (només per al projecte actual), podeu utilitzar les instruccions següents:
Creeu un directori de projecte i navegueu-hi:
# mkdir myproject # cd myproject
A continuació, utilitzeu l'ordre següent per inicialitzar el vostre projecte:
# npm init
Després d'executar l'ordre anterior, se us demanarà una sèrie de preguntes per donar un nom al vostre projecte, una descripció de la versió i altres. Finalment confirma tota la informació que has donat:
Ara podem instal·lar el paquet gulp al nostre projecte amb:
# npm install --save-dev gulp
L'opció --save-dev
diu a npm que actualitzi el fitxer package.json amb les noves devDependencies.
Tingueu en compte que les dependències dev s'han de resoldre durant el desenvolupament, mentre que les dependències durant el temps d'execució. Com que gulp és una eina que ens ajuda en el desenvolupament, s'ha de resoldre en el moment del desenvolupament.
Ara creem un fitxer gulp. Les tasques que volem executar es trobaran en aquest fitxer. Es carrega automàticament quan s'utilitza l'ordre gulp. Amb un editor de text, creeu un fitxer anomenat gulpfile.js. Amb el propòsit d'aquest tutorial, crearem una prova senzilla.
Podeu inserir el codi següent al vostre gulpfile.js:
var gulp = require('gulp'); gulp.task('hello', function(done) { console.log('Hello world!'); done(); });
Deseu el fitxer i ara proveu d'executar-lo amb:
# gulp hello
Hauríeu de veure el resultat següent:
Això és el que fa el codi anterior:
- var gulp = require('gulp'); – importa el mòdul gulp.
- gulp.task('hola', function(fet) { – defineix una tasca que estarà disponible des de la línia d'ordres.
- console.log(‘Hola món!’); - simplement imprimeix \Hola món! a la pantalla.
- fet(); – Utilitzem aquesta funció de devolució de trucada per indicar a gulp que les nostres tasques han acabat.
Per descomptat, l'anterior era només una mostra per mostrar com es pot organitzar el gulpfile.js. Si voleu veure les tasques disponibles des del vostre gulpfile.js, podeu utilitzar l'ordre següent:
# gulp --tasks
Gulp té milers de connectors disponibles, tots amb funcionalitats diferents. Podeu consultar-los a la pàgina de connectors de Gulp.
A continuació, utilitzarem el connector minify-html en un exemple més pràctic. Amb la funció següent, podeu reduir els fitxers HTML i col·locar-los en un directori nou. Però primer, instal·larem el connector gulp-minify-html:
# npm install --save-dev gulp-minify-html
Podeu fer que el vostre gulpfile.js sembli així:
# cat gulpfile.js
// including plugins var gulp = require('gulp') , minifyHtml = require("gulp-minify-html"); // task gulp.task('minify-html', function (done) { gulp.src('./src/*.html') // path to your files .pipe(minifyHtml()) .pipe(gulp.dest('./dest')); done() });
A continuació, podeu reduir els fitxers HTML mitjançant les ordres següents.
# gulp minify-html # du -sh /src dest/
Gulp és un conjunt d'eines útils que us poden ajudar a millorar la vostra productivitat. Si esteu interessats en aquesta eina, us recomano que consulteu la seva pàgina de documentació, que està disponible aquí.