Vásquez Ponte
Creación de un subtema basado en Omega 4 versión 7.x-4.4 usando el nuevo equipo de inicio "Bleeding Edge" con LibSass, Breakpoint Sass, Singularity y Bourbon.
Pre-requisitos
- Entorno de desarrollo LAMP con Drupal 7
Drush
Instalar Drush.
sudo apt-get install curl git
sudo curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
cd /opt/
sudo git clone https://github.com/drush-ops/drush.git drush
sudo chmod u+x /opt/drush/drush
sudo ln -s /opt/drush/drush /usr/bin/drush
cd /opt/drush/
sudo composer install
Omega 4
Instalar Omega 4.
sudo apt-get install npm
sudo apt-get install nodejs-legacy
wget http://ftp.drupal.org/files/projects/omega-7.x-4.4.tar.gz
mkdir /srv/www/drupal.test.server/htdocs/sites/all/themes/contrib
tar xvzf omega-7.x-4.4.tar.gz -C /srv/www/drupal.test.server/htdocs/sites/all/themes/contrib/
Comprobar si Drush puede encontrar la instalación de Omega 4.
cd /srv/www/drupal.test.server/htdocs/sites/all/
drush cc all
drush help --filter=omega
All commands in omega: (omega) omega-export (oexp) Exports the theme settings of a given theme from the database to the .info file. omega-guard (ogrd) Runs guard for the given theme including Compass and LiveReload by default. omega-revert (orev) Reverts the theme settings of a given theme by deleting them from the database. omega-subtheme Creates a Omega subtheme. (osub) omega-wizard (owiz) Guides you through a wizard for generating a subtheme.
Subtema
Crear un subtema (en este ejemplo "Barx").
drush omega-wizard
Please enter the name of the new sub-theme [Omega Subtheme]: Barx Omega
Please enter a machine-readable name for your new theme [barx]: barx_omega
Please choose a base theme for your new theme
[0] : Cancel
[1] : Ohm (Subtheme of Omega) - Omega based demonstration theme. Serves as a best-practice reference for the Omega documentation. Ohm will be
constantly updated as best practice evolves so shouldn't be used in production.
[2] : Omega - A powerful base theme framework.
2
Please choose a starterkit for your new theme
[0] : Cancel
[1] : Default: Slim bleeding edge starterkit. Uses LibSass instead of the Ruby Sass preprocessor. (Provided by Omega)
[2] : Dusty: Rather outdated starterkit leveraging the Ruby Sass preprocessor. Comes with a well organized Sass setup with heavy use of partials.
(Provided by Omega)
1
Please choose a destination. This is where your sub-theme will be placed [sites/all/themes]: sites/all/themes/custom
Do you want to keep the starterkit's readme files? (y/n): y
Do you want to enable your new theme? (y/n): y
Do you want to make your new theme the default theme? (y/n): y
You have successfully created the theme Barx Omega (barx_omega) in sites/all/themes/custom. [success]
Si está usando Samba, tiene que cambiar las propiedades de los archivos.
chgrp -R www-data themes/custom
chmod -R g+w themes/custom
Configuración
Archivo: /srv/www/drupal.test.server/htdocs/sites/all/themes/custom/barx_omega/package.json
{
"name": "barx",
"version": "1.0.0",
"scripts": {
"sass:dev": "./node_modules/.bin/gulp",
"sass:prod": "./node_modules/.bin/gulp sass:prod"
},
"dependencies": {},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.5.2",
"gulp-watch": "^4.3.3",
"gulp-livereload": "^3.8.0",
"breakpoint-sass": "^2.6.0",
"bourbon": "^4.2.3",
"singularitygs":"^1.6.2"
}
}
Archivo: /srv/www/drupal.test.server/htdocs/sites/all/themes/custom/barx_omega/gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var livereload = require('gulp-livereload');
gulp.task('sass:prod', function () {
gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:dev', function () {
gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'./node_modules/breakpoint-sass/stylesheets/',
'./node_modules/bourbon/app/assets/stylesheets/',
'./node_modules/singularitygs/stylesheets/'
]
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css'))
.pipe(livereload());
});
gulp.task('sass:watch', function () {
livereload.listen();
gulp.watch('./sass/**/*.scss', ['sass:dev']);
gulp.watch('./sass/**/**/*.scss', ['sass:dev']);
});
gulp.task('default', ['sass:dev', 'sass:watch']);
Proceder con la instalación.
cd /srv/www/drupal.test.server/htdocs/sites/all/themes/custom/barx_omega/
npm install
Activar el modo vigilante para compilar automáticamente los cambios en los archivos *.scss.
npm run sass:dev
> barx_omega@1.0.0 sass:dev /srv/www/drupal.test.server/htdocs/sites/all/themes/custom/barx_omega > gulp [13:15:57] Using gulpfile /srv/www/drupal.test.server/htdocs/sites/all/themes/custom/barx_omega/gulpfile.js [13:15:57] Starting 'sass:dev'... [13:15:57] Finished 'sass:dev' after 6.11 ms [13:15:57] Starting 'sass:watch'... [13:15:57] Finished 'sass:watch' after 12 ms [13:15:57] Starting 'default'... [13:15:57] Finished 'default' after 4.52 μs