[!!!][TASK] Replace grunt with gulp

.travis.yml

@@ -30,4 +30,4 @@ before_script:
   - if git status | grep -q "modified.   \.travis\.yml"; then echo "Dirty yarn.lock"; exit 1; fi
 
 script:
-  - grunt
+  - gulp

Gruntfile.js

-module.exports = function exports(grunt) {
-  'use strict';
-
-  grunt.loadTasks('tasks');
-
-  grunt.registerTask('default', ['lint', 'copy', 'sass:dist', 'postcss:dist', 'requirejs:default', 'cachebreaker', 'inline', 'htmlmin', 'json-minify', 'clean:release']);
-  grunt.registerTask('lint', ['sasslint', 'eslint']);
-  grunt.registerTask('serve', ['lint', 'copy', 'sass:dev', 'postcss:dev', 'requirejs:dev', 'inline:dev', 'htmlmin', 'json-minify', 'browserSync', 'watch']);
-};

README.md

@@ -18,9 +18,9 @@ _Some similar features might have been implemented/merged_
 - Formatted Code
 - Translation support - https://crowdin.com/project/meshviewer - Contact us for new languages
   - Currently available: en, de, fr & ru
-- Grunt inline for some css and js - less requests
+- Gulp inline for some css and js - less requests and instant load indicator
 - Icon font with needed icons only
-- Grunt upgraded to v1.x (Tested with Node.js 4/6 LTS, 7 on Linux, 7 OSX & W**)
+- Switch to Gulp (Tested with Node.js 4/6 LTS, 7 on Linux, 7 OSX & W**)
   - css and some js moved inline
 - Yarn/npm in favour of bower
   - Load only moment.js without languages (Languages are included in translations)

config.json

-// Grunt will remove all comments
+// Gulp will remove all comments
 {
   // Variables are NODE_ID and NODE_NAME (only a-z0-9\- other chars are replaced with _)
   "nodeInfos": [
@@ -128,5 +128,5 @@
     "fr",
     "ru"
   ],
-  "cacheBreaker": "vy0zx"
+  "cacheBreaker": "<!-- inject:cache-breaker -->"
 }

gulp/config.js

+module.exports = function () {
+  const build = 'build';
+
+  return {
+    build: build,
+    src: {
+      sass: 'scss/**/*.scss',
+      javascript: ['app.js', 'lib/**/*.js'],
+      json: 'locale/*.json',
+      html: ['html/index.html', 'config.json']
+    },
+    clean: [build + '/*.map', build + '/vendor', build + '/main.css'],
+    autoprefixer: ['> 1% in DE'],
+    browsersync: {
+      server: {
+        baseDir: build
+      },
+      files: [
+        build + '/*.css',
+        build + '/*.js',
+        build + '/*.html',
+        build + '/locale/*.json'
+      ]
+    },
+    requireJs: {
+      prod: {
+        baseUrl: 'lib',
+        name: '../node_modules/almond/almond',
+        mainConfigFile: 'app.js',
+        include: '../app',
+        out: 'app.js',
+        build: true,
+        preserveLicenseComments: true
+      },
+      dev: {
+        baseUrl: 'lib',
+        name: '../node_modules/almond/almond',
+        mainConfigFile: 'app.js',
+        include: '../app',
+        optimize: 'none',
+        out: 'app.js',
+        build: false
+      }
+    }
+  };
+};

gulp/serve.js

+module.exports = function (gulp, plugins, config, env) {
+  const browserSync = require('browser-sync');
+
+  function getTask(task) {
+    return require('./tasks/' + task)(gulp, plugins, config, env);
+  }
+
+  gulp.task('ws', () =>
+    browserSync(config.browsersync)
+  );
+
+  gulp.task('watch:html', () =>
+    gulp.watch(config.src.html,
+      gulp.parallel(getTask('html'))
+    )
+  );
+
+  gulp.task('watch:javascript', () =>
+    gulp.watch(config.src.javascript,
+      gulp.parallel(getTask('eslint'), getTask('javascript'))
+    )
+  );
+
+  gulp.task('watch:styles', () =>
+    gulp.watch(config.src.sass,
+      gulp.parallel(getTask('sasslint'), getTask('sass'))
+    )
+  );
+
+  gulp.task('watch:json', () =>
+    gulp.watch(config.src.json,
+      gulp.parallel(getTask('jsonMinify'))
+    )
+  );
+
+  gulp.task('watch',
+    gulp.parallel('watch:html', 'watch:styles', 'watch:javascript', 'watch:json')
+  );
+};

