7.2. Kreiranje tema zasnovanih na Bootstrap-u. Kompajliranje SASS-a pomoću Gulp-a

U poslednjoj lekciji smo pogledali kako se kompajlira LESS koristeći ugrađeni watcher u PhpStorm-u. U ovom tutorijalu ćemo napraviti temu zasnovanu na SASS Bootstrap-u. Ako ne možete da se snađete sa LESS-om i kompajliranjem kroz PhpStorm, možete pokušati da koristite Gulp i SASS. U ovoj fazi lekcija nije bitno šta ćete koristiti, LESS ili SASS. Ali preporučio bih da koristite SASS i Gulp, jer je kompajliranje brže i lakše je podesiti Gulp.

Gulp je upravljač zadacima za JavaScript. Koristićemo ga da dodamo dva zadatka, jedan za praćenje promena u SASS folderu dok dodajemo stilove, i drugi za kompajliranje SASS-a u CSS.

Pređimo na instalaciju. Instalirao sam Drupal. Sada je potrebno da skinete bootstrap temu i stavite je u /themes folder:

https://www.drupal.org/project/bootstrap

Da biste koristili SASS u bootstrap pottemama, treba da koristite ovaj kit nazvan sass:

Kopirajte ovaj sass folder u /themes folder odvojeno od bootstrapa i preimenujte ga u naziv vaše teme, ja ću imati drupalbook:

Sada je potrebno da preimenujete sve fajlove iz THEMENAME u ime vaše teme. Na primer, imamo fajl THEMENAME.starterkit.yml, on se preimenuje u drupalbook.info.yml. THEMENAME.libraries.yml treba preimenovati u drupalbook.libraries.yml i tako dalje. Ne zaboravite da preimenujete fajlove i u config files folderu, oni su takođe sa THEMENAME imenom:

U fajlovima može biti i THEMENAME, na primer u fajlu sass/config/schema/THEMENAME.schema.yml:

Da biste bili sigurni da niste ništa propustili, potražite THEMENAME kroz ceo folder potteme preko PhpStorm-a:

U pretragu unesite THEMENAME i gde god postoji zamenite imenom vaše teme.

Sada treba da skinete bootstrap i stavite ga u /themes/drupalbook/bootstrap folder:

https://getbootstrap.com/docs/4.3/getting-started/download/

https://getbootstrap.com/docs/3.3/getting-started/

Nama treba SASS verzija bootstrapa:

Za našu temu treba ceo bootstrap folder, stavite ga tako da putanja do assets foldera bude /themes/drupalbook/bootstrap/assets:

Kopirali smo sve potrebne fajlove za temu, sada treba da uključimo Gulp za kompajliranje SASS-a.

Prvo treba da instalirate Node.js:

https://nodejs.org/en/

Node.js je runtime za JavaScript, omogućava izvršavanje koda za kompajliranje SASS u CSS. Instalira se na Windows kao regularan program. Bolje je da skinete najnoviju verziju, trenutno 7.x.x:

Nakon instalacije Node.js, biće potrebno da restartujete PhpStorm ili CMD konzolu ako je otvorena. Konzolu za rad sa node.js možete otvoriti i u PhpStorm-u:

Putem Windows menija

U konzoli ukucajte node -v da proverite da li je Node.js pravilno instaliran:

Sledeće, treba da odete u folder sa vašom drupalbook temom i instalirate Gulp. Idite u konzolu kroz foldere pomoću cd komande. Komanda cd .. (cd razmak i dve tačke) vraća vas u roditeljski folder:

Za promenu drajva, unesite komandu D: (gde D može biti bilo koje slovo), tako prelazite na željeni drajv, u ovom slučaju D.

Sada kada ste u folderu sa vašom temom, instalirajte Gulp. Instalacija je putem npm package managera koji se instalira sa Node.js. Prvo inicijalizujte novi npm projekat:

npm init

Ovo će napraviti fajl package.json gde će biti zapisani svi paketi koje instalirate putem npm-a. Prilikom izvršavanja komande samo pritisnite Enter:

Kao rezultat dobijate sledeći package.json fajl:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.",
  "main": "assets/javascripts/bootstrap.js",
  "style": "assets/stylesheets/_bootstrap.scss",
  "sass": "assets/stylesheets/_bootstrap.scss",
  "files": [
    "assets",
    "eyeglass-exports.js",
    "CHANGELOG.md",
    "LICENSE",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/twbs/bootstrap-sass"
  },
  "keywords": [
    "bootstrap",
    "sass",
    "css",
    "eyeglass-module"
  ],
  "contributors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/twbs/bootstrap-sass/issues"
  },
  "devDependencies": {
    "node-sass": "^3.8.0",
    "mincer": "~1.4.0",
    "ejs": "~2.4.2"
  },
  "eyeglass": {
    "exports": "eyeglass-exports.js",
    "needs": "^0.7.1"
  }
}

Sada izvršite sledeću komandu da instalirate Gulp:

npm install --save-dev gulp

Sledeća komanda instalira gulp-sass paket:

npm install --save-dev gulp-sass

Ako imate Gulp verziju 4.x, koristićete sledeći Gulpfile.js kod:

// Gulpfile.js running on stratumui,
// a css framework available on npmjs.com
var gulp    = require('gulp'),
    sass    = require('gulp-sass'),
    concat  = require('gulp-concat'),
    uglify  = require('gulp-uglify');
 
var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};
 
function styles() {
  return gulp
   .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
.pipe(gulp.dest(paths.styles.dest));
}
 
function watch() {
  gulp.watch(paths.styles.src, styles);
}
 
var build = gulp.parallel(styles, watch);
 
gulp.task(build);
gulp.task('default', build);

Instalirali smo gulp i gulp-sass pakete, sada treba da napravimo zadatke za gulp. Kreirajte fajl Gulpfile.js u korenu teme:

/themes/drupalbook/Gulpfile.js

Takođe, za gulp 4.x i primer gore, biće vam potrebni i dodatni paketi:

npm install gulp-concat
npm install gulp-uglify

Rekli smo da kompajliramo SASS fajlove u css folder, ali taj folder odmah ne postoji u temi, potrebno je da ga kreirate, kao i da dodate fajl style.css u njega:

/themes/drupalbook/css/style.css

Ovaj fajl će sadržati sav naš kompajlirani CSS.

Sve je spremno za početak kompajliranja SASS-a. U PhpStorm-u idite u folder teme, selektujte Gulpfile.js i iz kontekstnog menija izaberite Show Gulp Tasks:

Izaberite default task i odmah će vam se otvoriti prozor zadatka:

Sada svaki put kada menjate SASS u temi, gulp će automatski kompajlirati SASS.

Kao rezultat kompajliranja, CSS će se pojaviti u našem style.css fajlu i pozadinska boja sajta će postati žuta:

Na početku može delovati kao dugotrajan proces postavljanja kompajliranja preko Gulp-a, ali ako već imate instaliran Node.js, samo treba da dodate Gulpfile.js fajl i instalirate gulp i gulp-sass pakete. Ako imate bilo kakvih problema sa instalacijom i podešavanjem, pišite u komentarima.