Dmitry

С задачей синхронизации двух удаленных хостов не сталкивался, но для синхронизации локального и удаленного пока пользуюсь:
rsync для синхронизации файлов. Если недоступен ssh, приходится юзать goodsync, но он значительно медленнее.
sqlyog или navicat для синхронизации бд.

у rsync вроде бы есть ограничение: один из синхронизируемых хостов обязательно должен быть локальным, т.е. его придется запускать на одном из удаленных хостов. Но это не точно, надо проверять.

То, что диск просыпается, вообще не говорит о неисправности. Надо смотреть через process hacker или ресурс монитор, какая зараза его будит.

Советую не мучиться с галпом, с ним вечно какие-то проблемы были, фиг знает, как он там под капотом работает.
Пришел к тому, чтобы запускать подобные сборки просто как node js код. Абсолютный контроль над процессом и никаких непонятных глюков. Поначалу было сложновато, но зато никакой галп-магии, мы просто оперируем файлами. Если понадобится более сложная сборка, все равно придется в этом разобраться)

Код только для примера, в нем много лишнего.

Вот так создаем слушатель событий (у галпа под капотом тот же chokidar):

async function Default(cb) {

	

	cl( chalk.black.bgGreen( "Default..." ) );
	cl('\n');
	
	
	var livereload_server = livereload.createServer();
	
	
	let chokidar_settings = {
		ignoreInitial: true,
		usePolling: true,
		interval: 200,
		ignorePermissionErrors: true,
		awaitWriteFinish: {
			stabilityThreshold: 300,
			pollInterval: 100
		}
	};

	

	let process_css_path = [
		
		'./project_www/assets/components/project/app2/scss/*.scss',
		'./project_www/assets/components/project/test_360/scss/*.scss'
	];
	
	let process_css_path_ignored = [
		
	];

	let chokidar_settings_Process_CSS = {...chokidar_settings};
	chokidar_settings_Process_CSS.ignored = process_css_path_ignored;
	chokidar.watch( process_css_path, chokidar_settings_Process_CSS ).on('all', function (event, path) {

		if( event == 'unlink' || event == 'unlinkDir' ) return;

		Process_CSS(event, path);
		
		path = path.replace('.scss', '.css');
		
		path = 'D:/aera/' + path;
		
		livereload_server.refresh( path );

	});

А вот сама функция преобразования стилей:

function Process_CSS( event, path ){

	
	cl( chalk.black.bgGreen( ` CSS Processing ${path} \n`) );

	if( Fs.existsSync( path ) === false ){
		cl( chalk.yellow( `Not exists: ${path} \n` ) );
		return;	
	}
	
	path = Path.resolve( path );
	let scss_path = Path.dirname( path );
	let scss_name = Path.parse( path ).name;
	
	let out_css;
	try{
		out_css = sass.compile( path );
	} catch(err){
		cl( chalk.red( `${ err } \n` ) );
		return;
	}
	
	out_css = out_css.css;
	
	Fs.writeFileSync( scss_path + `/../css/${ scss_name }.css`, out_css, {encoding: 'utf8'} );
	
	cl( chalk.black.bgGreen('...OK \n') );

};

Изменение свойств объекта.

my_map.geoObjects.each(function(ob){

        if( ob.properties.get("ob_type") == "Point" ){

          ob.options.set({iconColor: "#EAA6A5"});
          ob.properties.set({active: false});

          if( ob.properties.get("iconContent") == ptid ){
            om_point = ob;
            ob.options.set({iconColor: "#f15a22"});
            ob.properties.set({active: true});
          }

        } else if( ob.properties.get("ob_type") == "LineString" ){

          ob.options.set({strokeColor: "#EAA6A5"});
          ob.properties.set({active: false});

          if( ob.properties.get("description") == ptid ){
            om_line = ob;
            ob.options.set({strokeColor: "#f15a22"});
            ob.properties.set({active: true});
          }

        }

      });

Обработка событий:

var new_mark = new ymaps.Placemark( coord,
        {
          iconCaption: icon_caption,
          iconContent: icon_content,
          ob_type: "Point",
          active: true
      }, {
          iconColor: color_default,
          preset: 'islands#redDotIcon'
      });

      new_mark.events.add("click", function(e){
        var ptid = parseInt(  e.get('target').properties.get("iconContent") );
        Show_Addr( ptid );
      });

      new_mark.events.add("mouseenter", function(e){
        if( e.get('target').properties.get("active") === false ){
          e.get('target').options.set({iconColor: color_mouseenter});
        }
      });

var new_line = new ymaps.GeoObject({
        geometry: {
          type: "LineString",
          coordinates: coords,
          description: descr,
        },
        properties:{
         // hintContent: "",
         description: descr,
         ob_type: "LineString",
         active: true
        }},
        {
          //draggable: true,
          strokeColor: "#ed4543",
          strokeWidth: 6
      });

    new_line.events.add("click", function(e){
      var ptid = parseInt( e.get('target').properties.get("description") );
      Show_Addr( ptid );
    });

Для вашей задачи хорош любой 3д пакет, но, как по мне, Blender идеален для моделинга.

У меня такая конфигурация работает. Тоже пришлось немало потанцевать с бубном. Дело, скорее всего, в return в функциях задач. Ну и не забыть поставить и активировать плагин для браузера.

var gulp = require("gulp");
var concat = require("gulp-concat");
var sass = require("gulp-sass");
var postcss = require("postcss");
var autoprefixer = require("gulp-autoprefixer");
var cssnano = require("gulp-cssnano");
var livereload = require('gulp-livereload');


var autoprefixer_options = {
	"browserslist": [
                        '> 1%',
                        'last 2 versions',
                        'firefox >= 4',
                        'safari 7',
                        'safari 8',
                        'IE 8',
                        'IE 9',
                        'IE 10',
                        'IE 11'
                    ],
                    cascade: false
	};

gulp.task('sass', function(){
	return gulp.src( "ams_www_modx/assets/ams_modx/scss/style.scss" )
		.pipe( sass().on("error", sass.logError) )
		//.pipe( concat("style.css") )
		.pipe( autoprefixer({ overrideBrowserslist: ['last 6 versions'] }) )
		//.pipe( cssnano() )
		.pipe( gulp.dest("ams_www_modx/assets/ams_modx/css") )
		.pipe( livereload({host: "127.0.0.1", port: "35729"}) );
});


gulp.task('reload', function(){
	return gulp.src( "ams_www_modx/assets/ams_modx/**/*.{html,php}" )
	.pipe(livereload({host: "127.0.0.1", port: "35729"}));
	log("///////////////////");
});


gulp.task('default', function(){
	livereload.listen({host: "127.0.0.1", port: "35729"});
	gulp.watch( ["ams_www_modx/assets/**/*.scss", "!ams_www_modx/assets/img/**/*"], gulp.series('sass') );
	gulp.watch( ["ams_www_modx/assets/**/*.{html,php}", "!ams_www_modx/assets/img/**/*"], gulp.series('reload') );
});

$(".collapsed").click(false);
$(".expanded").click(true);
- вот в этом не уверен, доки не смотрел, но думаю, что клик привязывается не к css классу, а к самому объекту, на который указывает класс. то есть класс - просто селектор, чтобы найти нужный объект. Вы потом меняете класс, а событие при этом не меняется, либо нужно снова вызвать эту конструкцию.

я бы просто заменял функции, которые вызываются первым/вторым кликом:

function FirstClick{
css animation expand
button.click = SecondClick();
}

function SecondClick{
gotoURL.
css animation contract
button.click =FirstClick();
}

buton.click = FirstClick();

Если нужен не прототип, а именно макет, попробуйте продукты Affinity. Делаю макеты в Designer - это аналог иллюстратора, только работающий по-человечески.