gulp/tasks/clean.js

+const del = require('del');
+module.exports = function (gulp, plugins, config) {
+  return function clean() {
+    return del(config.clean);
+  };
+};

gulp/tasks/copy.js

+module.exports = function (gulp, plugins, config) {
+  return function copy() {
+    gulp.src(['html/*.html', 'assets/favicon/*'])
+      .pipe(gulp.dest(config.build));
+    gulp.src('node_modules/promise-polyfill/promise.js')
+      .pipe(gulp.dest(config.build + '/vendor'));
+    return gulp.src(['assets/fonts/*', 'assets/icons/fonts/*'])
+      .pipe(gulp.dest(config.build + '/fonts'));
+  };
+};
+

gulp/tasks/eslint.js

+module.exports = function (gulp, plugins, config, env) {
+  return function eslint() {
+    return gulp.src(['app.js', 'gulpfile.js', 'lib/**/*.js', 'gulp/**/*.js'])
+      .pipe(plugins.eslint())
+      .pipe(plugins.eslint.format())
+      .pipe(env.production(plugins.eslint.failAfterError()));
+  };
+};

gulp/tasks/html.js

+module.exports = function (gulp, plugins, config, env) {
+  return function html() {
+    return gulp.src(env.production() ? config.build + '/*.html' : 'html/*.html')
+      .pipe(plugins.inject(gulp.src(['config.json']), {
+        starttag: '<!-- inject:config -->',
+        transform: function (filePath, file) {
+          return '<script>var jsonData =' +
+            file.contents.toString('utf8')
+              .replace('<!-- inject:cache-breaker -->',
+                Math.random().toString(12).substring(7)) +
+            ';</script>'
+            ;
+        }
+      }))
+      .pipe(env.production(plugins.kyhInlineSource({ compress: false })))
+      .pipe(plugins.cacheBust({
+        type: 'timestamp'
+      }))
+      .pipe(plugins.htmlmin({
+        removeComments: true,
+        collapseWhitespace: true,
+        minifyJS: true
+      }))
+      .pipe(gulp.dest(config.build));
+  };
+};

gulp/tasks/javascript.js

+module.exports = function (gulp, plugins, config, env) {
+  return function javascript() {
+    return gulp.src('app.js')
+      .pipe(env.development(plugins.sourcemaps.init()))
+      .pipe(plugins.requirejsOptimize(env.production() ? config.requireJs.prod : config.requireJs.dev))
+      .pipe(env.production(plugins.uglify({ preserveComments: 'license' })))
+      .pipe(env.development(plugins.sourcemaps.write('.', { addComment: true })))
+      .pipe(gulp.dest(config.build));
+  };
+};

gulp/tasks/jsonMinify.js

+module.exports = function (gulp, plugins, config) {
+  return function jsonMinify() {
+    return gulp.src(config.src.json)
+      .pipe(plugins.jsonminify())
+      .pipe(gulp.dest(config.build + '/locale'));
+  };
+};

gulp/tasks/sass.js

+module.exports = function (gulp, plugins, config, env) {
+  return function sass() {
+    return gulp.src('scss/*.scss')
+      .pipe(env.development(plugins.sourcemaps.init()))
+      .pipe(plugins.sass({
+        outputStyle: 'compressed',
+        sourceMap: false
+      }))
+      .pipe(plugins.autoprefixer({
+        browsers: config.autoprefixer
+      }))
+      .pipe(env.development(plugins.sourcemaps.write('.', { addComment: true })))
+      .pipe(gulp.dest(config.build));
+  };
+};

gulp/tasks/sasslint.js

+module.exports = function (gulp, plugins, config, env) {
+  return function sasslint() {
+    return gulp.src('scss/*.scss')
+      .pipe(plugins.sassLint())
+      .pipe(plugins.sassLint.format())
+      .pipe(env.production(plugins.sassLint.failOnError()));
+  };
+};

gulp/tasks/setDevelopment.js

+module.exports = function (gulp, plugins, config, env) {
+  return function setDevelopment(done) {
+    plugins.environments.current(env.development);
+    done();
+  };
+};

