Month: May 2020

প্রথমে “https://jointswp.com/docs/getting-started-sass/” যান।

ডাউনলোড ও ইন্সটলেশনের জন্যঃ

১. থিমস ফোল্ডারে যান এবং সেখানে গিট ব্যাস ওপেন করুন।
২. এরপর গিট থেকে ‘JointsWP’ ফোল্ডারটি কপি করুন।
৩. ‘cd JointsWP’ করে, ডাইরেক্টরি চেন্জ করুন।
৪. ‘npm install’ কমান্ড দিয়ে ‘node_modules’ প্যাকেজ গুলোকে ইন্সটল করে নিন।

$ cd /wp-content/themes/
$ git clone https://github.com/JeremyEnglert/JointsWP.git
$ cd JointsWP 
$ npm install

এবার চলুন আরও কিছু কমান্ড দেখে নেইঃ

$ npm run watch

$ npm run browsersync

browsersync অনেক দরকারী একটি কমান্ড। এটি চালু রাখলে রিয়েলটাইমে যে কোন ফাইলের কোড চেন্জ এর আউটপুট ব্রাউজারে দেখা যায়। ফাইল সেভ করে, বারবার ব্রাউজার রিফ্রেস করার প্রয়োজন হয় না।
এর আরও একটি চমৎকার দিক আছে। লোকাল ইউআরএল সেট করে সেটা যদি সিংক করে দেওয়া হয়, এরপর যতগুলো ব্রাউজার বা ডিভাইস সেখানে কানেক্ট থাকবে, সেগুলোর যে কোনটি যদি স্ক্রল করা হয় সব ব্রাউজারে বা ডিভাইসে অটোমেটিক স্ক্রল হবে। মজার না!
এর ফলে ফ্রন্টইন্ড-এর টেস্টিংটা অনেক সহজ হয়ে যায়।

$ npm run build

সাইট ডেভলপমেন্টের কাজ শেষ এই কমান্ডের মাধ্যমে ‘assets’ এর ভেতরের ফাইলগুলিকে কম্পাইল ও মিনিফাইড করা হয়।

এখন আপনি যদি স্পেসেফিক কোন এসেটস কম্পাইল করতে চান তাহলে এভাবে করুনঃ

$ npm run styles
OR
$ npm run scripts
OR
$ npm run images

ইরর ফিক্সিং:

এবার আসুন এইসব কমান্ড রান করানোর সময় যদি কোন ধরনের ইরর জেনারেট করে তাহলে কিভাবে ফিক্স করবেন।

[19:59:56] Starting 'watch'...
[20:00:08] Starting 'styles'...
[20:00:08] 'styles' errored after 52 ms
[20:00:08] Error: Cannot find module 'gulp-sass' from 'YOUR_PATH_TO_SERVER\wp-content\themes\THEME_NAME'

এই ইরর থেকে দেখা যাচ্ছে যে ‘gulp-sass’ মডিউলটি খুজে পাচ্ছে না। তার মানে ‘node_modules’ ডিরেক্টরির ভেতরে ‘gulp-sass’ নামে একটি ডিরেক্টরি থাকার কথা যেটি নেই তাই সে খুজে পাচ্ছে না। আমাদেরকে এখন এই ফোল্ডারটি আনার ব্যবস্থা করতে হবে অর্থাৎ এই মডিউলটি ইন্সটল করতে হবে।

$ npm install gulp-sass

অনেক সময় python env variable খুজে না পাওয়ার ফলে অথবা Error: not found: python2 -এই ইররের কারণে ‘gulp-sass’ ইন্সটল নাও হতে পারে।

$ npm install --global windows-build-tools

এই কমান্ডের দ্বারা Users ফোল্ডারে “.windows-build-tools” নামে একটি ফোল্ডার তৈরী হবে। সেখান থেকে ‘python27’ ফোল্ডারটি নিয়ে ‘c://python27’ লোকেশনে কপি করে দেন।

এরপর ‘gulp-sass’ ইন্সটল নিবে।

এবার আমরা অন্য আরেকটি ইররের সাথে পরিচিত হই। যেটা সচরাচর ইমেজ ফাইলগুলি মিনিফাই করার সময় দেখা দেয়। যদিও এইবার ‘node_modules’ ডিরেক্টরির ভেতর ‘gulp-imagemin’ ডিরেক্টরিটি আছে তবুও কাজ করছে না, কারণ এটির মধ্যে ইরর দেখা দিয়েছে। এই ‘gulp-imagemin’ প্লাগইনটি আরও অনেকগুলি ছোট ছোট মডিউলের সমন্বয়ে কাজ করে। তাই আসলে কোনটিতে সমস্যা হচ্ছে সেটি ঠিক করে বোঝা যায় না। ছোট একটি ট্রিক্স এর মাধ্যমে এটি সমাধান করা যায়।

[22:30:48] Starting 'images'...
[22:30:48] 'images' errored after 143 ms
[22:30:48] Error in plugin 'gulp-imagemin'
Message:
    The system cannot find the path specified.

Details:
    errno: ENOENT
    code: ENOENT
    syscall: spawn YOUR_PATH_TO_SERVER\wp-content\themes\THEME_NAME\node_modules\optipng-bin\vendor\optipng.exe
    killed: false
    stdout:
    stderr: The system cannot find the path specified.

    failed: true
    signal: null
    timedOut: false
    fileName: YOUR_PATH_TO_SERVER\wp-content\themes\THEME_NAME\assets\images\src\apple-icon-touch.png
    domainEmitter: [object Object]
    domainThrown: false

প্রথমে ‘node_modules’ এর ভেতর ‘gulp-imagemin’ ডিরেক্টরিতে ব্রাউজ করে যান। এরপর সেখানে NPM ইন্সটল করুন।

cd path\to\the\project\node_modules\gulp-imagemin

$ npm i

ব্যাস কাজ শেষ। আশা করি ইমেজ মিনিফাই করার ক্ষেত্রে আর কোন সমস্যা হবে না।