1 минута
Для комфортной разработки тем оформления и модулей
- Отключить кэш;
- Включить 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