gulpfile.js

+const gulp = require('gulp');
+const plugins = require('gulp-load-plugins')();
+const config = require('./gulp/config')();
+
+const env = {
+  development: plugins.environments.development,
+  production: plugins.environments.production
+};
+
+// Default environment is production
+plugins.environments.current(env.production);
+
+function getTask(task) {
+  return require('./gulp/tasks/' + task)(gulp, plugins, config, env);
+}
+
+require('./gulp/serve')(gulp, plugins, config, env);
+gulp.task('serve',
+  gulp.series(
+    getTask('setDevelopment'),
+    gulp.parallel(getTask('eslint'), getTask('sasslint')),
+    gulp.parallel(getTask('copy'), getTask('javascript'), getTask('sass'), getTask('jsonMinify')),
+    getTask('html'),
+    gulp.parallel('watch', 'ws')
+  )
+);
+
+gulp.task('default',
+  gulp.series(
+    gulp.parallel(getTask('eslint'), getTask('sasslint')),
+    gulp.parallel(getTask('copy'), getTask('javascript'), getTask('sass'), getTask('jsonMinify')),
+    getTask('html'),
+    getTask('clean')
+  )
+);

html/index.html

@@ -3,14 +3,12 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-  <link rel="stylesheet" href="main.css?__build=true">
-  <style class="css-mode night" media="not">
-    <inline src="night.css" />
-  </style>
-  <script>
-    var jsonData = <inline src="config.json" />;
-  </script>
-  <script src="vendor/promise-polyfill/promise.js?__build=true"></script>
+  <link rel="stylesheet" href="main.css" inline>
+  <link rel="stylesheet" class="css-mode night" media="not" href="night.css" inline>
+  <!-- inject:config -->
+  <!-- contents of html partials will be injected here -->
+  <!-- endinject -->
+  <script src="vendor/promise.js" inline></script>
   <script src="app.js"></script>
 </head>
 <body>

package.json

@@ -8,30 +8,28 @@
   "bugs": {
     "url": "https://github.com/ffrgb/meshviewer/issues"
   },
