Add css files from packages to grunt

sage
1

Hello,

I’ve been adding in .js files to the gruntfile that composer retrieves by adding on to the uglify>dist>files list. Like so:
‘assets/js/_*.js’,
‘…/…/…/vendor/blueimp/Gallery/js/jquery.blueimp-gallery.min.js’,

That works fine. However some repos have CSS (and images) that need to be included. I tried adding the css files in the same way to the less>dist>files list in the gruntfile, however they never get compiled. As a workaround I’ve been copying the css into the theme directory and including them - but, what is the proper way to do this? Further, how would you handle images that need to be included from a package/repos ?

Thanks!

2

I’m a little surprised actually that blueimp’s Javascript packages are in packagist, since Packagist packages are for PHP.

My suggestion would be to use Bower and have any front-end type packages (usually Javascript) like Blueimp Gallery, Jquery-File-Upload, etc. to be installed to your assets dir, or somewhere in the directory that is publicly accessible.

If you want to compile the CSS and JS from those packages, then yes, you would need to make sure the images that are part of the package are in the same location relevant to the CSS. Generally, unless you are loading 20 different packages with CSS/images in each one, I would just link the site directly to the CSS in the package, and over-ride any styles necessary in my own CSS file. Then at least any links to images from the package will remain intact.

3

Bower looks cool, I’ll check it out, thanks.
I tried including in app.less from the vendor directory but it wasn’t working, perhaps my path was wrong.

4

Bower is awesome.

Another way to do it (sometimes simpler) is to change your .css files you’d like to import to .less files and then include them at the top of app.less before or after the bootstrap include.

For example, say I want to use the bxslider JS library (there are a few ways to go about this btw, this probably isn’t the best depdending on your workflow/needs)

  • I download the zip package from their website.
  • Then I move the JS file into assets/js/plugins folder so grunt will compile it.
  • I move the images into a bxslider folder inside assets/img
  • I move the CSS into the assets/less directory and change from a .css file to a .less file
  • I add it into the top of the app.less file below the bootstrap import
  • I change the paths to the images in bx slider to ‘…/img/bxslider/…’

Grunt will take care of everything else!

Sometimes I will enqueue JS/CSS/etc files separately if they are big and only needed on one page.

Hope that helps!

2 Likes
5

Hi Julien,
This is what I ended up doing, and works great. Thanks for the detailed bullet list.