Blog

Desarrollo de tu tema en Drupal 8 con Gulp

08/06/2020

Miniguía para montar un proyecto

Aunque lo hemos montado para un proyecto en Drupal 8, esta miniguía puede servir para todo proyecto ya sea WordPress, Drupal,…

Por una lado vamos a manejar las dependencias y automatizar la instalación de los paquetes con Yarn y por otro lado vamos a crear nuestras tareas para trabajar con Sass, concatenar y validar nuestros js con Gulp.

Para hacer funcionar todo esto necesitamos tener Node y Yarn instalado.

 

Trabajando con Yarn

Necesitamos tener un fichero en nuestro directorio de trabajo que se llama package.json. Este fichero  podemos crearlo a mano, o podemos crearlo usando en la consola el siguiente comando:

yarn init

Al lanzar el comando nos hará una lista de preguntas que podremos ir rellenando.

question name (ejemplo): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 

Como resultado nos crea el fichero package.json con lo siguiente:

{
  "name": "ejemplo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

 

Paquetes que vamos a necesitar para automatizar nuestro tema en Drupal 8 con Gulp

 

Paqueteurl
gulphttps://www.npmjs.com/package/gulp
gulp-livereloadhttps://www.npmjs.com/package/gulp-devtools-live
gulp-sasshttps://www.npmjs.com/package/gulp-sass
gulp-autoprefixerhttps://www.npmjs.com/package/gulp-autoprefixer
gulp-sourcemapshttps://www.npmjs.com/package/gulp-sourcemaps
gulp-concathttps://www.npmjs.com/package/gulp-concat
gulp-uglifyhttps://www.npmjs.com/package/gulp-uglify
jshinthttps://www.npmjs.com/package/jshint
gulp-jshinthttps://www.npmjs.com/package/gulp-jshint
gulp-imageminhttps://www.npmjs.com/package/imagemin
imagemin-pngquanthttps://www.npmjs.com/package/imagemin-pngquant

 

Cómo agregamos dependencias

Existen dos tipos de dependencias en el package.json:

  • dependencies – paquetes requeridos durante la ejecución del programa.
  • devDependencies: paquetes que solo se utilizan para pruebas y desarrollo.

 

Como estamos trabajando con Yarn los comandos serían:

yarn add [paquete] 
yarn add [paquete] --dev

En nuestro caso vamos a instalar todas.

yarn add gulp gulp-sass gulp-autoprefixer gulp-sourcemaps gulp-concat gulp-uglify gulp-jshint jshint gulp-imagemin imagemin-pngquant
yarn add gulp-livereload --dev

 

Trabajando con Gulp

Nos creamos un fichero gulpfile.js y copiamos y pegamos el texto que tenemos a continuación:

var gulp = require('gulp'),
  livereload = require('gulp-livereload'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  sourcemaps = require('gulp-sourcemaps'),
  imagemin = require('gulp-imagemin'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  jshint = require('gulp-jshint'),
  pngquant = require('imagemin-pngquant');

var paths = {
  styles: {
    src: 'src/sass/**/*.scss',
    dest: './css/'
  },
  scripts: {
    src: 'src/js/**/*.js',
    dest: './js/'
  },
  images: {
    src: 'src/images/*',
    dest: './images/'
  }
};

/* Imagemin task */
gulp.task('imagemin', function () {
  return gulp.src(paths.images.src)
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant()]
    }))
    .pipe(gulp.dest(paths.images.dest));
});

/* Sass task */
gulp.task('sass', function () {
  gulp.src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer('last 2 version'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.styles.dest));
});

/* Scripts task */
gulp.task('scripts', function() {
  return gulp.src(paths.scripts.src)
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gulp.dest(paths.scripts.dest));
});

/* Watch task */
gulp.task('watch', function(){
  livereload.listen();
  gulp.watch(paths.styles.src, gulp.series('sass'));
  gulp.watch(paths.scripts.src, gulp.series('scripts'));
  gulp.watch(paths.images.src, gulp.series('imagemin'));
  gulp.watch(['./css/style.css', './**/*.html.twig', './js/*.js'], function (files){
    livereload.changed(files)
  });
});

 

Antes de explicar el código anterior , vamos a ver como tenemos nuestros directorios.

Por un lado todos los ficheros fuentes (Sass, js, imágenes) del tema los tenemos en una carpeta «src» dentro del tema. Cuando hagamos algún cambio, el sistema lo detectará y aplicará la regla que le corresponda.

 

 

Por ejemplo si hacemos un cambio en un Sass lo que va a ocurrir es que se genere de nuevo el fichero style.css

  1. Declaramos Gulp, Sass,… todo lo que nos hace falta.
  2.  Definimos nuestra base (esto es personal) nosotros tenemos todo el fuente en una carpeta
  3. Definimos 4 tasks en Gulp:
    • Imagemin -> esta tarea comprime las imágenes y las mete en la carpeta images. 
    • Sass -> coge los ficheros Sass y los convierte, junta y comprime en el fichero style.css
    • JS -> coge los ficheros js y los junta, limpia y los añade a app.js
    • Watch -> esta tarea escucha las 3 anteriores y dependiendo del cambio aplica una u otra regla.

 

Comandos a usar

  • gulp watch.
  • gulp sass
  • gulp scripts
  • gulp imagemin 

 

 

Vamos a ver la tarea Sass de nuestro fichero gulpfile.js

/* Sass task */
gulp.task('sass', function () {
 gulp.src(paths.styles.src)
   .pipe(sourcemaps.init())
   .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
   .pipe(autoprefixer('last 2 version'))
   .pipe(sourcemaps.write('./'))
   .pipe(gulp.dest(paths.styles.dest));
});

 

  1. Declaramos una task que se llama “Sass”.
  2. Le indicamos el directorio y los tipos de fichero que debe coger.
  3. Con pipe vamos añadiendo llamadas a otros packages como sourcemaps, Sass,…
  4. Al final indicamos el destino con su extensión.

 

Último consejo de esta miniguía

Por último, esto es una demo que funciona pero si queréis probar podéis usar browserSync en vez de gulp-livereload e incluso gulp-eslint en vez de gulp-jshint.

 

También te puede gustar…

Caso de éxito: Binfluencer

Caso de éxito: Binfluencer

Binfluencer es otra de las empresas que ha confiado en ASPgems. En este caso de éxito te contamos nuestra colaboración con ellos.

ASPgems icon
C/ Sextante, 9
28023 Madrid,
España

Hablemos.

A %d blogueros les gusta esto: