• 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')
    .pipe(
      sass({
        // 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
    .pipe(browserSync.stream());
});

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

    // Watch scss files and run the 'sass' task
   gulp.watch('../' + 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
  console.log(error.toString());
  this.emit('end');
};

• 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: https://medium.com/@NateBarning/using-gulp-js-for-your-mendix-project-9fe52c237d2e

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 :-)