Update Gulp

Author: JelteMX

Grunt/_package.json

@@ -2,7 +2,7 @@
   "name": "ux-grunt-theming",
   "private": true,
   "version": "{{{ version }}}",
-  "description": "Gruntfile for UX to make theming a lot easier",
+  "description": "Gruntfile for UX to make theming a lot easier (deprecated)",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

Gulp/_Gulpfile.js

@@ -19,54 +19,54 @@ var proxyAddress = '{{{ localAddress }}}';
   * Don't try to edit below this line, unless you know what you are doing *
   *************************************************************************/
 var gulp = require('gulp'),
-  sass = require('gulp-sass'),
-  browserSync = require('browser-sync').create(),
-  path = require('path'),
-  sourcemaps = require('gulp-sourcemaps');
+    sass = require('gulp-sass'),
+    browserSync = require('browser-sync').create(),
+    path = require('path'),
+    sourcemaps = require('gulp-sourcemaps');
 
 var sourceFolder = './' + sourceStyleFolder + '/',
-  sourceSassFolder = sourceFolder + 'sass/',
-  sourceCssFolder = sourceFolder + 'css/';
+    sourceSassFolder = sourceFolder + 'sass/',
+    sourceCssFolder = sourceFolder + 'css/';
 
 var deploymentFolder = './deployment/web/' + deploymentStyleFolder,
-  deploymentCssFolder = deploymentFolder + '/css/';
+    deploymentCssFolder = deploymentFolder + '/css/';
 
-gulp.task('build-sass', gulp.series(function () {
+gulp.task('build-sass', function () {
   return gulp.src(sourceSassFolder + '**/*.scss')
     .pipe(sass({
       outputStyle: 'expanded'
     }).on('error', sass.logError))
     .pipe(gulp.dest(sourceCssFolder))
     .pipe(gulp.dest(deploymentCssFolder));
-}));
+});
 
-gulp.task('build', gulp.series(function () {
+gulp.task('build', function () {
   return gulp.src(sourceSassFolder + '**/*.scss')
     .pipe(sass({
       outputStyle: 'compressed'
     }).on('error', sass.logError))
     .pipe(gulp.dest(sourceCssFolder))
     .pipe(gulp.dest(deploymentCssFolder));
-}));
+});
 
-gulp.task('copy-css', gulp.series(function () {
+gulp.task('copy-css', function () {
   return gulp.src(sourceCssFolder + '**/*.css')
     .pipe(gulp.dest(deploymentCssFolder));
-}));
+});
 
-gulp.task('watch:sass', gulp.series(function () {
+gulp.task('watch:sass', function () {
   gulp.watch('**/*.scss', { cwd: sourceSassFolder }, gulp.series('build-sass'));
-}));
+});
 
-gulp.task('watch:css', gulp.series(function () {
+gulp.task('watch:css', function () {
   gulp.watch('**/*.css', { cwd: sourceCssFolder }, gulp.series('copy-css'));
-}));
+});
 
 gulp.task('default', gulp.series(['watch:sass']));
 gulp.task('css', gulp.series(['watch:css']));
 
 // Browsersync
