topic Gulp CSS compilation in CMS Development

Gulp CSS compilation

bruno-ebanx — Mon, 21 Aug 2017 17:41:34 GMT

Hi, I'm using the FTP connection to manipulate the css of my hubspot's website and I notice that inside the css file there are some hubspot include like this one

{% include "custom/page/theme/style.css" %}

My doubt is about how to compilate the css file using gulp. Do you have any suggestion about plugins to ignore this piece of code in the development step but compile this piece of code for the production without any error? I'm doing the compilation normally with CSS files without the include, but files with this include isn't generated.

Re: Gulp CSS compilation

dessery — Tue, 22 Aug 2017 08:36:23 GMT

Hi Bruno

Are you using the local hubl server? Or are you compiling and uploading using the standard design manager tools?

I use Gulp in our local setup but I don't make use of the standard hubl style includes, I just use normal SASS includes and compile using compass. My setup in my gulpfile is as follows:

gulp.task('compass', function() {
    gulp.src('./sass/*.scss')
        .pipe(compass({
            config_file: 'config.rb',
            css: 'custom/system/css',
            sass: 'sass',
            sourcemap: true
        }))
        .pipe(browserSync.stream())
        .on('error', swallowError);
});

If your not using compass or browserSync, yours will likely ned to be different. In my sass folder I have a themename.scss file which is then complied out to custom/system/css/themename.css.

Then in the header of my pages I have:

{{ standard_header_includes }}
<link rel="stylesheet" href="{{ get_public_template_url('custom/system/css/themename.css') }}">

Lastly in my config.yaml file I have:

extensionResourceMappings:
  "1": ""

The last step mimics the fact that I don't have the stylesheet included globally in the HubSpot Content Settings, if you did want to include it globally though you can just change

"1": "" :

to:

"1": "custom/system/css/themename.css"

And remove the <link> from the header.

This way I have never had to worry about the HubL style includes.

I hope this is of some help, my apologies if it is not quite what you are looking for.

All the best

David

Re: Gulp CSS compilation

bruno-ebanx — Tue, 22 Aug 2017 14:50:37 GMT

Hey Dessery, thanks for the answer 😄

I'm not using hubl server, only standard design manager tools with local CSS that I create. I'm still using hubspot's include because I'm organizing the archtecture of my website.

I'll search more about how to use the hubl server.

Thanks.

Re: Gulp CSS compilation

nicolebrenner — Tue, 22 Aug 2017 17:30:02 GMT

Hi @bruno-ebanx you can find our HubL Resources here: http://designers.hubspot.com/docs/hubl/intro-to-hubl

I hope this helps!

Thank you @dessery for sharing your contributions!

Re: Gulp CSS compilation

dessery — Wed, 23 Aug 2017 09:41:34 GMT

Hi Bruno

That makes sense then, unfortunately I think you are probably going to have a hard time trying to use gulp to compile using the HubSpot include statements. I completely get why you are trying to do it though if you are using the design manager.

In the past I have tried building sites all in the design manager and I have just had one main css file, that includes lots of individual files using hubl but in the exact same architecture as I do with a SASS setup, it does work quite well substituing hubl variables for SASS variables but it is a pain in the ass having to publish both stylesheets everytime you want to make a change.

The local hubl server is well worth checking out, its far from perfect but being able to use my own IDE and normal development workflow makes developing for HubSpot a much more pleasurable experience.

Good luck with your investigations

All the best

David