Less.js: ๋™์ผํ•œ (?) ์ ์€ ๊ฐœ์ฒด๋ฅผ ํ†ตํ•ด ๋‹ค์‹œ ์ปดํŒŒ์ผ ํ•  ๋•Œ ๊ฐ€์ ธ ์˜ค๊ธฐ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 03์›” 07์ผ  ยท  19์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: less/less.js

๋ฒ„๊ทธ ์‹ ๊ณ 
๋‚ด ํ”„๋กœ์ ํŠธ๋ฅผ์œ„ํ•œ ์ปดํŒŒ์ผ ๋„๊ตฌ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ํ”„๋กœ์ ํŠธ ์Šคํƒ€์ผ ํด๋”์™€ ํŒŒ์ผ์€

- styles
   _utils.less
   index.less

index.less ์ฝ˜ํ…์ธ ๋Š”

<strong i="12">@import</strong> "./utils"

๋” ์ ์€ ํŒŒ์ผ์„ ์ปดํŒŒ์ผํ•˜๊ธฐ ์œ„ํ•ด ๋” ์ ์€ API๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

let less=require('less');
//....
less.render(indexContent,options,(err,result)=>{
       console.log(result.css)
});

_utils.less content ๋ณ€๊ฒฝํ•˜๋ฉด ์œ„ ์ฝ”๋“œ๊ฐ€ ์ž๋™์œผ๋กœ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ 3.0.x ์ดํ›„๋กœ _utils.less content๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด result.css ์€ ๋ช‡ ๋ฒˆ์ด๋‚˜ ๋ณ€๊ฒฝ ๋˜๋”๋ผ๋„ ์ฒซ ๋ฒˆ์งธ ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ 2.7.x๋Š” ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค. _utils.less ์ฝ˜ํ…์ธ ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด result.css ๋„ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

bug high priority research needed up-for-grabs

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋…ธ๋“œ ํ™˜๊ฒฝ์—์„œ ์ˆ˜๋™ ์ง€์šฐ๊ธฐ ๋œ ์ปดํŒŒ์ผ ์บ์‹œ ํŒŒ์ผ :

const less = require('less');
const fileManagers = less.environment && less.environment.fileManagers || [];
fileManagers.forEach(fileManager => {
     if (fileManager.contents) {
               fileManager.contents = {};
     }
});

๋ชจ๋“  19 ๋Œ“๊ธ€

https://github.com/stevelacy/gulp-less/issues/283 ๊ณผ ๋น„์Šทํ•˜๊ฒŒ
์ด๋Ÿฌํ•œ "์ž๋™ ๊ฐ์‹œ"์‚ฌ๋ก€์—์„œ๋Š” ๊ฐ ์—…๋ฐ์ดํŠธ๋ฅผ ์ปดํŒŒ์ผํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” Less ๊ฐœ์ฒด ์™€ ๋™์ผํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค . ๋งž์ฃ ? ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋‹ค๋ฅธ render ํ˜ธ์ถœ ์‚ฌ์ด์— ์ผ๋ถ€ ๊ฐ€์ ธ ์˜ค๊ธฐ ์บ์‹œ๋ฅผ ์žฌ์„ค์ •ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ์ด์™€ ๋น„์Šทํ•œ ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

@ seven-phases-max ์˜ˆ, ๋™์ผํ•œ Less ๊ฐœ์ฒด๋ฅผ ์‚ฌ์šฉ
๋‚˜๋Š” ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฑฐ๋ฆฌ๋Š” ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ง์ ‘ ์ ์€ API๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
๊ฒฐ๊ณผ ์บ์‹œ๊ฐ€ ์ ๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ๊ท€ํ•˜์˜ ๊ฒฝ์šฐ (๋ฒ„๊ทธ๊ฐ€ ํ•ด๊ฒฐ ๋  ๋•Œ๊นŒ์ง€) ๋น ๋ฅธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

require('less').render(indexContent,options,(err,result)=>{
       console.log(result.css)
});

์˜ˆ, ๋ฌธ์ œ๋Š” ์ธ์ˆ˜ https://github.com/less/less.js/commit/a48c24c4dd3c13e00a20ece80323768496a96b36#diff -a6b31db4e862654ae597161e441689bb

๋ฌธ์ œ ๊ฐ€์ด ์ปค๋ฐ‹์—์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ...

ํ , ์†”์งํžˆ ์ˆ˜์ž…ํ’ˆ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜์žˆ๋Š” ๊ฒŒ ๋ณด์ด์ง€ ์•Š๋„ค์š” ...

๋…ธ๋“œ ํ™˜๊ฒฝ์—์„œ ์ˆ˜๋™ ์ง€์šฐ๊ธฐ ๋œ ์ปดํŒŒ์ผ ์บ์‹œ ํŒŒ์ผ :

