Compile LESS without WordPress backend

Hi

I was googling for a long time without found solution for my question so I decided to post here. I'm wondering if its possible to compile LESS without Wordpress Backend. In my development workflow I push changes to repository and with other CI tools I want to compile LESS but it seems nodoby knows how to do that.

Any of you can share how to, by command line, just compile LESS files into CSS? Maybe using third party software like gulp?

My idea is to automate everything possible but I'm stuck on this issue.

Thanks!

If you are using Beans framework, use Compiler API instead of Gulp, Grunt, Webpack ...

beans_add_smart_action( 'beans_uikit_enqueue_scripts', 'my_less_to_css', 100 );
/**
 * Less to css
 *
 * @since 1.0.0
 */
function my_less_to_css() {

 // Your absolute path to the LESS directory. (child theme)
  $less_dir  = get_stylesheet_directory() . '/assets/less/';

  // Name of the stylesheet. Should be unique.
  $id        = 'my-id';

    // The absolute path to one or more LESS files to convert to CSS.
    $fragments = array(
     $less_dir . 'file1.less', // file1.
        // file2 ...
        // file3 ...
    );

    // File format.
    $format    = 'less';

    beans_compiler_add_fragment( $id, $fragments, $format );

}

hi Joseph

thanks for sharing. I'm very new to all this, I appreciate your reply. Could you point me to the right direction? Let's say I have access to my Wordpress installation and I can run any command on Linux shell. How can I tell to beans to run this function? I suppose I need some php file to summon call Beans framekwork and then with the snipplet you gave me run the function.

I really don't know how to do it :S

Any template, schema or example to achieve that?

Thanks

toss that code in functions.php and you're golden.

It is supposed that you have followed these steps:

1. Install WordPress
2. Install Beans Framework (http://www.getbeans.io/download-beans/?no_cache=1)
3. Install Beans Child Theme (http://www.getbeans.io/download-beans-child/?no_cache=1)
4. Currently active theme 'Beans Child Theme'

If you are making few changes, it is reccomended to use the existing style.less file.

However, if you want to make significant changes, a more semantic way is to organize your less files.

At Beans child theme, create a directory called assets and inside that directory create a new one called less. Inside less directory paste/create all your less files. e.g. home.less, blog.less, contact.less...

Go back to the main child theme directory, and open functions.php and copy/paste the code above.

And the last step is to link your less files to the $fragments array. e.g.

// The absolute path to one or more LESS files to convert to CSS.
$fragments = array(
 $less_dir . 'home.less',
    $less_dir . 'blog.less',
    $less_dir . 'contact.less',
);

happy coding!

Hi

thanks for the support. About the last reply of Joseph. What I actually need is to tell WP to compile the less files into css files automatically.

When I deploy the new code, is deployed like an artifat, so there is no compiled css. Then in the first request to Wordpress, the theme react and creates the compiled css.

Before deploy wp-content/uploads/beans/compiler/beans/ empty

After deploy and first request to home of Wordpress wp-content/uploads/beans/compiler/beans/ -rw-r--r-- 1 www-data www-data 82710 Jan 29 11:57 efc55d0.css

This is I want to achieve, I can't wait the compiled css to be created, I have to force Wordpress to do this and then, I will upload the css to some place.

I suppose that, when you guys talks about "functions.php" you're talking about this file?

wp-content/themes/tm-beans/functions.php or another file?

Thanks

Hi

I would like to write what I found in the case it can help to somebody with same needs. Basically, I was trying to run Wordpress + Beans and continous delivering with a internal tool. The problem is, every time I deploy an artifact I have to "control" how many css, js, will be created in the beans path

wp-content/uploads/beans/compiler/beans/

Well. My question was, how can I control that? Ok, I was trying to request Wordpress by curl, non sucesss. By node js, non sucess. I even thought to run a phantom node xD. Was easier than that.

Once I deploy the code WP, In next script I run

php /path/to/wp/index.php

this unchain some events in Wordpress which finally tells Beans to run the functions compile the CSS, etc.

So at the end, I have to upload css,js to cloud, invalidate cache, and remove maintenance.

Thanks to all by your help, I really appreciate.