How to add line break after banner inside Grunt LESS task options

Question

I'm setting up my gruntfile.js for a new WordPress project in which I'll use LESS for managing CSS.

What I'm trying to accomplish here is to add the typical list of informations regarding the theme you can see at the top of every style.css file in a WordPress theme. This is the code I'm using for the LESS task:

less: {
  development: {
    options: {
      compress: true,
      banner: '/*!\n' +
        'Theme Name: <%= pkg.name %>\n' +
        'Theme URI: <%= pkg.url %>\n' +
        'Author: <%= pkg.author.name %>\n' +
        'Author URI: <%= pkg.author.website %>\n' +
        'Description: <%= pkg.description %>\n' +
        'Version: <%= pkg.version %>\n' +
        '*/' +
        '\n'
    },
    files: {
      'css/myfile-build.min.css': 'less/myfile.less'
    }
  }
}

With the code above I'm able to get this result:

/*!
Theme Name: nameofthewptheme
Theme URI: #
Author: Vincenzo Coppolecchia
Author URI: #
Description: Description for the theme goes here.
Version: 0.1.0
*/@font-face{...}...

The problem

As you can see, there are two (small) problems:

1. right after the comment closing tag I have my CSS, so I guess the last line break isn't considered at all;
2. at the beginning of the comment there's an exclamation mark (!).

Any help will be much appreciated.

Answer 1

How I solved this

I managed to solve this myself in a different way by using another Grunt task called grunt-banner: essentially all this task does is adding banners, exactly what I needed.

Inside my Gruntfile.js file, where the less task is defined I removed the banner option

less: {
  development: {
    options: {
      compress: true
    },
    files: {
      'css/myfile-build.min.css': 'less/myfile.less'
    }
  }
}

and instead I've used the task mentioned above this way:

banner: '/*!\n' +
        'Theme Name: <%= pkg.name %>\n' +
        'Theme URI: <%= pkg.url %>\n' +
        'Author: <%= pkg.author.name %>\n' +
        'Author URI: <%= pkg.author.website %>\n' +
        'Description: <%= pkg.description %>\n' +
        'Version: <%= pkg.version %>\n' +
        '*/',
usebanner: {
    taskName: {
        options: {
            position: 'top',
            banner: '<%= banner %>',
            linebreak: true
            },
        files: {
            src: 'global.min.css'
        }
    }
}

Options used

• position this sets the position where you want your chunk of comments.
• banner this, of course, is the place where you add the content of your banner.
• linebreak here you add a line break between the content and the banner.

My final (personal) considerations

I guess this is sort of a workaround to my problem since the less task didn't prove itself not to be working at all, but it wasn't able to generate the exact result I wanted: a well formatted WordPress banner.