interpolation feature

gulpfile.js

@@ -1,87 +1,126 @@
 /* jshint esversion: 8 */
 
-const gulp = require('gulp');
-const babel = require('gulp-babel');
-const eslint = require('gulp-eslint');
-const nodemon = require('gulp-nodemon');
-const todo = require('gulp-todo');
-const webpack = require('webpack-stream');
-const Mocha = require('mocha');
+const gulp = require("gulp");
+const babel = require("gulp-babel");
+const eslint = require("gulp-eslint");
+const nodemon = require("gulp-nodemon");
+const todo = require("gulp-todo");
+const webpack = require("webpack-stream");
+const Mocha = require("mocha");
 const fs = require("fs");
 const path = require("path");
-const PluginError = require('plugin-error');
+const PluginError = require("plugin-error");
 
 function getWebpackConfig() {
-    return require('./webpack.config.js')(!process.env.IS_DEV)
+    return require("./webpack.config.js")(!process.env.IS_DEV);
 }
 
 function runServer(done) {
     nodemon({
         delay: 10,
-        script: './bin/server/server.js',
-        ignore: ['bin/'],
-        ext: 'js html css',
+        script: "./bin/server/server.js",
+        ignore: ["bin/"],
+        ext: "js html css",
         done,
-        tasks: [process.env.IS_DEV ? 'dev' : 'build']
-    })
+        tasks: [process.env.IS_DEV ? "dev" : "build"],
+    });
 }
 
 function buildServer() {
-    let task = gulp.src(['src/server/**/*.*', 'src/server/**/*.js']);
+    let task = gulp.src(["src/server/**/*.*", "src/server/**/*.js"]);
     if (!process.env.IS_DEV) {
-        task = task.pipe(babel())
+        task = task.pipe(babel());
     }
-    return task.pipe(gulp.dest('bin/server/'));
+    return task.pipe(gulp.dest("bin/server/"));
 }
 
 function copyClientResources() {
-    return gulp.src(['src/client/**/*.*', '!src/client/**/*.js'])
-        .pipe(gulp.dest('./bin/client/'));
+    return gulp
+        .src(["src/client/**/*.*", "!src/client/**/*.js"])
+        .pipe(gulp.dest("./bin/client/"));
 }
 
 function buildClientJS() {
-    return gulp.src(['src/client/js/app.js'])
+    return gulp
+        .src(["src/client/js/app.js"])
         .pipe(webpack(getWebpackConfig()))
-        .pipe(gulp.dest('bin/client/js/'));
+        .pipe(gulp.dest("bin/client/js/"));
 }
 
 function setDev(done) {
-    process.env.IS_DEV = 'true';
+    process.env.IS_DEV = "true";
     done();
 }
 
 function mocha(done) {
-    const mochaInstance = new Mocha()
+    const mochaInstance = new Mocha();
     const files = fs
-        .readdirSync('test/', {recursive: true})
-        .filter(x => x.endsWith('.js')).map(x => path.resolve('test/' + x));
+        .readdirSync("test/", { recursive: true })
+        .filter((x) => x.endsWith(".js"))
+        .map((x) => path.resolve("test/" + x));
     for (const file of files) {
         mochaInstance.addFile(file);
     }
-    mochaInstance.run(failures => failures ? done(new PluginError('mocha', `${failures} test(s) failed`)) : done());
+    mochaInstance.run((failures) =>
+        failures
+            ? done(new PluginError("mocha", `${failures} test(s) failed`))
+            : done()
+    );
 }
 
