3 Setting Up the Gulp Project

In your terminal, go to your project root folder by typing cd, then drag your root file into the terminal. Please note that if you do this on Windows and you encounter errors with installing the dependencies, open your CMD or PowerShell as Administrator.

Install the dependencies by typing npm install.

4 Running Gulp

To run Gulp, follow these steps:

You should still be in your root if you just finished the installation, so type gulp dev in your root.

Make sure your Mendix project is running.

For a quick test to see if everything is working, open theme/styles/sass/custom/_custom-variables.scss and type body{ background-color: red; }. Your background will then be a beautiful red.

If you are using Parallels on Mac, you can access your Mendix project on your Mac browser by going to your Parallels machine (for example, http://10.211.55.3:30001 – this is different on each setup).

And that’s it! Now you are ready to start styling your Mendix app with Sass.

5 Development & Production

When running gulp dev, Sass will compile the CSS files unminified and with source-mapping. This helps in debugging the styling, as a modern browser will point to the .scss file where a rule is specified.

When using this in production, you should run gulp build before committing and deploying. This will disable source-mapping and will minify the CSS files to minimize the file size.

6 Developer Portal App Projects

When you use this setup in a collaborative app project, please note that you will need to add the node_modules folder to the SVN ignore. This folder is generated by running npm install (as described in the Installing Gulp) section) and contains too many files. It is important not to forget this step!

If you have TortoiseSVN installed, right-click the node_modules folder and select TortoiseSVN > Add to ignore list.

Always use the version of TortoiseSVN which matches your app model. If you open a local model from Mendix version 7.x or 6.x with the latest version of TortoiseSVN, you will no longer be able to open it in Mendix.