const less = require('less');
const fileManagers = less.environment && less.environment.fileManagers || [];
fileManagers.forEach(fileManager => {
     if (fileManager.contents) {
               fileManager.contents = {};
     }
});

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @tiodot ์ง€๊ธˆ๊นŒ์ง€ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ...ํ•˜์ง€๋งŒ ๊ณง "๋” ๊นจ๋—ํ•œ"๋ฐฉ๋ฒ•์„ ์–ป์„ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค!

3.0์— ์ถ”๊ฐ€ ๋œ์ด ๋ผ์ธ๊ณผ ๊ด€๋ จ์ด์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://github.com/less/less.js/blob/master/lib/less/tree/mixin-definition.js#L9

else ๋ฌธ์— ๋Œ€ํ•œ ํŠน์ • if / else๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๋ฌธ์ œ๊ฐ€ ๊ณ„์† ๋ฐœ์ƒํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ์ด ์ตœ์ ํ™”๋ฅผ ์ œ๊ฑฐํ•ด์•ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋” ์ด์ƒ์ ์ธ ๊ฒƒ์€ ์ƒˆ๋กœ์šด ๊ตฌ๋ฌธ ๋ถ„์„ / ๋ Œ๋”๋ง ํ˜ธ์ถœ๋งˆ๋‹ค ํŒŒ์ผ ๊ด€๋ฆฌ์ž ๋˜๋Š” ๋‚ด๋ถ€ ์บ์‹œ๋ฅผ ์ง€์šฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ์ค‘์ž…๋‹ˆ๊นŒ?
๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ํ•จ์€ ๊ฝค ๋งŽ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ด๊ฒƒ์„ ํƒ€๊ฒฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋ช‡ ์‹œ๊ฐ„ ์ „์— ๋‹ค์‹œ ์‹œ๋„ํ•ด ๋ดค๋Š”๋ฐ ํŒจ์น˜์—†์ด ์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ?

  "dependencies": {
    "browser-sync": "^2.24.4",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-clean-css": "^3.9.4",
    "gulp-hb": "^7.0.1",
    "gulp-less": "^4.0.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-rename": "^1.2.2"
  },
  "optionalDependencies": {
    "less": "^3.0.4"
  }

[email protected] ์—์„œ @xinglie๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€

@tiodot์—์„œ ์ œ๊ณต ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์ €์—๊ฒŒ
๋˜ํ•œ @ seven-phases-max์—์„œ ์ œ๊ณตํ•˜๋Š” require('less').render() ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ํŠธ๋ฆญ์„ ์ˆ˜ํ–‰ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.
๋” ๋งŽ์€ ์ œ์•ˆ์ด ์žˆ์Šต๋‹ˆ๊นŒ? :)

๋˜ํ•œ ์ด๊ฒƒ์œผ๋กœ ์˜ํ–ฅ์„๋ฐ›์Šต๋‹ˆ๋‹ค :(

์•ˆ๋…•ํ•˜์„ธ์š”, ์ œ๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ๋ฌด์—‡์„ํ–ˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ @tiodot๊ฐ€ ์ œ๊ณต ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ์ง€๊ธˆ ์ €์—๊ฒŒ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค!
๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๋‹ค์‹œ ์‹œ๋„ํ–ˆ๊ณ  ์ฝ”๋“œ ์–ด๋”˜๊ฐ€์—์„œ ์‹ค์ˆ˜๋ฅผ ํ–ˆ์Œ์— ํ‹€๋ฆผ ์—†๋‹ค.
([email protected] ์‚ฌ์šฉ).
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @tiodot !

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @tiodot

@tiodot @ hawkerboy7 @TigersWay ์ด ๋ถ„๊ธฐ๊ฐ€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด PR์„ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค-์ด๊ฒƒ์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค-https: //github.com/matthew-dean/less.js/commits/cache-modified

๋‘ ๊ฐœ์˜ ๋ช…ํ™•ํ•˜๊ฒŒ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋ฅผ ํ™•์ธํ•˜๊ณ  package.json ๋‚ด๋ถ€์— @tiodot ํ›Œ๋ฅญํ•œ ํŒจ์น˜๋ฅผ ์ฃผ์„ ์ฒ˜๋ฆฌํ–ˆ์œผ๋ฉฐ ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค !!

  "optionalDependencies": {
    "less": "github:matthew-dean/less.js#cache-modified"
  },

@ matthew-dean์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ•ฉ๋‹ˆ๋‹ค!

@ matthew-dean ์˜ˆ, ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ๊ตฌ์ถœ ํ™๋ณด !! :)

@tiodot @ hawkerboy7 @TigersWay ๋ฉ‹์ง„ ์ ์€ ์•ฝ๊ฐ„ ๋” ๋นจ๋ผ์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์›œ ์บ์‹œ (3.x ๊ธฐ๋Šฅ)๋กœ ์ปดํŒŒ์ผํ•˜๋Š” ๊ฒƒ์ด ์ ์œผ๋ฏ€๋กœ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๊บผ๋‚ด๋ผ๊ณ  ์ œ์•ˆํ–ˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. PR์„ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