Процес аутоматизације конвертовања LESS-a у CSS

Корак 1: Најпре морамо преузети Node.js и npm (Node Package Manager) са сајта

https://www.npmjs.com/get-npm

Корак 2: Следећи корак је инсталација Git-a. Moжемо га преузети са сајта https://git-

scm.com/book/en/v2/Getting-Started-Installing-Git .

Покренимо сада Git Bаsh едитор:

Помоћу наредбе npm -v проверавам верзију npm-а, и да ли је добро наснимљен.

Корак 3: Инсталирање Grunt-a. У Git Bаsh едитору неопходно је укуцати наредбу

$ npm install -g grunt-cli

Потом мењамо директоријум: Улазимо у директоријум пројекта (у нашем случају то је D:\\project)

наредбом

$ cd D:\\project

Затим инсталирамо Grunt користећи Node package manager наредбом:

$ npm install -g grunt-cli

Корак 4: Креирамо Grunt.js фајл у директоријуму нашег пројекта. У ту сврху, у Notepad++ или

сличан едитор укопирамо следећи код:

module.exports = function(grunt) {

require('jit-grunt')(grunt);

grunt.initConfig({

less: {

development: {

options: {

compress: true,

yuicompress: true,

optimization: 2

},

files: {

"css/main.css": "less/main.less" // destination file and source

file

}

}

},

watch: {

styles: {

files: ['less/**/*.less'], // which files to watch

tasks: ['less'],

options: {

nospawn: true

}

}

}

});

grunt.registerTask('default', ['less', 'watch']);

};

При томе је неопходно изменити адресу одговарајућих LESS и CSS фајлова.

Корак 5: Креирамо package.json фајл у нашем директоријуму помоћу нареднбе

$ npm init

Потом извршимо следежу наредбу:

$ npm install grunt grunt-contrib-less grunt-contrib-watch jit-grunt --save-

dev

Погледајмо сада фолдерску структуру нашег пројекта:

Наравно, у фолдеру CSS налази се фајл main.css, а у фолдеру LESS фајл main.less. Уколико не

желимо да користимо специјализоване програме за LESS (као што је нпр. CRUNCH), можемо

користити и Notepad++, с тим што ћемо фајл снимити са екстензијом .less. С обзиром да је ова

екстензија није на списку постојећих, можемо покушати са типом All files.

Уколико у Git Bаsh укуцамо наредбу $grunt, конверзија LESS-a у CSS ће се одвијати аутоматски, цело време док је Git Bаsh активан. Међутим, као што видимо на слици испод, фајл није препознат. Стога морамо у Notepad++, додати екстензију .less на списак екстензија.

У Notepad++ покрећемо Settins/Style Configurator

Потом додајемо за CSS екстензију .less:

На списку екстензија се појавио и .less.

Поново снимимо main.less тако што ћемо са списка изабрати одговарајућу екстензију.

Креирајмо сада пример да бисмо видели ако функционише аутоматска конверзија:

Променимо сада јо понешто: