Concat and min additional CSS with Grunt

archived 🗄
1

Just wanted some opinions on how others would do this, I’m still a novice with grunt, just sort of did this through trial and error.

Goal: Concat the 3 CSS files from Fancybox2 and minify them into their own css file.

First I used contrib-less to concat and minify by adding another destination/output in gruntfile.js.

less: {
  dist: {
    files: {
      'assets/css/fancybox.min.css': [
        'assets/js/plugins/fancybox/css/*.css'
      ],
      'assets/css/main.min.css': [
        'assets/less/app.less'
      ]
    },
    ...

First question I have is, I know this is obviously for compiling less, but it seems to be doing the job (concat and minify), so is this cool to do?

I then could either enqueue the fancybox.min.css in scrips.php or just do an @import. Right now I’m just doing an import and everything seems to work.

Any glaring issues here? I may end up just concat and minifying all this into main.min.css, but was just toying around with grunt and stuff.

2

Valid CSS is valid LESS, so there’s nothing wrong with what you’re doing. In most circumstances I would just import the CSS file directly into app.less.