How to use gulp instead of grunt for building the DXA HTML design

Question

Our client wants to use saas files instead of less, and gulp build instead of grunt for building the DXA HTML design.

I have some sample saas files and I am able to convert them to css by running gulp on my local machine.

How do I make it work in Tridion? I presume there will be major changes in the build-files.zip apart from normal html-design changes.

Any hints or pointers would definitely help.

Answer 1

I would start by asking what the benefit is of this technology change? Is it just that the client has a preference for these technologies? In which case I would use the same response as if a client asked me if they could create their Tridion driven website using PHP: You could, but is it worth the effort? And more importantly have you carefully considered what you are losing?

Most clients will choose for the DXA for one or more of the following reasons:

1. It offers an accelerated implementation timeframe
2. It offers a common platform on which SDL and community-created modules can be shared and implemented
3. It offers a best practice implementation framework

Putting in unnecessary effort to change Design Asset Management in the DXA directly contradicts 1, severely limits your ability to benefit from 2. and puts you on a divergent course to SDL with 3.

So while Bart's answer is a more correct answer to your question, before you go crazy working out how to do it, I would ask your client why you should invest time in this and inform them of the potential cost, both in terms of time, but also in the future if you want to benefit from updates/modules for the DXA?

Answer 2

The first question you should ask is if you really need to stick with the process of keeping the HTML design in the CMS. Because you could simply just deploy the HTML design assets (CSS, JavaScript and fonts) as part of your web application, and forget the whole publishing the design from the CMS part. But if that is what you really want/need, you will need to reverse engineer the HTML design build process.

Since you are talking about the build-files.zip, I assume you have either read my blog post and made those changes, or are using the DXA Java private beta.

In any case, be sure to read that blog post and this one, since they give valuable insight to how DXA uses Node.js to build the HTML design. You will also want to read up on Grunt and how Bootstrap is being build.

What you need to know more is that we build the HTML design to be able to publish the HTML design assets mentioned above. The process to build these is Grunt (executed via Node.js) and the outcome is published as binary variants via the Publish HTML Design TBB.

So you will need to change that TBB, and also make changes to the build-files.zip for sure. Or maybe you can forget about the build-files.zip and make all your required changes in the Publish HTML Design TBB (that depends on what you exactly need to do). Oh and lets not forget that you will also need to change the html-design.zip, since you want to replace the less files with saas.

Last remark, if you are also thinking about changing the HTML from our Bootstrap design to anything else, then all the views will need to be changed too. Its not something unthinkable, or impossible, as long as you are aware of everything you need to change.

Answer 3

Since our client had decided to use 'Gulp/SCSS' instead of 'Grunt/Less' approach. I did some analysis and got this working. More testing is still ongoing, but I will list the changes I did on high level:

1. Seperation of modules: We received all UI files based on 'gulp/scss' from our design team. It was important to seperate the 'html-design' and 'Build-files' from the design. The build-files need not be updated frequently, so it contains the files like - node.exe, bower components and Node modules. Rest of the files and folders like assets, gulpfile.js, package.json etc were added to html-desin zip file.

2. Changes to output directories: I tried to re-use the exisiting tridion structure groups for compiled output of gulp task. So I modified the output paths of gulp tasks to match output structure of the grunt tasks. for eg: The output of scss-css build will be at '\dist\system\assets\css' instead of '\assets\css\build\'. This way, there is no much need to modify the tridion structure. As an alternative, we can keep the gulp output paths as it is and create respective structure groups in Tridion.

3. Changes to TBB: The TBB unzips the design content and runs a command to process the gulp tasks on server. The command for Grunt had arguments like:

Arguments = "/c npm start --color=false" [Still couldn't figure out the significance of '--color=false' :) ]

For gulp, I had to change the working directory and also replace arguments in the command with:

Arguments = "/c gulp.cmd"

Other than this, there were some minor changes like using _custom.scss instead of _custom.less etc

With these above changes, I was able to successfully publish the HTML design configuration containing the gulp/scss build.