Drupal theme buld system

Для комфортной разработки тем оформления и модулей

• Отключить кэш;
• Включить twig шаблоны в комментариях;
• Добавить less и его модули для оптимизации css.

 

1. settings.php

vim web/sites/default/settings.php

settings.php раскомментировать:

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

 

2. settings.local.php

cp web/sites/example.settings.local.php web/sites/default/

Переименовать example.settings.local.php в settings.local.php

Раскомментировать строки:

vim web/sites/default/settings.local.php

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['page'] = 'cache.backend.null';

 

3. development.services.yml

vim web/sites/development.services.yml

parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto-reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

Drupal + Gulp + less build system

cd web/themes/custom/THEME_NAME/ && mkdir workflow && cd workflow && vim gulpfile.js

 

1. gulpfile.js

const gulp = require('gulp');
const less = require('gulp-less');
const watch = require('gulp-watch');
const livereload = require('gulp-livereload');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const minifyCSS = require('gulp-minify-css'); 
 
gulp.task('less', function () {
  gulp.src('./less/styles.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer('last 2 version'))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(minifyCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('../css'))
    .pipe(livereload());
});
 
gulp.task('watch', function(){
    livereload.listen();

    gulp.watch(['../css/styles.css', '../templates/**/*.html.twig', '../js/*.js'], function (files){
        livereload.changed(files)
    });
});

 

2. package.json

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-less": "^5.0.0",
    "gulp-livereload": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-watch": "^5.0.1"
  }
}

npm install