grunt-myless

grunt-myless is a second development plugin based on grunt-contrib-less and less 1.7.5 . fixed the bug that the grunt-contrib-less can not resolve image path corretly when the less file was imported by another less file. extend less supported functions and enable user to extend less function by create file at project_root_path/myless/functions. extend less grammer to let less support multiline string.

works before install

for mac

• install libpng by : brew install libpng. if you don't use function png8-data-uri or png8-tbcdn-uri then you can skip this step.
• install java jdk. if you don't use svg-to-png function then you can skip this step.
• taobao intranet user please edit file: ~/.myless/conf.json

for windows

• install java jdk. if you don't use svg-to-png function then you can skip this step.

how to use

• npm install grunt-myless
• add statement grunt.loadNpmTasks('grunt-myless'); in your Gruntfile.js
• add config item for grunt-myless, all config item are same as less. for example:

 grunt.initConfig({
    ...
    myless: {
        options: {
            paths: './'
        },
        main: {
            files: [
                {
                    expand: true,
                    cwd:'src/',
                    src: ['**/*.less'],
                    dest: 'src/',
                    ext: '.css'
                }
            ]
        }
    },
    ...
 });

extend functions

• {String} abs-path(String: pic-path)
• {Number} pic-width(Sring: pic-path)
• {Percent} pic-h-w-rate(String: pic-path)
• {Number} pic-height(String: pic-path)
• {String} png8-data-uri(String: png24-file-path)
• {String} png8-tbcdn-uri(String: png24-file-path). taobao intranet only!
• {String} tbcdn-uri(String: pic-path). taobao intranet only!
• {String} svg-cont(String... svg_attr, String: svg_cont). generate svg data uri by input svg attribute and svg content. for example:

   backgbround: svg-cont('width=80px', 'height=80px', <<EOF
      <!-- your svg code here -->
   EOF) center cente no-repeat;

• {String} svg-to-png(String: save-path, String...: svg-attrs, String: svg-cont). call apache batik to convert svg to png, return the absolute path of the png file. for example:

   backgbround: png8-data-uri(svg-to-png('./my-png.png', 'width=80px', 'height=80px', <<EOF
      <!-- your svg code here -->
   EOF)) center cente no-repeat;

• {String} escape-utf8(String: utf8-str). escape utf8 charactors to "***\xxxx***" for example:

  div:before { content: escape-utf8('中文'); }

extend grammer

• multiline string。 you can input multiline string in the form : <{2,}(\w+)...\1, for example :

    background-iamge: svg-cont('width=80px', 'height=80px', <<CODE_END
        <!-- you svg code here -->
    CODE_END);
 
    background-iamge: svg-cont('width=80px', 'height=80px', <<<EOF
        <!-- you svg code here -->
    EOF);    

how to extend less function youself.

grunt-myless will crate a folder named myless at the project root path when it run first time. the folder myless has two sub-folder: data, functions。suppose we want to extend to function: fn1 and fn2, and fn1 is a sync function then fn2 is a async function.

first wo need to create two js file at folder functions. the neme of two files were : fn1.js and asy-fn2.js。the prefix asy- means is a async function.

sencod to implements two functions as follow form.

// fn1.js content
module.exports = function(myless, param1, param2){
    var sum = parseInt(param1.value, 10) + parseInt(param2.value, 10);
    return myless.util.value.toLessNum(sum, 'px');
};
 
// asy-fn2.js content
module.exports = function(myless, done, param1, param2){
    var sum = parseInt(param1.value, 10) + parseInt(param2.value, 10);
    setTimeout(function(){
        if(sum <= 0){
            var err = 'wrong param!';
            done(err, null);
        }else{
            var ret = myless.util.value.toLessNum(sum, 'px');
            done(null, ret);
        }
    }, 1000);
};

third use functions at you less file, for example:

div {
    width : fn1(10, 20);
    height: fn2(20, 20);    
}

next works

• try to extend less grammer to let it support if statement.
• try to extend less grammer to let it support loop statement.
• restruct grunt-myless based on less 2.5