नोड-एसएएस (कोई रूबी) के साथ सीएसएस को एसएसएस / एससीएस कैसे संकलित या परिवर्तित करना है?

Question 1

मैं लिबास स्थापित करने के साथ संघर्ष कर रहा था क्योंकि यह रूबी आधारित ट्रांसपिलर के रूप में सीधे-आगे नहीं था। क्या कोई समझा सकता है:

लिबास स्थापित करें?
कमांड लाइन से इसका उपयोग करें?
इसे टास्क रनर जैसे गल्प और ग्रंट के साथ उपयोग करें?

मेरे पास पैकेज प्रबंधकों के साथ बहुत कम अनुभव है और यहां तक कि कार्य धावकों के साथ भी कम है।

Question 2

मैंने libsass के लिए नोड-एसएएस कार्यान्वयनकर्ता को चुना क्योंकि यह नोड पर आधारित है।

नोड-एसएएस स्थापित करना

(शर्त) यदि आपके पास npm नहीं है, तो पहले Node.js स्थापित करें ।
$ npm install -g node-sassविश्व स्तर पर नोड-एसएएस स्थापित करता है -g।

यह उम्मीद है कि आप सभी की जरूरत है, अगर नीचे में libsass नहीं पढ़ा होगा स्थापित करें।

कमांड लाइन और npm स्क्रिप्ट से नोड-एसएएस का उपयोग कैसे करें

सामान्य प्रारूप:

$ 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फ़ाइल में परिवर्तन के लिए एक घड़ी जोड़ता है।

और अधिक उपयोगी विकल्प जैसे 'संपीड़न' @ यहाँ । कमांड लाइन एक त्वरित समाधान के लिए अच्छा है, हालांकि, आप बिल्ड प्रक्रिया को स्वचालित करने के लिए Grunt.js या Gulp.js जैसे कार्य धावकों का उपयोग कर सकते हैं।

आप उपरोक्त उदाहरणों को npm स्क्रिप्ट में भी जोड़ सकते हैं। ठीक से एक के रूप में 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 फ़ाइल (s) उत्पन्न करता है css।

जीवन को आसान बनाने के लिए, एक घड़ी जोड़ते हैं ताकि हमें इसे मैन्युअल रूप से संकलित न करना पड़े। इस कोड को अपने में जोड़ें gulpfile.js:

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

अभी सब सेट है! बस घड़ी का काम चलाएं:

$ gulp sass:watch

Node.js के साथ कैसे उपयोग करें

जैसा कि नोड-एसएएस का नाम है, आप ट्रांसप्लिंग के लिए अपनी स्वयं की नोड.जेएस स्क्रिप्ट लिख सकते हैं। यदि आप उत्सुक हैं, तो नोड-एसएएस परियोजना पृष्ठ देखें।

लिबास के बारे में क्या?

लिबास एक पुस्तकालय है जिसे एसईएससी या हमारे मामले नोड-एसएएस जैसे कार्यान्वयनकर्ता द्वारा बनाया जाना चाहिए। नोड-एसएएस में लिबास का एक निर्मित संस्करण होता है जिसे वह डिफ़ॉल्ट रूप से उपयोग करता है। यदि बिल्ड फ़ाइल आपकी मशीन पर काम नहीं करती है, तो यह आपकी मशीन के लिए लिबास बनाने की कोशिश करती है। इस प्रक्रिया के लिए पायथन 2.7.x की आवश्यकता है (3.x आज की तरह काम नहीं करता है)। के अतिरिक्त:

लिबास को जीसीसी 4.6+ या क्लैंग / एलएलवीएम की आवश्यकता होती है। यदि आपका OS अधिक पुराना है, तो यह संस्करण संकलित नहीं हो सकता है। विंडोज पर, आपको जीसीसी 4.6+ या वीएस 2013 अपडेट 4+ के साथ मिनगव की आवश्यकता है। विंडोज पर क्लैंग / एलएलवीएम के साथ लिबास का निर्माण भी संभव है।

Question 3

इन उपकरणों की स्थापना अलग-अलग ओएस पर भिन्न हो सकती है।

विंडोज के तहत, नोड-एसएएस वर्तमान में VS2015 को डिफ़ॉल्ट रूप से समर्थन करता है, यदि आपके पास केवल अपने बॉक्स में VS2013 है और कमांड चलाते समय किसी भी त्रुटि को पूरा करते हैं, तो आप वीएस के संस्करण को जोड़कर परिभाषित कर सकते हैं: --msvs_version = 2013। यह नोड- sass npm पेज पर नोट किया गया है ।

इसलिए, VS2013 के साथ विंडोज पर काम करने वाली सुरक्षित कमांड लाइन है: npm install --msvs_version = 2013 gulp नोड-sass gulp-sass

Question 4

Windows 10 में का उपयोग कर नोड v6.11.2 और NPM v3.10.10 , ताकि किसी भी फ़ोल्डर में सीधे निष्पादित करने के लिए में:

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

मैंने केवल नोड-एसस जीथब में निर्देशों का पालन किया :

Powershell में व्यवस्थापक के रूप में चलाकर नोड-जिप पूर्वापेक्षाएँ जोड़ें (इसमें कुछ समय लगता है):
```
> npm install --global --production windows-build-tools
```
एक सामान्य कमांड-लाइन शेल ( Win+ R+ cmd + 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
```
यदि यह पथ मौजूद नहीं है, तो npm और नोड अभी भी चल सकता है, लेकिन मॉड्यूल बिन फाइलें नहीं करेगा!

पिछले शेल को बंद करें और एक नया पुनः खोलें और > node-gypया तो चलाएं > node-sass।

ध्यान दें:

यह windows-build-tools आवश्यक नहीं हो सकता है (यदि कोई संकलन नहीं किया गया है; मैं यह पढ़ना चाहूंगा कि अगर किसी ने इन उपकरणों को स्थापित किए बिना बनाया है), लेकिन यह व्यवस्थापक के GYP_MSVS_VERSIONसाथ पर्यावरण चर 2015को एक मूल्य के रूप में जोड़ता है ।
मैं बिन फ़ाइलों के साथ सीधे अन्य मॉड्यूल चलाने में सक्षम हूं , जैसे कि > uglifyjs main.js main.min.jsऔर> mocha