-gulp.task('browsersync-sass', gulp.series(function () {
+gulp.task('browsersync-sass', function () {
   return gulp.src(sourceSassFolder + '**/*.scss')
     .pipe(sourcemaps.init())
     .pipe(sass({
@@ -76,13 +76,13 @@ gulp.task('browsersync-sass', gulp.series(function () {
     .pipe(gulp.dest(sourceCssFolder))
     .pipe(gulp.dest(deploymentCssFolder))
     .pipe(browserSync.stream());
-}));
+});
 
-gulp.task('watch:browsersync-sass', gulp.series(function () {
+gulp.task('watch:browsersync-sass', function () {
   gulp.watch('**/*.scss', { cwd: sourceSassFolder }, gulp.series('browsersync-sass'));
-}));
+});
 
-gulp.task('dev', gulp.series(['browsersync-sass', 'watch:browsersync-sass'], function () {
+gulp.task('browsersync', function () {
   browserSync.init({
     proxy: {
       target: proxyAddress,
@@ -94,4 +94,6 @@ gulp.task('dev', gulp.series(['browsersync-sass', 'watch:browsersync-sass'], fun
     notify: true,
     ghostMode: false
   });
-}));
+});
+
+gulp.task('dev', gulp.parallel(['browsersync-sass', 'watch:browsersync-sass', 'browsersync']));

Gulp/_package.json

@@ -4,7 +4,8 @@
   "version": "{{{ version }}}",
   "description": "Gulpfile for UX to make theming a lot easier",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "./node_modules/.bin/gulp",
+    "dev": "./node_modules/.bin/gulp dev"
   },
   "keywords": [
     "gulp",

README.md

@@ -1,4 +1,4 @@
-# Grunt/Gulp for Mendix theming
+# Gulp for Mendix theming
 
 Make it easier to develop Mendix themes, without the use of [Scout](https://docs.mendix.com/howto/ux/create-a-custom-theme-with-the-mendix-ui-framework) or [Koala](https://docs.mendix.com/howto/ux/setup-mendix-ui-framework-with-koala)
 
@@ -8,7 +8,7 @@ The following things need to be installed:
 * [Node.js](https://nodejs.org/en/) **Please ensure you install the LTS version, 8.x.x. This is important!! It will fail on older versions like Node 6.x.x**
 
 If you want to use Gulp (**recommended**):
-* [Gulp client](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) (you can install this after installing Node using ```npm install gulp-cli -g```)
+* [Gulp client](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) (you can install this after installing Node using ```npm install gulp-cli -g```). **Note: Per version 1.6.0 this is unnecessary, because you can run it using npm**
 
 If you want to use Grunt:
 * [Grunt client](http://gruntjs.com/getting-started) (you can install this after installing Node using ```npm install grunt-cli -g```)
@@ -18,7 +18,7 @@ Note:
 
 ## Installation
 
-1.) Download the latest release (ZIP-file) [here](https://github.com/JelteMX/ux-grunt-theming/releases). **Do NOT download the source files, but choose Gulp.zip or Grunt.zip**
+1.) Download the latest release (ZIP-file) [here](https://github.com/JelteMX/ux-grunt-theming/releases). **Do NOT download the source files, but choose Gulp.zip**
 
 2.) Unzip in your project root folder
 
@@ -32,6 +32,23 @@ _If you do this on Windows and you encounter errors with installing the dependen
 
 ## Usage
 
+### 1.6.0 and newer
+Per version 1.6.0 you can use the following tass using **npm** instead of **gulp**:
+
+* **default**
+
+```bash
+  npm run start
+```
+
+* **dev**
+
+```bash
+  npm run dev
+```
+
+### 1.5.1 and older
+
 Based on your choice between Gulp or Grunt, you have the following options:
 
 * **default**, run from commandline:
@@ -58,6 +75,8 @@ or
 grunt dev
 ```
 
+### Tasks:
+
 The **default** task will check your theme folder (check Gruntfile.js/Gulpfile.js for the location) and will:
 * copy changed .css files to your deployment folder
 * when there are changes detected in any ```.scss``` file, run sass and place them in the source folder (on which these files will be copied to deployment as well)
@@ -109,6 +128,12 @@ This is a common problem when you are using this in new Mendix Projects where it
 
 This should fix your problem with missing stylesheets after a reload
 
+#### **"I get the following error:"**
+
+> ``gulpInst.start.apply(gulpInst, toRun); TypeError: Cannot read property 'apply' of undefined``
+
+Your Gulp is outdated. Please run ``npm install gulp-cli -g`` again. Or use **npm**, see usage for 1.6.0 and newer.
+
 ## Done theming?
 
 If you do not want the theming files to be part of the project (you can safely commit them, as long as you will add ``node_modules`` to **SVN Ignore**), you can clean your project folder by deleting:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ux-theming",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Make theming easier, using Grunt or Gulp",
   "scripts": {
     "build": "node make",
@@ -16,8 +16,8 @@
   },
   "homepage": "https://github.com/mendix/ux-theming#readme",
   "devDependencies": {
-    "archiver": "^1.1.0",
-    "mustache": "^2.2.1",
-    "shelljs": "^0.7.4"
+    "archiver": "^2.1.1",
+    "mustache": "^2.3.0",
+    "shelljs": "^0.8.2"
   }
 }