Mendix Gulp setup for ux-theming

Does anybody has some more info how to best setup gulp in combination with Mendix? I know that Jelte Lagendijk did mention in this post that a gulp setup was the best, but he did not elaborate on the configuration part. Regards, Ronald
4 answers
  • First install node.js
  • Install gulp on the system (npm install -g gulp)
  • Create a local folder to keep your gulp files
  • Install gulp in this folder

    • npm install gulp
    • npm install --save-dev gulp-sass
    • npm install --save-dev compass-importer
    • npm install --save-dev yargs
    • npm install --save-dev browser-sync

    • Create file gulpfile.js with the following content:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    fs = require('fs'),
    path = require('path'),
    compass = require('compass-importer'),
    yargs = require('yargs').argv,
    browserSync = require('browser-sync').create();

// Standard configuration, can be overridden by use of parameters
var projectDirectory = 'No project defined';
var projectPort = 8080;

// Read project  directory and port from parameter(s) 
// Example: gulp -d "Example project-main" -p 8080
if (yargs.d !== undefined) projectDirectory = yargs.d;
if (yargs.p !== undefined) projectPort = yargs.p;

// Define absolute path of the root folder
var root = fs.realpathSync(__dirname + '/..') +'\\';

// Sass task with compass functionality
gulp.task('sass', function () {
  return gulp.src('../' + projectDirectory + '/theme/styles/sass/**/*.scss')
        // Use compass
          importer: compass
      }).on('error', swallowError)
    // Output css to MX deployment directory where browser-sync will trigger the refresh
    .pipe(gulp.dest(root + projectDirectory + '/deployment/web/styles/css')) 
    // Output css to MX development directory and will be included on commit to SVN teamserver
    .pipe(gulp.dest(root + projectDirectory + '/theme/styles/css'))
    // Stream css changes with browser-sync

// Browser sync task
gulp.task('browser-sync', function() {
        proxy: "http://localhost:" + projectPort + "/"

    // Watch scss files and run the 'sass' task'../' + projectDirectory + '/theme/styles/sass/**/*.scss', ['sass']);

// Set mendix project
gulp.task('showmendixproject', function() {
    console.log("Mendix project directory: " + projectDirectory);
    console.log("Mendix project port: " + projectPort);

// Default task. Run: 
gulp.task('default', ['showmendixproject', 'browser-sync']);

// Function to show sass errors, used in sass task
function swallowError (error) {
  // If you want details of the error in the console
  • Now create a local bat file for each project, if the project with the mendix model the application will open in your browser with port 3000 and your changes in scss will be updated in the front-end

content of the batfile " gulp -d "Projects/xxx" -p 8080"

Hope this helps.


You do not have to create a gulp.js file yourself. It can be downloaded from the UX theming Github.


Hi Ronald! I just wrote an article about the whole setup of Gulp.js in combination with Mendix:


Ronald, I thought the instructions on Github are pretty straightforward. You need more help, or maybe the instructions are not clear enough? You know where to find me :-)