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

 

Tags
Drupal 7