-  "scripts": {
-    "test": "node -e \"require('grunt').cli()\" '' clean lint"
-  },
   "devDependencies": {
-    "autoprefixer": "^6.7.7",
-    "babel-eslint": "^7.1.1",
-    "eslint": "^3.17.1",
+    "babel-eslint": "^7.2.1",
+    "browser-sync": "^2.18.8",
+    "eslint": "^3.0.0",
     "eslint-config-airbnb-es5": "^1.1.0",
     "eslint-config-defaults": "^9.0.0",
-    "eslint-plugin-react": "^6.9.0",
-    "grunt": "^1.0.1",
-    "grunt-browser-sync": "^2.2.0",
-    "grunt-cache-breaker": "^2.0.1",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-htmlmin": "^2.3.0",
-    "grunt-contrib-requirejs": "^1.0.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-eslint": "^19.0.0",
-    "grunt-inline": "https://github.com/xf-/grunt-inline.git",
-    "grunt-json-minify": "^1.1.0",
-    "grunt-postcss": "^0.8.0",
-    "grunt-sass": "^2.0.0",
-    "grunt-sass-lint": "^0.2.2"
+    "eslint-plugin-react": "^6.10.3",
+    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-cache-bust": "^1.1.0",
+    "gulp-environments": "^0.1.2",
+    "gulp-eslint": "^3.0.1",
+    "gulp-htmlmin": "^3.0.0",
+    "gulp-inject": "^4.2.0",
+    "gulp-jsonminify": "^1.0.0",
+    "gulp-kyh-inline-source": "^3.0.2",
+    "gulp-load-plugins": "^1.5.0",
+    "gulp-requirejs-optimize": "^1.2.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-sass-lint": "^1.3.2",
+    "gulp-sourcemaps": "^2.4.1",
+    "gulp-uglify": "^2.1.2"
   },
   "eslintConfig": {
     "env": {

tasks/build.js

-module.exports = function exports(grunt) {
-  'use strict';
-
-  grunt.config.merge({
-    nodedir: 'node_modules',
-    copy: {
-      html: {
-        src: ['*.html'],
-        expand: true,
-        cwd: 'html/',
-        dest: 'build/'
-      },
-      vendorjs: {
-        src: ['promise-polyfill/promise.js'],
-        expand: true,
-        cwd: '<%=nodedir%>/',
-        dest: 'build/vendor/'
-      },
-      config: {
-        src: ['config.json'],
-        expand: true,
-        cwd: '.',
-        dest: 'build/'
-      },
-      ionicons: {
-        src: ['fonts/*'],
-        expand: true,
-        dest: 'build/',
-        cwd: 'assets/icons/'
-      },
-      assistantFont: {
-        src: ['fonts/*'],
-        expand: true,
-        dest: 'build/',
-        cwd: 'assets/'
-      },
-      locale: {
-        src: ['locale/*'],
-        expand: true,
-        dest: 'build/',
-        cwd: '.'
-      }
-    },
-    sass: {
-      dev: {
-        options: {
-          sourceMap: true,
-          outputStyle: 'expanded'
-        },
-        files: [{
-          expand: true,
-          cwd: 'scss/',
-          src: '*.scss',
-          dest: 'build/',
-          ext: '.css'
-        }]
-      },
-      dist: {
-        options: {
-          outputStyle: 'compressed'
-        },
-        files: [{
-          expand: true,
-          cwd: 'scss/',
-          src: '*.scss',
-          dest: 'build/',
-          ext: '.css'
-        }]
-      }
-    },
-    postcss: {
-      options: {
-        processors: [
-          require('autoprefixer')({
-            browsers: ['> 1% in DE']
-          })
-        ]
-      },
-      dev: {
-        options: {
-          map: true
-        },
-        dist: {
-          src: 'build/*.css'
-        }
-      },
-      dist: {
-        options: {
-          map: false
-        },
-        dist: {
-          src: 'build/*.css'
-        }
-      }
-    },
-    inline: {
-      dev: {
-        options: {
-          cssmin: true,
-          uglify: true
-        },
-        src: 'build/index.html',
-        dest: 'build/index.html'
-      },
-      dist: {
-        options: {
-          tag: '__build',
-          cssmin: true,
-          uglify: true
-        },
-        src: 'build/index.html',
-        dest: 'build/index.html'
-      }
-    },
-    htmlmin: {
-      dist: {
-        options: {
-          removeComments: true,
-          collapseWhitespace: true,
-          minifyJS: true
-        },
-        files: {
-          'build/index.html': 'build/index.html'
-        }
-      }
-    },
-    requirejs: {
-      default: {
-        options: {
-          baseUrl: 'lib',
-          name: '../<%=nodedir%>/almond/almond',
-          mainConfigFile: 'app.js',
-          include: '../app',
-          out: 'build/app.js',
-          build: true
-        }
-      },
-      dev: {
-        options: {
-          baseUrl: 'lib',
-          name: '../<%=nodedir%>/almond/almond',
-          mainConfigFile: 'app.js',
-          include: '../app',
-          optimize: 'none',
-          out: 'build/app.js',
-          build: false,
-          generateSourceMaps: true
-        }
-      }
-    },
-    'json-minify': {
-      build: {
-        files: 'build/locale/*.json'
-      }
-    },
-    cachebreaker: {
-      js: {
-        options: {
-          match: ['app.js']
-        },
-        files: {
-          src: ['build/index.html']
-        }
-      },
-      variable: {
-        options: {
-          match: ['vy*zx'],
-          position: 'overwrite'
-        },
-        files: {
-          src: ['build/config.json']
-        }
-      }
-    }
-  });
-
-  grunt.loadNpmTasks('grunt-contrib-copy');
-  grunt.loadNpmTasks('grunt-contrib-requirejs');
-  grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('grunt-postcss');
-  grunt.loadNpmTasks('grunt-inline');
-  grunt.loadNpmTasks('grunt-contrib-htmlmin');
-  grunt.loadNpmTasks('grunt-json-minify');
-  grunt.loadNpmTasks('grunt-cache-breaker');
-};

tasks/clean.js

-module.exports = function exports(grunt) {
-  'use strict';
-
-  grunt.config.merge({
-    clean: {
-      build: ['build/**/*', 'node_modules/grunt-newer/.cache'],
-      release: ['build/vendor', 'build/*.map', 'build/config.json', 'build/main.css']
-    }
-  });
-
-  grunt.loadNpmTasks('grunt-contrib-clean');
-};