7.2. Bootstrap पर आधारित थीम बनाना। Gulp के माध्यम से SASS को कंपाइल करना

पिछले पाठ में, हमने देखा कि PhpStorm में बने-बनाए वॉचर का उपयोग करके LESS को कैसे कंपाइल किया जा सकता है। इस ट्यूटोरियल में, हम SASS Bootstrap पर आधारित एक थीम बनाएंगे। यदि आप LESS और PhpStorm के माध्यम से कंपाइलिंग को लेकर कठिनाई महसूस करते हैं, तो आप Gulp और SASS का उपयोग करने का प्रयास कर सकते हैं। इस चरण पर हमारे लिए यह मायने नहीं रखता कि हम LESS का उपयोग करें या SASS का, लेकिन मैं आपको SASS और Gulp का उपयोग करने की सलाह दूँगा क्योंकि यह कंपाइलिंग तेज़ और कॉन्फ़िगर करने में आसान है।

Gulp जावास्क्रिप्ट के लिए एक टास्क मैनेजर है। हम इसका उपयोग दो कार्य जोड़ने के लिए करेंगे — पहला कार्य SASS फ़ोल्डर में बदलावों को ट्रैक करने के लिए, और दूसरा कार्य SASS को CSS में कंपाइल करने के लिए।

अब हम स्थापना की ओर बढ़ते हैं। मैंने पहले से Drupal स्थापित किया हुआ है। अब हमें Bootstrap थीम डाउनलोड करके /themes फ़ोल्डर में रखना है:

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

Bootstrap उप-थीम में SASS का उपयोग करने के लिए, हमें इस "sass" नामक किट का उपयोग करना होगा:

इस sass फ़ोल्डर को /themes फ़ोल्डर में Bootstrap से अलग कॉपी करें और अपने थीम के नाम से रीनेम करें। उदाहरण के लिए, मैं इसे drupalbook नाम दूँगा:

अब आपको सभी फ़ाइलों के नाम THEMENAME से बदलकर अपनी थीम के नाम पर रखने होंगे। उदाहरण के लिए, THEMENAME.starterkit.yml फ़ाइल को drupalbook.info.yml नाम दें। इसी तरह, THEMENAME.libraries.yml को drupalbook.libraries.yml नाम से बदलें। यह न भूलें कि config फ़ोल्डर में मौजूद फाइलें भी THEMENAME नाम से हैं, उन्हें भी बदलना होगा:

फाइलों के अंदर भी THEMENAME हो सकता है, उदाहरण के लिए sass/config/schema/THEMENAME.schema.yml फ़ाइल में:

यह सुनिश्चित करने के लिए कि आपने कुछ छोड़ा नहीं है, PhpStorm में पूरे उप-थीम फ़ोल्डर में THEMENAME खोजें:

हम THEMENAME खोजते हैं और जहाँ भी यह है, उसे अपनी थीम के नाम से बदलते हैं।

अब आपको स्वयं Bootstrap डाउनलोड करके इसे /themes/drupalbook/bootstrap फ़ोल्डर में रखना होगा:

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

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

हम Bootstrap के SASS संस्करण में रुचि रखते हैं:

हमारी थीम के लिए हमें पूरा bootstrap फ़ोल्डर चाहिए; इसे इस प्रकार रखें कि assets फ़ोल्डर का पथ /themes/drupalbook/bootstrap/assets हो:

हमने थीम के लिए आवश्यक सभी फ़ाइलें कॉपी कर ली हैं, अब हमें SASS को कंपाइल करने के लिए Gulp को सक्षम करना होगा।

सबसे पहले हमें Node.js स्थापित करना होगा:

https://nodejs.org/en/

Node.js एक जावास्क्रिप्ट रनटाइम है, जो SASS को CSS में कंपाइल करने के लिए कोड निष्पादित करने की अनुमति देता है। यह Windows पर एक सामान्य प्रोग्राम की तरह स्थापित होता है। नवीनतम संस्करण डाउनलोड करना बेहतर है, उदाहरण के लिए 7.x.x:

