নোড-স্যাস (রুবি নেই) দিয়ে স্যাস / এসএসএসকে সিএসএসে কীভাবে সংকলন বা রূপান্তর করবেন?

Question 1

আমি লিবাস স্থাপনের সাথে লড়াই করে যাচ্ছিলাম কারণ এটি রুবি ভিত্তিক ট্রান্সপ্লেলারের মতো সোজা-এগিয়ে ছিল না। কীভাবে কেউ ব্যাখ্যা করতে পারেন:

লিবাস ইনস্টল করবেন?
কমান্ড লাইন থেকে এটি ব্যবহার করবেন?
গুল্প এবং গ্রান্টের মতো টাস্ক রানারদের সাথে এটি ব্যবহার করবেন?

প্যাকেজ পরিচালকদের সাথে আমার খুব কম অভিজ্ঞতা আছে এবং টাস্ক রানারদের সাথে এর কমও।

Question 2

আমি লিবাসের জন্য নোড-স্যাস প্রয়োগকারী বেছে নিয়েছি কারণ এটি নোড.জেএস এর উপর ভিত্তি করে is

নোড-স্যাস ইনস্টল করা হচ্ছে

(পূর্বশর্ত) আপনার যদি এনপিএম না থাকে তবে প্রথমে নোড.জেএস ইনস্টল করুন ।
$ npm install -g node-sassবিশ্বব্যাপী নোড-স্যাস ইনস্টল করে -g।

এটি আশা করা যায় যে নীচের অংশে লিবাসস না পড়লে আপনার প্রয়োজনীয় সমস্ত ইনস্টল হবে।

কমান্ড লাইন এবং এনপিএম স্ক্রিপ্ট থেকে নোড-স্যাস কীভাবে ব্যবহার করবেন

সাধারণ বিন্যাস:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

উদাহরণ:

$ node-sass my-styles.scss my-styles.css একটি ফাইল ম্যানুয়ালি সংকলন করে।
$ node-sass my-sass-folder/ -o my-css-folder/ একটি ফোল্ডারে সমস্ত ফাইল ম্যানুয়ালি সংকলন করে।
$ node-sass -w sass/ -o css/যখনই উত্স ফাইল (গুলি) পরিবর্তিত হয় তখন একটি ফোল্ডারে সমস্ত ফাইল স্বয়ংক্রিয়ভাবে সংকলন করে। -wফাইল (গুলি) এ পরিবর্তন করার জন্য একটি ঘড়ি যুক্ত করে।

'কমপ্রেশন' @ এর মতো আরও ব্যবহারযোগ্য বিকল্পগুলি এখানে । কমান্ড লাইন একটি দ্রুত সমাধানের জন্য ভাল, তবে আপনি বিল্ডিং প্রক্রিয়াটি স্বয়ংক্রিয় করতে গ্রান্ট.জেস বা গুল্প.জেএস এর মতো টাস্ক রানার ব্যবহার করতে পারেন।

আপনি উপরোক্ত উদাহরণগুলি এনপিএম স্ক্রিপ্টগুলিতেও যুক্ত করতে পারেন। সঠিকভাবে একটি হিসাবে npm স্ক্রিপ্ট ব্যবহার করার জন্য নি: শ্বাসে বিকল্প পড়া এই ব্যাপক নিবন্ধ @ css-tricks.com বিশেষত সম্পর্কে পড়তে কর্ম গোষ্ঠীবদ্ধ ।

package.jsonআপনার প্রকল্প ডিরেক্টরিতে কোনও ফাইল না থাকলে চলমান $ npm initএকটি তৈরি করবে। -yপ্রশ্নগুলি এড়ানোর জন্য এটি ব্যবহার করুন ।
যোগ "sass": "node-sass -w sass/ -o css/"করার জন্য scriptsএ package.jsonফাইল। এটি দেখতে কিছু দেখতে হবে:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

$ npm run sass আপনার ফাইলগুলি সংকলন করবে

ঝাল দিয়ে কীভাবে ব্যবহার করবেন

$ npm install -g gulp গুলপ বিশ্বব্যাপী ইনস্টল করে।
package.jsonআপনার প্রকল্প ডিরেক্টরিতে কোনও ফাইল না থাকলে চলমান $ npm initএকটি তৈরি করবে। -yপ্রশ্নগুলি এড়ানোর জন্য এটি ব্যবহার করুন ।
$ npm install --save-dev gulpগুলপ স্থানীয়ভাবে ইনস্টল করে। --save-devযোগ gulpকরার জন্য devDependenciesএ package.json।
$ npm install gulp-sass --save-dev স্থানীয়ভাবে gulp-sass ইনস্টল করে।
gulpfile.jsএই বিষয়বস্তু দিয়ে আপনার প্রকল্পের মূল ফোল্ডারে একটি ফাইল তৈরি করে আপনার প্রকল্পের জন্য গাল্প সেটআপ করুন :

'use strict';
var gulp = require('gulp');

স্থানচ্যুত করার একটি প্রাথমিক উদাহরণ

আপনার gulpfile.js এ এই কোডটি যুক্ত করুন:

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

$ gulp sassউপরের টাস্কটি চালায় যা sassফোল্ডারে .scss ফাইল (গুলি) সংকলন করে এবং ফোল্ডারে .css ফাইল (গুলি) উত্পন্ন করে css।

জীবনকে আরও সহজ করার জন্য, আসুন একটি ঘড়ি যুক্ত করুন যাতে আমাদের এটি ম্যানুয়ালি সংকলন করতে হবে না। আপনার এই কোডটি যুক্ত করুন gulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

