Creación de herramientas de automatización para temas personalizados (Gulpjs)

El uso de herramientas de automatización facilita la creación de temas. Aquí vamos a utilizar gulp js para crear una herramienta de automatización para un tema personalizado.

Trabajando con Gulp 3.x y Node 10.x o inferiores

Pasos:

1. Instalación de Node.js
Descargue e instale la última versión de NodeJS desde el sitio nodejs.org. El proceso de instalación puede variar según su sistema operativo.

2. Instale Gulp

npm install gulp-cli -g

3. Configuración de gulpfile.js
Vaya al directorio de su tema personalizado.

Cree manualmente el archivo gulpfile.js usando cmd/terminal o haciendo clic derecho para crear un archivo nuevo.

touch gulpfile.js

Copie y pegue todo el código siguiente

Nota: Yo coloco mis archivos fuente en la carpeta 'src', y los archivos listos para producción en la carpeta raíz del tema personalizado. Por lo tanto, cuando los archivos sass se compilan desde la carpeta «my_custom_theme_folder/src/scss», se compilan y colocan en la carpeta «my_custom_theme_folder/css».

var gulp = require('gulp'),
    livereload = require('gulp-livereload'),
    gulpIf = require('gulp-if'),
    eslint = require('gulp-eslint'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');
     
gulp.task('imagemin', function () {
    return gulp.src('./src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./images'));
});


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

function isFixed(file) {
    // ¿ESLint ha corregido el contenido del archivo?
    return file.eslint != null && file.eslint.fixed;
}

gulp.task('eslint', function(){
    gulp.src(['./src/js/*.js'])
        .pipe(eslint({
            
                "extends": "eslint:recommended",
                "env": {
                    "browser": true
                },
                "globals": {
                    "Drupal": true,
                    "drupalSettings": true,
                    "drupalTranslations": true,
                    "domready": true,
                    "jQuery": true,
                    "_": true,
                    "matchMedia": true,
                    "Backbone": true,
                    "Modernizr": true,
                    "CKEDITOR": true
                 },
             "rules": {
                // Errores.
                "array-bracket-spacing": [2, "never"],
                "block-scoped-var": 2,
                "brace-style": [2, "stroustrup", {"allowSingleLine": true}],
                "comma-dangle": [2, "never"],
                "comma-spacing": 2,
                "comma-style": [2, "last"],
                "computed-property-spacing": [2, "never"],
                "curly": [2, "all"],
                "eol-last": 2,
                "eqeqeq": [2, "smart"],
                "guard-for-in": 2,
                "indent": [2, 2, {"SwitchCase": 1}],
                "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
                "linebreak-style": [2, "unix"],
                "lines-around-comment": [2, {"beforeBlockComment": true, "afterBlockComment": false}],
                "new-parens": 2,
                "no-array-constructor": 2,
                "no-caller": 2,
                "no-catch-shadow": 2,
                "no-empty-label": 2,
                "no-eval": 2,
                "no-extend-native": 2,
                "no-extra-bind": 2,
                "no-extra-parens": [2, "functions"],
                "no-implied-eval": 2,
                "no-iterator": 2,
                "no-label-var": 2,
                "no-labels": 2,
                "no-lone-blocks": 2,
                "no-loop-func": 2,
                "no-multi-spaces": 2,
                "no-multi-str": 2,
                "no-native-reassign": 2,
                "no-nested-ternary": 2,
                "no-new-func": 2,
                "no-new-object": 2,
                "no-new-wrappers": 2,
                "no-octal-escape": 2,
                "no-process-exit": 2,
                "no-proto": 2,
                "no-return-assign": 2,
                "no-script-url": 2,
                "no-sequences": 2,
                "no-shadow-restricted-names": 2,
                "no-spaced-func": 2,
                "no-trailing-spaces": 2,
                "no-undef-init": 2,
                "no-undefined": 2,
                "no-unused-expressions": 2,
                "no-unused-vars": [2, {"vars": "all", "args": "none"}],
                "no-with": 2,
                "object-curly-spacing": [2, "never"],
                "one-var": [2, "never"],
                "quote-props": [2, "consistent-as-needed"],
                "semi": [2, "always"],
                "semi-spacing": [2, {"before": false, "after": true}],
                "space-after-keywords": [2, "always"],
                "space-before-blocks": [2, "always"],
                "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
                "space-in-parens": [2, "never"],
                "space-infix-ops": 2,
                "space-return-throw-case": 2,
                "space-unary-ops": [2, { "words": true, "nonwords": false }],
                "spaced-comment": [2, "always"],
                "strict": 2,
                "yoda": [2, "never"],
                // Advertencias.
                "max-nested-callbacks": [1, 3],
                "valid-jsdoc": [1, {
                "prefer": {
                    "returns": "return",
                    "property": "prop"
                },
                "requireReturn": false
                }]
             },
             fix: true,
            
    }))
    .pipe(eslint.format())
    // si se corrigió, guardar el archivo en dest
    .pipe(gulpIf(isFixed, gulp.dest('./js/')));;
});

gulp.task('watch', function(){
    livereload.listen();

    gulp.watch('./src/sass/**/*.scss', ['sass']);
    gulp.watch('./src/js/**/*.js', ['eslint']);
    gulp.watch(['./css/style.css', './**/*.html.twig', './js/*.js'], function (files){
        livereload.changed(files)
    });
});

4. Configuración del gestor de paquetes
Ejecute npm init en su terminal desde la carpeta del tema personalizado y complete la información solicitada para crear el archivo package.json.

5. Instale las dependencias
Ejecute npm install --save-dev <nombre-del-paquete> en su terminal desde la carpeta del tema personalizado. Esto descargará los archivos gulp y las dependencias relacionadas y creará la carpeta 'node_modules'.

6. Ejecute la herramienta de automatización desde cmd/terminal.
Ahora está listo para ejecutar la herramienta de automatización gulp.
Escriba gulp watch.