Node.js स्थापित करने के बाद, आपको PhpStorm या CMD कंसोल (यदि खुला है) को पुनः आरंभ करना होगा। Node.js के साथ काम करने के लिए कंसोल PhpStorm से भी खोला जा सकता है:

या Windows मेनू के माध्यम से:

कंसोल में टाइप करें node -v यह सुनिश्चित करने के लिए कि Node.js सही तरीके से स्थापित है:

अब हमें अपनी drupalbook थीम वाले फ़ोल्डर में जाना है और Gulp स्थापित करना है। कंसोल में cd कमांड का उपयोग करके फ़ोल्डर बदलें। कमांड cd .. (cd के बाद स्पेस और दो डॉट) आपको पैरेंट फ़ोल्डर में ले जाती है:

ड्राइव बदलने के लिए, उदाहरण के लिए D ड्राइव पर स्विच करने के लिए, बस टाइप करें D: (या जो भी ड्राइव हो)।

अब जब आप अपनी थीम के फ़ोल्डर में हैं, तो Gulp स्थापित करें। npm पैकेज मैनेजर का उपयोग करें, जो Node.js के साथ आता है। पहले एक नया npm कॉम्पोनेंट सेट इनिशियलाइज़ करें:

npm init

यह आपके लिए package.json फ़ाइल बनाएगा, जिसमें npm के माध्यम से स्थापित सभी पैकेज सूचीबद्ध होंगे। कमांड चलाते समय बस Enter दबाते रहें:

परिणामस्वरूप यह package.json फ़ाइल तैयार होगी:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  ...
}

अब Gulp स्थापित करने के लिए यह कमांड चलाएँ:

npm install --save-dev gulp

फिर gulp-sass पैकेज स्थापित करें:

npm install --save-dev gulp-sass

यदि आपके पास Gulp 4.x है, तो आपको यह Gulpfile.js कोड चाहिए:

// Gulpfile.js running on stratumui
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);

अब हमें Gulp के लिए कार्य (tasks) बनाना होगा। इसके लिए थीम की रूट डायरेक्टरी में Gulpfile.js फ़ाइल बनाएं:

/themes/drupalbook/Gulpfile.js

उपरोक्त उदाहरण के लिए, आपको अतिरिक्त लाइब्रेरीज़ भी स्थापित करनी होंगी:

npm install gulp-concat
npm install gulp-uglify

हमने Gulp को बताया कि SASS फ़ाइलों को css फ़ोल्डर में कंपाइल करें, इसलिए अब आपको यह फ़ोल्डर बनाना होगा और उसमें style.css फ़ाइल जोड़नी होगी:

/themes/drupalbook/css/style.css

इस फ़ाइल में हमारा पूरा कंपाइल किया गया CSS होगा।

अब सब कुछ तैयार है SASS को कंपाइल करने के लिए। PhpStorm में थीम फ़ोल्डर पर जाएँ, Gulpfile.js चुनें और संदर्भ मेनू से "Show Gulp Tasks" चुनें:

अब “default” टास्क चुनें और उसका टर्मिनल विंडो खुलेगा:

अब हर बार जब आप अपनी थीम में SASS बदलेंगे, Gulp स्वचालित रूप से उसे पुनः कंपाइल करेगा।

कंपाइलिंग के परिणामस्वरूप CSS हमारे style.css फ़ाइल में दिखाई देगा और साइट की पृष्ठभूमि का रंग पीला हो जाएगा:

शुरुआत में ऐसा लग सकता है कि Gulp का उपयोग करके कंपाइलिंग सेटअप करने में समय लगता है, लेकिन यदि आपके पास पहले से Node.js स्थापित है, तो आपको केवल Gulpfile.js फ़ाइल जोड़नी होगी और gulp तथा gulp-sass पैकेज स्थापित करने होंगे। यदि स्थापना या सेटअप में कोई कठिनाई हो, तो टिप्पणियों में लिखें।