এখন সব সেট! কেবল ঘড়ির কাজটি চালান:

$ gulp sass:watch

নোড.জেএস দিয়ে কীভাবে ব্যবহার করবেন

নোড-স্যাসের নাম থেকেই বোঝা যাচ্ছে যে, আপনি স্থান পরিবর্তন করার জন্য নিজের নোড.জেএস স্ক্রিপ্ট লিখতে পারেন। আপনি যদি কৌতূহলী হন তবে নোড-স্যাস প্রকল্প পৃষ্ঠাটি দেখুন।

লিবাসাস সম্পর্কে কী?

লিবাসাস একটি লাইব্রেরি যা একটি প্রয়োগকারী দ্বারা যেমন স্যাসসি বা আমাদের ক্ষেত্রে নোড-স্যাস দ্বারা তৈরি করা দরকার। নোড-স্যাসে লিবাসাসের একটি বিল্ট সংস্করণ রয়েছে যা এটি ডিফল্টরূপে ব্যবহার করে। যদি বিল্ড ফাইলটি আপনার মেশিনে কাজ না করে তবে এটি আপনার মেশিনের জন্য লিবাস তৈরির চেষ্টা করে। এই প্রক্রিয়াটির জন্য পাইথন ২.7.x প্রয়োজন (3.x আজকের মতো কাজ করে না)। এছাড়াও:

লিবাসাসের জন্য জিসিসি 4.6+ বা ঝনঝন / এলএলভিএম প্রয়োজন। যদি আপনার ওএস পুরানো হয় তবে এই সংস্করণটি সংকলন নাও করতে পারে। উইন্ডোজে আপনার জিসিসি 4.6+ বা ভিএস 2013 আপডেট 4+ এর সাথে মিনিজিডাব্লু প্রয়োজন। উইন্ডোজে ক্ল্যাং / এলএলভিএম দিয়ে লিবাসাস তৈরি করাও সম্ভব।

Question 3

এই সরঞ্জামগুলির ইনস্টলেশন বিভিন্ন ওএসে পরিবর্তিত হতে পারে।

উইন্ডোজের অধীনে নোড-স্যাস বর্তমানে ডিফল্টভাবে ভিএস ২০১৫ সমর্থন করে, যদি আপনার বাক্সে কেবল ভিএস ২০১৩ থাকে এবং কমান্ডটি চালনার সময় কোনও ত্রুটি দেখা দেয় তবে আপনি ভিএস-এর সংস্করণ সংজ্ঞায়িত করতে পারেন: --msvs_version = 2013। এটি নোড-স্যাস এনপিএম পৃষ্ঠায় উল্লেখ করা হয়েছে ।

সুতরাং, VS2013 সহ উইন্ডোজে কাজ করা নিরাপদ কমান্ড লাইনটি হ'ল: এনপিএম ইনস্টল --msvs_version = 2013 গল্প নোড-সাস গল্প-স্যাস

Question 4

উইন্ডোজ 10 এ সরাসরি কোনও ফোল্ডারে এক্সিকিউট করার জন্য নোড v6.11.2 এবং এনপিএম v3.10.10 ব্যবহার করে :

> node-sass [options] <input.scss> [output.css]

আমি কেবল নোড-সাস গিথুবের নির্দেশাবলী অনুসরণ করেছি :

যোগ নোড-শঠতা অপরিহার্য একটি PowerShell (এটি একটি সময় নেয়) মধ্যে এডমিন হিসাবে ব্যবহার করে:
```
> npm install --global --production windows-build-tools
```
একটি সাধারণ কমান্ড-লাইন শেল ( Win+ R+ সেমিডি + Enter) চালান:
```
> npm install -g node-gyp
> npm install -g node-sass
```
-gঅধীনে এই প্যাকেজগুলি স্থাপন %userprofile%\AppData\Roaming\npm\node_modules। আপনি যে npm\node_modules\node-sass\bin\node-sassএখন বিদ্যমান তা পরীক্ষা করতে পারেন ।
আপনার স্থানীয় অ্যাকাউন্টে (সিস্টেম নয়) PATH এনভায়রনমেন্ট ভেরিয়েবল রয়েছে কিনা তা পরীক্ষা করুন :
```
%userprofile%\AppData\Roaming\npm
```
যদি এই পথটি না উপস্থিত থাকে, এনপিএম এবং নোড এখনও চলতে পারে তবে মডিউলগুলি বিন ফাইলগুলি চালায় না!

পূর্ববর্তী শেলটি বন্ধ করুন এবং একটি নতুন খুলুন এবং হয় > node-gypবা চালান > node-sass।

বিঃদ্রঃ:

windows-build-tools প্রয়োজনীয় নাও হতে পারে (যদি কোন কম্পাইল করা হয়? আমি যদি কেউ এই সরঞ্জামগুলি ইনস্টল না করে এটি তৈরি করা পড়তে চাই), কিন্তু এটা অ্যাকাউন্ট হয়নি প্রশাসক থেকে অ্যাড GYP_MSVS_VERSIONসঙ্গে এনভায়রনমেন্ট ভেরিয়েবল 2015একটি মান হিসাবে।
আমি বিন ফাইল, যেমন > uglifyjs main.js main.min.jsএবং সহ সরাসরি অন্যান্য মডিউলগুলি চালাতে সক্ষম হয়েছি> mocha