-gulp.task('lint', () => {
-    return gulp.src(['**/*.js', '!node_modules/**/*.js', '!bin/**/*.js'])
+gulp.task("lint", () => {
+    return gulp
+        .src(["**/*.js", "!node_modules/**/*.js", "!bin/**/*.js"])
         .pipe(eslint())
         .pipe(eslint.format())
-        .pipe(eslint.failAfterError())
+        .pipe(eslint.failAfterError());
 });
 
-gulp.task('test', gulp.series('lint', mocha));
+gulp.task("test", gulp.series("lint", mocha));
+
+gulp.task(
+    "todo",
+    gulp.series("lint", () => {
+        return gulp.src("src/**/*.js").pipe(todo()).pipe(gulp.dest("./"));
+    })
+);
+
+gulp.task(
+    "build",
+    gulp.series(
+        "lint",
+        gulp.parallel(copyClientResources, buildClientJS, buildServer, mocha)
+    )
+);
 
-gulp.task('todo', gulp.series('lint', () => {
-    return gulp.src('src/**/*.js')
-        .pipe(todo())
-        .pipe(gulp.dest('./'));
-}));
+gulp.task(
+    "dev",
+    gulp.parallel(copyClientResources, buildClientJS, buildServer)
+);
 
-gulp.task('build', gulp.series('lint', gulp.parallel(copyClientResources, buildClientJS, buildServer, mocha)));
+gulp.task("run", gulp.series("build", runServer));
 
-gulp.task('dev', gulp.parallel(copyClientResources, buildClientJS, buildServer));
+gulp.task("watch", gulp.series(setDev, "dev", runServer));
 
-gulp.task('run', gulp.series('build', runServer));
+gulp.task("default", gulp.series("run"));
+// Client: solo JS
+function watchClientJS() {
+    return gulp.watch(["src/client/js/**/*.js"], gulp.series(buildClientJS));
+}
+
+// Client: HTML, CSS, imágenes, etc.
+function watchClientResources() {
+    return gulp.watch(
+        ["src/client/**/*.*", "!src/client/**/*.js"],
+        gulp.series(copyClientResources)
+    );
+}
 
-gulp.task('watch', gulp.series(setDev, 'dev', runServer));
+// Watch todo el cliente
+gulp.task("client:watch", gulp.parallel(watchClientJS, watchClientResources));
 
-gulp.task('default', gulp.series('run'));
+// Corre todo junto en modo dev
+gulp.task(
+    "dev:all",
+    gulp.series(setDev, "dev", gulp.parallel(runServer, "client:watch"))
+);

package.json

@@ -1,70 +1,71 @@
 {
-  "name": "agar.io-clone",
-  "version": "1.0.0",
-  "description": "A simple Agar.io clone",
-  "main": "server/server.js",
-  "scripts": {
-    "build": "gulp build",
-    "start": "gulp run",
-    "watch": "gulp watch",
-    "test": "gulp test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/owenashurst/agar.io-clone.git"
-  },
-  "author": "Huy Tran",
-  "maintainers": [
-    {
-      "name": "Owen Ashurst"
+    "name": "agar.io-clone",
+    "version": "1.0.0",
+    "description": "A simple Agar.io clone",
+    "main": "server/server.js",
+    "scripts": {
+        "build": "gulp build",
+        "start": "gulp run",
+        "watch": "gulp watch",
+        "test": "gulp test",
+        "dev:all": "gulp dev:all"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/owenashurst/agar.io-clone.git"
+    },
+    "author": "Huy Tran",
+    "maintainers": [
+        {
+            "name": "Owen Ashurst"
+        }
+    ],
+    "license": "MIT",
+    "contributors": [
+        "abalabahaha <[email protected]> (https://github.com/abalabahaha)",
+        "Ariamiro <[email protected]> (https://github.com/Ariamiro)",
+        "Bjarne Oeverli <[email protected]> (https://github.com/bjarneo)",
+        "Chris Morgan <[email protected]> (https://github.com/drpotato)",
+        "Damian Dlugosz <[email protected]> (https://github.com/bigfoot90)",
+        "Dan Prince <[email protected]> (https://github.com/danprince)",
+        "Igor Antun <[email protected]> (https://github.com/IgorAntun)",
+        "Juha Tauriainen <[email protected]> (https://github.com/JuhQ)",
+        "Keith Groves <[email protected]> (https://github.com/buskcoin)",
+        "Kostas Bariotis <[email protected]> (https://github.com/kbariotis)",
+        "Madara Uchiha <[email protected]> (https://github.com/MadaraUchiha)",
+        "Nguyen Huu Thanh <[email protected]> (https://github.com/giongto35)",
+        "PET Computação UFPR <[email protected]> (http://pet.inf.ufpr.br)",
+        "Saren Currie <[email protected]> (https://github.com/SarenCurrie)",
+        "VILLERS Mickaël <[email protected]> (https://github.com/villers)",
+        "wb9688 <[email protected]> (https://github.com/wb9688)"
+    ],
+    "dependencies": {
+        "@babel/core": "^7.21.8",
+        "@babel/eslint-parser": "^7.21.8",
+        "@babel/preset-env": "^7.21.5",
+        "babel-loader": "^9.1.2",
+        "chai": "^4.3.7",
+        "eslint": "^8.40.0",
+        "eslint-plugin-import": "^2.27.5",
+        "express": "^4.18.2",
+        "gulp": "^4.0.2",
+        "gulp-babel": "^8.0.0",
+        "gulp-eslint": "^6.0.0",
+        "gulp-nodemon": "^2.5.0",
+        "gulp-todo": "^7.1.1",
+        "jshint": "^2.13.6",
+        "mocha": "^10.2.0",
+        "nodemon": "^3.0.1",
+        "sat": "^0.9.0",
+        "socket.io": "^4.6.1",
+        "socket.io-client": "^4.6.1",
+        "sqlite3": "^5.1.6",
+        "uuid": "^9.0.0",
+        "webpack": "^5.82.1",
+        "webpack-stream": "^7.0.0"
+    },
+    "devDependencies": {
+        "@types/sat": "^0.0.32",
+        "plugin-error": "^2.0.1"
     }
-  ],
-  "license": "MIT",
-  "contributors": [
-    "abalabahaha <[email protected]> (https://github.com/abalabahaha)",
-    "Ariamiro <[email protected]> (https://github.com/Ariamiro)",
-    "Bjarne Oeverli <[email protected]> (https://github.com/bjarneo)",
-    "Chris Morgan <[email protected]> (https://github.com/drpotato)",
-    "Damian Dlugosz <[email protected]> (https://github.com/bigfoot90)",
-    "Dan Prince <[email protected]> (https://github.com/danprince)",
-    "Igor Antun <[email protected]> (https://github.com/IgorAntun)",
-    "Juha Tauriainen <[email protected]> (https://github.com/JuhQ)",
-    "Keith Groves <[email protected]> (https://github.com/buskcoin)",
-    "Kostas Bariotis <[email protected]> (https://github.com/kbariotis)",
-    "Madara Uchiha <[email protected]> (https://github.com/MadaraUchiha)",
-    "Nguyen Huu Thanh <[email protected]> (https://github.com/giongto35)",
-    "PET Computação UFPR <[email protected]> (http://pet.inf.ufpr.br)",
-    "Saren Currie <[email protected]> (https://github.com/SarenCurrie)",
-    "VILLERS Mickaël <[email protected]> (https://github.com/villers)",
-    "wb9688 <[email protected]> (https://github.com/wb9688)"
-  ],
-  "dependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/eslint-parser": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "babel-loader": "^9.1.2",
-    "chai": "^4.3.7",
-    "eslint": "^8.40.0",
-    "eslint-plugin-import": "^2.27.5",
-    "express": "^4.18.2",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-eslint": "^6.0.0",
-    "gulp-nodemon": "^2.5.0",
-    "gulp-todo": "^7.1.1",
-    "jshint": "^2.13.6",
-    "mocha": "^10.2.0",
-    "nodemon": "^3.0.1",
-    "sat": "^0.9.0",
-    "socket.io": "^4.6.1",
-    "socket.io-client": "^4.6.1",
-    "sqlite3": "^5.1.6",
-    "uuid": "^9.0.0",
-    "webpack": "^5.82.1",
-    "webpack-stream": "^7.0.0"
-  },
-  "devDependencies": {
-    "@types/sat": "^0.0.32",
-    "plugin-error": "^2.0.1"
-  }
 }