vanilla-jet 1.2.1 → 1.3.0-beta

package/.gulp/build_styles_task.js

@@ -0,0 +1,30 @@
+module.exports = function(grunt) {
+    grunt.registerTask('buildLess', 'Compile admin.less and add .section.less', function() {
+
+        // -- Functions
+        function getCleanedCWD() {
+            const cwd = process.cwd();
+            return cwd
+                .replace('/node_modules', '')
+                .replace('/vanilla-jet', '')
+                .replace('/.grunt', '');
+        }
+
+        // -- Content
+        let adminContent = grunt.file.read(`${getCleanedCWD()}/assets/styles/less/admin.less`);
+        let sectionFiles = grunt.file.expand([
+            `${getCleanedCWD()}/assets/styles/less/sections/**/*.section.less`,
+            `${getCleanedCWD()}/assets/styles/less/sections/*.section.less`
+        ]);
+        
+        let combinedContent = adminContent + '\n';
+        sectionFiles.forEach(function(filePath) {
+            let sectionContent = grunt.file.read(filePath);
+            combinedContent += `\n/* ${filePath} */\n` + sectionContent;
+        });
+ 
+       // -- New file
+       grunt.file.write(`${getCleanedCWD()}/assets/styles/less/admin_build.less`, combinedContent);
+       grunt.task.run(['less']);
+    });
+ }; 

package/.gulp/compile_html.js

@@ -0,0 +1,308 @@
+const fs = require('fs');
+const path = require('path');
+const nunjucks = require('nunjucks');
+const beautify = require('js-beautify').html;
+const minify = require('html-minifier-terser').minify;
+const identifier = 'templates';
+const chalk = require('chalk');
+const zlib = require('zlib');
+
+// Get environment from command line argument
+const env = process.argv[2] || 'development';
+if (env === 'dev') { env = 'development'; }
+if (env === 'build:qa') { env = 'qa'; }
+if (env === 'build:staging') { env = 'staging'; }
+if (env === 'build:prod') { env = 'production'; }
+
+function getCwd() {
+  return process.cwd()
+    .replace('/node_modules', '')
+    .replace('/vanilla-jet', '')
+    .replace('/.gulp', '');
+}
+
+const base = getCwd();
+const pagesDir = path.join(base, 'assets/pages');
+const templatesDir = path.join(base, 'assets/templates');
+const outputDir = path.join(base, 'public');
+
+// Configure nunjucks
+nunjucks.configure(templatesDir, {
+  autoescape: true,
+  watch: false
+});
+
+// Create output directory if it doesn't exist
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Read all HTML files from pages directory
+fs.readdir(pagesDir, (err, files) => {
+  if (err) {
+    console.error('Error reading pages directory:', err);
+    process.exit(1);
+  }
+
+  files.forEach(file => {
+    if (path.extname(file) === '.html') {
+      const templatePath = path.join(pagesDir, file);
+      const outputPath = path.join(outputDir, file);
+
+      // Read template file
+      fs.readFile(templatePath, 'utf8', (err, content) => {
+        if (err) {
+          console.error(`Error reading template ${file}:`, err);
+          return;
+        }
+
+        try {
+          // Render template with nunjucks
+          const rendered = nunjucks.renderString(content);
+
+          // Process the HTML based on environment
+          let processedHtml;
+          if (env === 'development') {
+            // In development, beautify the HTML
+            processedHtml = beautify(rendered, {
+              indent_size: 2,
+              preserve_newlines: true,
+              max_preserve_newlines: 2,
+              wrap_line_length: 0
+            });
+          } else {
+            // In other environments, minify the HTML
+            processedHtml = minify(rendered, {
+              collapseWhitespace: true,
+              removeComments: true,
+              minifyCSS: true,
+              minifyJS: true
+            });
+          }
+
+          // Write the processed HTML to output file
+          fs.writeFile(outputPath, processedHtml, err => {
+            if (err) {
+              console.error(`Error writing file ${file}:`, err);
+            } else {
+              console.log(`Successfully compiled ${file}`);
+            }
+          });
+        } catch (err) {
+          console.error(`Error processing template ${file}:`, err);
+        }
+      });
+    }
+  });
+});
+
+let Functions = require('../framework/functions.js');
+let Dipper = require('../framework/dipper.js');
+let Config = require(processCwd() + '/config.js');
+
+// -- Init Dipper
+let settings = Config.settings;
+settings['shared']['environment'] = env;
+
+let opts = settings[env] || {},
+  shared = settings['shared'] || {};
+const dipper = new Dipper(opts, shared);
+
+// -- Hydrate dipper
+Functions.hydrate(dipper);
+
+// -- Making nunjucks
+let nunjucksPath = path.join(processCwd(), '/assets');
+nunjucks.configure(nunjucksPath, {
+  autoescape: false,
+	throwOnUndefined: true,
+	noCache: true
+});
+
+// -- Template directory
+const templatesDirectoryPath = '/assets/templates/';
+
+// -- Call main function
+main();
+
+// -- Define mainfunctions on other functions
+function main() {
+
+  // -- Get template files
+  const templates = getTemplates(templatesDirectoryPath);
+  //console.log(templates);
+
+  // -- Get home.html
+  let homePageName = 'home.html';
+  getHtmlFromPage(homePageName).then((htmlContent) => {
+    if (htmlContent) {
+      // -- Divide content line by line
+      const htmlContentLines = htmlContent.split('\n');
+      let lines = Array.from(htmlContentLines);
+      // -- Iterate over each line
+      for (let line of htmlContentLines) {
+        let originalLine = line;
+        // -- Remove spaces and tabs
+        line = cleanALine(line);
+        // -- Check is not empty and not a tag
+        if (line.length != 0 && !line.includes('<')) {
+
+          // -- Get template name
+          var templateName = line.replace('include::', '');
+          // -- Check if its name "templates" add all templates if not add specific one
+          if (templateName === identifier) {
+
+            let allTemplatesCompiled = '';
+            for (let templateName in templates) {
+              if (templateName.includes('template.html')) {
+                let templatePath = templates[templateName];
+                let templateCompiled = compileTemplate(templatePath);
+                allTemplatesCompiled += templateCompiled;
+              }
+            }
+            lines = replaceInclude(lines, originalLine, allTemplatesCompiled);
+
+          } else {
+            let templatePath = templates[templateName];
+            let templateCompiled = compileTemplate(templatePath);
+            lines = replaceInclude(lines, originalLine, templateCompiled);
+          }
+        }
+      }
+      // -- Join lines
+      const newHtml = lines.join('\n');
+      // -- Create HTML file
+      createHTMLFile(newHtml, homePageName);
+      // -- Console finish
+      console.log(chalk.green("\n\nVanillaJet - Finish build"));
+    }
+  });
+}
+
+// -- Step 0
+function getTemplates(directory) {
+    
+  const results = {};
+
+  // -- Sub functions
+  function exploreDirectory(dir) {
+    const files = fs.readdirSync(dir);
+    files.forEach(function (file) {
+      //console.log(file);
+      if (!checkExcludes(file)) {
+        const filePath = path.join(dir, file);
+        //console.log(filePath);
+        const stats = fs.statSync(filePath);
+        if (stats.isFile()) {
+          const extension = path.extname(file).toLowerCase();
+          if (extension === '.html') {
+            results[file] = filePath;
+          }
+        } else if (stats.isDirectory()) {
+          exploreDirectory(filePath);
+        }
+      }
+    });
+  }
+
+  function checkExcludes(file) {
+
+    const excludes = ['.DS_Store'];
+    for (const esclude of excludes) {
+      if (file.includes(esclude)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // -- Main code
+  const templatesPath = path.join(processCwd(), directory);
+  exploreDirectory(templatesPath);
+  return results;
+}
+
+// -- Step 1
+async function getHtmlFromPage(page) {
+
+    const filename = path.join(processCwd(), '/assets/');
+    const exists = await fs.promises.access(filename, fs.constants.F_OK).then(() => true).catch(() => false);
+    if (!exists) {
+      console.log("Assets folder doesnt exists");
+      return null;
+    }
+  
+    let fileContent;
+    if (await fs.promises.stat(filename).then((stats) => stats.isDirectory())) {
+      const filePath = path.join(filename, 'pages/' + page);
+      try {
+        fileContent = await fs.promises.readFile(filePath, { encoding: 'utf8' });
+      } catch (err) {
+        console.log("Error in Home");
+        return null;
+      }
+    }
+    return fileContent;
+}
+
+// -- Step 2
+function compileTemplate(path) {
+
+  // -- Data
+  let data = { 'app': dipper }
+  
+  // -- Render
+  return nunjucks.render(path, data);
+}
+
+// -- Step 3
+function replaceInclude(lines, originalLine, templateCompiled) {
+  const index = lines.indexOf(originalLine);
+  if (index !== -1) {
+    lines.splice(index, 1, templateCompiled);
+  }
+  return lines;
+}
+
+// -- Step 4
+async function createHTMLFile(content, filePath) {
+  const { minify } = require('html-minifier-terser');
+  const minified = await minify(content, {
+    collapseWhitespace: true,
+    collapseInlineTagWhitespace: true,
+    removeComments: true,
+    collapseBooleanAttributes: true,
+    useShortDoctype: true,
+    removeEmptyAttributes: true,
+    removeOptionalTags: true,
+    minifyJS: true
+  });
+
+  const publicPath = path.join(processCwd(), '/public/pages');
+  fs.mkdirSync(publicPath, { recursive: true });
+  const absolutePath = path.join(publicPath, filePath);
+  
+  // Write the minified HTML file
+  fs.writeFileSync(absolutePath, minified, 'utf8');
+
+  // Create gzipped version
+  const gzipped = zlib.gzipSync(minified, { level: 9 }); // Maximum compression level
+  fs.writeFileSync(`${absolutePath}.gz`, gzipped);
+  
+  console.log(chalk.green(`Created HTML file at: ${absolutePath}`));
+  console.log(chalk.green(`Created gzipped version at: ${absolutePath}.gz`));
+}
+
+// -- Helpers
+function cleanALine(line) {
+  line = line.replaceAll(' ', '');
+  line = line.replaceAll('\t', '');
+  line = line.replaceAll('\n', '');
+  return line;
+}
+
+function processCwd() {
+  return process.cwd()
+    .replace('/.grunt', '')
+    .replace('/node_modules/vanilla-jet', '');
+} 

package/bin.js

@@ -15,33 +15,33 @@ switch (args[0]) {
     
     case 'dev':
       try {
-        execSync('grunt --env=development', { stdio: 'inherit', cwd: __dirname });
+        execSync('gulp dev --env development', { stdio: 'inherit', cwd: __dirname });
       } catch (error) {
-        console.error('Error ejecutando grunt:', error.message);
+        console.error('Error ejecutando gulp:', error.message);
       }
       break;
 
     case 'build:qa':
       try {
-        execSync('grunt build --env=qa', { stdio: 'inherit', cwd: __dirname });
+        execSync('gulp build --env qa', { stdio: 'inherit', cwd: __dirname });
       } catch (error) {
-        console.error('Error ejecutando grunt:', error.message);
+        console.error('Error ejecutando gulp:', error.message);
       }
       break;
 
     case 'build:staging':
       try {
-        execSync('grunt build --env=staging', { stdio: 'inherit', cwd: __dirname });
+        execSync('gulp build --env staging', { stdio: 'inherit', cwd: __dirname });
       } catch (error) {
-        console.error('Error ejecutando grunt:', error.message);
+        console.error('Error ejecutando gulp:', error.message);
       }
       break;
 
     case 'build:prod':
       try {
-        execSync('grunt build --env=production', { stdio: 'inherit', cwd: __dirname });
+        execSync('gulp build --env production', { stdio: 'inherit', cwd: __dirname });
       } catch (error) {
-        console.error('Error ejecutando grunt:', error.message);
+        console.error('Error ejecutando gulp:', error.message);
       }
       break;
 }

package/framework/dipper.js

@@ -9,12 +9,7 @@ function Dipper(options, shared) {
 	this.page_title = this.site_title;
 	this.description = shared.description;
 	this.fbAppId = shared.fbAppId;
-
-	this.site_url = ((this.options.site_url == 'localhost')  ? 
-		'http://localhost' : 
-		this.options.site_url) + ':' + this.options.port;
 	this.base_dir = path.join(process.cwd(), '/');
-	this.base_url = this.site_url + this.options.base_url;
 	
 	// Dirs
 	this.dirs = {
@@ -44,27 +39,19 @@ function Dipper(options, shared) {
 }
 
 Dipper.prototype.getPageTitle = function() {
-
-	var obj = this;
-	return obj.page_title;
+	return this.page_title;
 }
 
 Dipper.prototype.getSiteTitle = function() {
-
-	var obj = this;
-	return obj.site_title;
+	return this.site_title;
 }
 
 Dipper.prototype.getDescription = function() {
-
-	var obj = this;
-	return obj.description;
+	return this.description;
 }
 
 Dipper.prototype.getFbAppId = function() {
-
-	var obj = this;
-	return obj.fbAppId;
+	return this.fbAppId;
 }
 
 Dipper.prototype.addMeta = function({name, content, attribute}) {
@@ -100,11 +87,8 @@ Dipper.prototype.metaTags = function() {
 }
 
 Dipper.prototype.img = function(filename) {
-
-	var obj = this,
-		dir = this.getDir('images', false);
-		ret = this.urlTo(dir + filename);
-	return ret;
+	let dir = this.getDir('images', false);
+	return this.urlTo(dir + filename);
 }
 
 Dipper.prototype.script = function(filename) {
@@ -119,17 +103,14 @@ Dipper.prototype.style = function(filename) {
 
 Dipper.prototype.pdf = function(filename) {
 
-	var obj = this,
-		dir = '/assets/pdf/'
-		ret = this.urlTo(dir + filename);
-		//console.log(ret);
-	return ret;
+	let dir = '/assets/pdf/';
+	return this.urlTo(dir + filename);
 }
 
 Dipper.prototype.getDir = function(dir, full) {
 	
-	var obj = this,
-		full = (full == undefined) ? true : full;
+	let obj = this;
+	full = (full == undefined) ? true : full;
 
 	if ( obj.dirs[dir] != undefined ) {
 		return (full == true ? obj.baseDir(obj.dirs[dir]) : obj.dirs[dir]);
@@ -138,32 +119,14 @@ Dipper.prototype.getDir = function(dir, full) {
 }
 
 Dipper.prototype.baseDir = function(path) {
-
-	var obj = this,
-		path = path || '',
-		ret = obj.base_dir + path;
-	return ret;
-}
-
-Dipper.prototype.isSecureRequest = function() {
-
-	var obj = this;
-	// Cheking for http or https
-	if (/^((http):\/\/)/.test(obj.options.site_url) || /^((localhost))/.test(obj.options.site_url)) {
-		return false;
-	} else if (/^((https):\/\/)/.test(obj.options.site_url)) {
-		return true;
-	}
+	path = path || '';
+	return this.base_dir + path;
 }
 
-Dipper.prototype.urlTo = function(route, protocol) {
-
-	var obj = this,
-		protocol = protocol || undefined,
-		url = obj.base_url + route;
-		//url = obj.baseUrl(route, protocol);
-	return url;
-}
+Dipper.prototype.urlTo = function (route) {
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(route)) return route;
+  return '/' + route.replace(/^\/+/, '');
+};
 
 Dipper.prototype.registerStyle = function(
 	name, url, requires,

package/framework/router.js

@@ -52,10 +52,13 @@ class Router {
 
 	addRoute(method, route, handler, insert) {
 
-		var obj = this, insert = insert || false, method = method.toLowerCase(), prev = (obj.server.options.base_url && obj.server.options.base_url != '' && obj.server.options.base_url != '/') ? obj.server.options.base_url : '', instance = {
-			regexp: obj.routeToRegExp(prev + route),
-			handler: handler
-		};
+		var obj = this, 
+      insert = insert || false, 
+      method = method.toLowerCase(), 
+      instance = {
+			  regexp: obj.routeToRegExp(route),
+			  handler: handler
+		  };
 		// Add the route, may be at the beginning or at the end
 		if (insert) { // Adding the route at the beginning of the route's array
 			obj.routes[method].unshift(instance);
@@ -71,9 +74,7 @@ class Router {
 		let response = new Response(res);
 		let request = new Request(req, {
 			onDataReceived: function () {
-				if (request.path == obj.server.options.base_url) {
-					request.path = obj.server.options.base_url + obj.defaultRoute;
-				}
+				if (request.path == '') { request.path = obj.defaultRoute; }
 				// -- Check GET or POST routes
 				_.each(obj.routes[request.type], function (route) {
 					if (request.path.match(route.regexp)) {
@@ -104,7 +105,7 @@ class Router {
 					if (extHandled) {
 
 						let rep = obj.cwd.replace('core/framework', ''), 
-							route = request.path.replace(obj.server.options.base_url, ''), 
+							route = request.path,
 							filename = path.join(rep, route), 
 							filePrivate = obj.isProtectedFile(route);
 
@@ -172,10 +173,7 @@ class Router {
 	}
 
 	getDefaultRoute() {
-
-		let obj = this, 
-      prev = (obj.server.options.base_url && obj.server.options.base_url != '' && obj.server.options.base_url != '/') ? obj.server.options.base_url : '';
-		return (prev + obj.defaultRoute);
+		return this.defaultRoute;
 	}
 
 	onNotFound(response) {

package/framework/server.js

@@ -7,7 +7,6 @@ const path = require('path');
 
 let Router = require('./router.js');
 let Dipper = require('./dipper.js');
-let Functions = require('./functions.js');
 
 class Server {
 
@@ -31,10 +30,8 @@ class Server {
 			security = settings['security'] || {};
 
 		_.defaults(opts, {
-			base_url: '',
-			site_url: '',
-			wsServer: false,
-			onNotFound: obj.onNotFound
+			https_server: false,
+			wsServer: false
 		});
 		obj.options = opts;
 
@@ -57,9 +54,6 @@ class Server {
     // -- Create the server
     obj.createServer();
 
-    // -- Not found callback
-		obj.onNotFound = opts.onNotFound;
-
 		// Initialize router
 		obj.router = new Router(obj);
 
@@ -69,56 +63,35 @@ class Server {
 			endpoints_built[endpoint.name] = new endpoint(obj.router);
 		}
     this.endpoints = endpoints_built;
-
-		// Setting endpoints
-		obj.functions = new Functions();
 	}
 
 	start() {
-
-		let obj = this;
-		let port = (obj.options.port && obj.options.port != '') ? obj.options.port : 8080;
-
-		// Listen on the specified port
-		obj.httpx.listen(port);
-
-		// Logging
-		obj.log('__________________  VanillaJet server started  ___________________');
-		obj.log(` >           Listening on ${obj.options.site_url}:${obj.options.port}${obj.options.base_url}         < `);
-		obj.log('-----------------------------------------------------------------');
+		this.log('__________________  VanillaJet Server started  ___________________');
+		this.log(` >           Running on 0.0.0.0:${this.options.port}/           < `);
+		this.log('------------------------------------------------------------------');
 	}
 
   createServer() {
 
     let obj = this;
-    // -- Http server
-    let isLocalhost = /^((http):\/\/)/.test(obj.options.site_url) || /^((localhost))/.test(obj.options.site_url);
-    if (isLocalhost) {
-      obj.httpx = http.createServer((req, res) => {
-        obj.router.onRequest.call(obj.router, req, res);
-      });
-      return;
-    }
 
     // -- Https server (self managed certs)
     if (obj.security.self_managed_certs) {
-      let certs = {
-        key: fs.readFileSync(obj.security.key, 'utf8'),
-        cert: fs.readFileSync(obj.security.cert, 'utf8'),
-        allowHTTP1: true
-      };
+      console.log('HTTPs server created - Self managed certs');
+      let certs = obj.getCertificates();
       obj.httpx = http2.createSecureServer(certs, (req, res) => {
         obj.router.onRequest.call(obj.router, req, res);
       });
-      return;
+    } else {
+      console.log('HTTP server created - Without self managed certs');
+      obj.httpx = http.createServer((req, res) => {
+        console.log('Request received: ', req.url);
+        obj.router.onRequest.call(obj.router, req, res);
+      });
     }
-    
-    // -- Certs managed by NGINX, Google Cloud Run, etc.
-    console.log('HTTP server created - Without self managed certs');
-    obj.httpx = http.createServer((req, res) => {
-      console.log('Request received: ', req.url);
-      obj.router.onRequest.call(obj.router, req, res);
-    });
+
+    // -- Set the port
+    obj.httpx.listen(obj.options.port || 8080);
   }
 
 	log(value) {
@@ -129,11 +102,15 @@ class Server {
 		}
 	}
 
-	onNotFound(request, response) {
-		
-		response.setStatus(404);
-		response.respond();
-	}
+  getCertificates() {
+
+    let obj = this;
+    return {
+      key: fs.readFileSync(obj.security.key, 'utf8'),
+      cert: fs.readFileSync(obj.security.cert, 'utf8'),
+      allowHTTP1: true
+    }
+  }
 }
 
 module.exports = Server;

package/gulpfile.js

@@ -0,0 +1,187 @@
+const gulp = require('gulp');
+const less = require('gulp-less');
+const uglify = require('gulp-uglify');
+const concat = require('gulp-concat');
+const gzip = require('gulp-gzip');
+const cleanCSS = require('gulp-clean-css');
+const rename = require('gulp-rename');
+const newer = require('gulp-newer');
+const shell = require('gulp-shell');
+const watch = require('gulp-watch');
+const livereload = require('gulp-livereload');
+const del = require('del');
+const gulpif = require('gulp-if');
+const minimist = require('minimist');
+
+// Parse command line arguments
+const knownOptions = {
+  string: 'env',
+  default: { env: process.env.NODE_ENV || 'development' }
+};
+const options = minimist(process.argv.slice(2), knownOptions);
+
+// Helper functions
+function getCwd() {
+  return process.cwd()
+    .replace('/node_modules', '')
+    .replace('/vanilla-jet', '')
+    .replace('/.gulp', '');
+}
+
+const base = getCwd();
+const cssDestination = `${getCwd()}/public/styles/app.min.css`;
+const cssOrigin = `${getCwd()}/assets/styles/less/admin.less`;
+const jsDestination = `${getCwd()}/public/`;
+
+// Clean tasks
+function cleanBuild() {
+  return del([`${getCwd()}/public/scripts/vanilla.min.js`], { force: true });
+}
+
+function cleanMinified() {
+  return del([
+    `${getCwd()}/public/scripts/api`,
+    `${getCwd()}/public/scripts/controllers`,
+    `${getCwd()}/public/scripts/views`,
+    `${getCwd()}/public/scripts/app.min.js`
+  ], { force: true });
+}
+
+// LESS compilation
+function buildLess() {
+  return gulp.src(cssOrigin)
+    .pipe(less({
+      compress: true,
+      optimization: 2
+    }))
+    .pipe(rename('app.min.css'))
+    .pipe(gulp.dest(`${getCwd()}/public/styles`))
+    .pipe(livereload());
+}
+
+// JavaScript tasks
+function uglifyJs() {
+  return gulp.src([
+    `${getCwd()}/assets/scripts/*.js`,
+    `${getCwd()}/assets/scripts/**/*.js`,
+    `${getCwd()}/assets/scripts/**/**/*.js`,
+    `${getCwd()}/assets/scripts/**/**/**/*.js`
+  ])
+    .pipe(newer({
+      dest: `${getCwd()}/public`,
+      ext: '.min.js'
+    }))
+    .pipe(uglify({
+      compress: {
+        drop_console: false,
+        sequences: true,
+        dead_code: true,
+        conditionals: true,
+        booleans: true,
+        unused: true,
+        if_return: true,
+        join_vars: true
+      },
+      output: { ascii_only: true }
+    }))
+    .pipe(rename(function(path) {
+      path.basename += '.min';
+    }))
+    .pipe(gulp.dest(`${getCwd()}/public/scripts`));
+}
+
+// Concatenation task
+function concatJs() {
+  return gulp.src([
+    `${getCwd()}/public/scripts/controllers/**/*.min.js`,
+    `${getCwd()}/public/scripts/views/**/*.min.js`,
+    `${getCwd()}/public/scripts/api/**/*.min.js`,
+    `${getCwd()}/public/scripts/*.min.js`,
+    `!${getCwd()}/public/scripts/core/**`,
+    `!${getCwd()}/public/scripts/plugins/**`,
+    `!${getCwd()}/public/scripts/plugins/ui/**`
+  ])
+    .pipe(concat('vanilla.min.js'))
+    .pipe(gulp.dest(`${getCwd()}/public/scripts`));
+}
+
+// Compression tasks
+function compressJs() {
+  return gulp.src(`${getCwd()}/public/scripts/vanilla.min.js`)
+    .pipe(gzip({ gzipOptions: { level: 9 } }))
+    .pipe(gulp.dest(`${getCwd()}/public/scripts`));
+}
+
+function compressCss() {
+  return gulp.src(`${getCwd()}/public/styles/app.min.css`)
+    .pipe(gzip({ gzipOptions: { level: 9 } }))
+    .pipe(gulp.dest(`${getCwd()}/public/styles`));
+}
+
+// Template compilation
+function compileTemplates() {
+  return gulp.src('.')
+    .pipe(shell([`node .grunt/compile_html.js ${options.env}`]));
+}
+
+// Watch task
+function watchFiles(cb) {
+  if (options.env === 'development') {
+    livereload.listen();
+    
+    // Watch LESS files
+    watch([`${base}/assets/styles/less/**/*.less`], gulp.series(
+      buildLess,
+      'newer:uglifyJs',
+      cleanBuild,
+      concatJs,
+      cleanMinified,
+      compressCss
+    ));
+
+    // Watch HTML files
+    watch([
+      `${base}/assets/pages/*.html`,
+      `${base}/assets/templates/**/*.html`
+    ], compileTemplates);
+
+    // Watch JS files
+    watch([`${base}/assets/scripts/**/*.js`], gulp.series(
+      'newer:uglifyJs',
+      cleanBuild,
+      concatJs,
+      cleanMinified,
+      compressJs
+    ));
+  }
+  cb();
+}
+
+// Define complex tasks
+const build = gulp.series(
+  buildLess,
+  uglifyJs,
+  cleanBuild,
+  concatJs,
+  cleanMinified,
+  compileTemplates,
+  gulp.parallel(compressJs, compressCss)
+);
+
+const dev = gulp.series(
+  build,
+  watchFiles
+);
+
+// Export tasks
+exports.cleanBuild = cleanBuild;
+exports.cleanMinified = cleanMinified;
+exports.buildLess = buildLess;
+exports.uglifyJs = uglifyJs;
+exports.concatJs = concatJs;
+exports.compressJs = compressJs;
+exports.compressCss = compressCss;
+exports.compileTemplates = compileTemplates;
+exports.build = build;
+exports.dev = dev;
+exports.default = dev; 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jet",
-  "version": "1.2.1",
+  "version": "1.3.0-beta",
   "description": "VannilaJet framework",
   "main": "index.js",
   "bin": {
@@ -8,10 +8,10 @@
   },
   "scripts": {
     "setup": "node ./.scripts/generate_packages_json.js",
-    "dev": "grunt --env=development",
-    "build:qa": "grunt build --env=qa",
-    "build:staging": "grunt build --env=staging",
-    "build:prod": "grunt build --env=production",
+    "dev": "gulp dev --env development",
+    "build:qa": "gulp build --env qa",
+    "build:staging": "gulp build --env staging",
+    "build:prod": "gulp build --env production",
     "test": "npm run test"
   },
   "repository": {
@@ -31,19 +31,7 @@
   "dependencies": {
     "blueimp-md5": "2.19.0",
     "chalk": "4.1.2",
-    "grunt": "1.6.1",
-    "grunt-cli": "1.5.0",
-    "grunt-contrib-clean": "2.0.1",
-    "grunt-contrib-compress": "2.0.0",
-    "grunt-contrib-concat": "2.1.0",
-    "grunt-contrib-cssmin": "5.0.0",
-    "grunt-contrib-less": "3.0.0",
-    "grunt-contrib-uglify": "5.2.2",
-    "grunt-contrib-watch": "1.1.0",
-    "grunt-run": "0.8.1",
-    "grunt-shell": "4.0.0",
     "html-minifier-terser": "7.2.0",
-    "jit-grunt": "0.10.0",
     "js-beautify": "1.15.4",
     "jsrsasign": "11.1.0",
     "jwt-simple": "0.5.6",
@@ -52,5 +40,21 @@
     "nunjucks": "3.2.4",
     "underscore": ">= 1.12.x",
     "zlib": "1.0.5"
+  },
+  "devDependencies": {
+    "del": "^6.0.0",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-gzip": "^1.4.2",
+    "gulp-if": "^3.0.0",
+    "gulp-less": "^5.0.0",
+    "gulp-livereload": "^4.0.2",
+    "gulp-newer": "^1.4.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-shell": "^0.8.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-watch": "^5.0.1",
+    "minimist": "^1.2.8"
   }
 }

package/Gruntfile.js

@@ -1,182 +0,0 @@
-module.exports = function(grunt) {
-
-  require('jit-grunt')(grunt, {
-    concat: 'grunt-contrib-concat',
-    //compress: 'grunt-contrib-compress',
-    clean: 'grunt-contrib-clean'
-  });
-  grunt.option('force', true);
-
-  // -- Load modules
-  grunt.loadNpmTasks('grunt-contrib-cssmin');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-shell');
-  grunt.loadNpmTasks('grunt-run');
-  require('./.grunt/build_styles_task')(grunt);
-
-  // -- Functions
-  function getCwd() {
-    const cwd = process.cwd();
-    let newCwd = cwd
-      .replace('/node_modules', '')
-      .replace('/vanilla-jet', '')
-      .replace('/.grunt', '');
-    //console.log('cwd: ', newCwd);
-    return newCwd;
-  }
-  
-  // -- Vars
-  const cssDestination = `${getCwd()}/public/styles/app.min.css`;
-  const cssOrigin = `${getCwd()}/assets/styles/less/admin_build.less`;
-  const jsDestination = `${getCwd()}/public/`;
-
-  // -- Init
-  grunt.initConfig({
-    clean: {
-      build: [`${getCwd()}/public/scripts/vanilla.min.js`],
-      minified: [
-        `${getCwd()}/public/scripts/api`, 
-        `${getCwd()}/public/scripts/controllers`, 
-        `${getCwd()}/public/scripts/views`, 
-        `${getCwd()}/public/scripts/app.min.js`
-      ],
-      //minified: ['public/scripts/**/*.min.js', 'public/scripts/*', '!public/scripts/vanilla.min.js']
-    },
-    less: {
-      development: {
-        options: {
-          compress: true,
-          yuicompress: true,
-          optimization: 2,
-          strictImports: true
-        },
-        files: {
-          [cssDestination] : cssOrigin
-        },
-      }
-    },
-    watch: {
-      options: {
-        livereload: true
-      },
-      styles: {
-        files: [
-          `${getCwd()}/assets/styles/less/*.less`, 
-          `${getCwd()}/assets/styles/less/**/*.less`, 
-          `${getCwd()}/assets/styles/less/**/**/*.less`,
-          `${getCwd()}/!assets/styles/less/admin_build.less`
-        ],
-        tasks: ['buildLess'],
-        options: {
-          nospawn: true
-        }
-      },
-      scripts: {
-        files: [
-          `${getCwd()}/assets/pages/*.html`,
-          `${getCwd()}/assets/templates/**/*.html`,
-          `${getCwd()}/assets/templates/**/**/*.html`,
-          `${getCwd()}/external/view/*.js`,
-          `${getCwd()}/external/*.js`,
-          `${getCwd()}/framework/*.js`
-        ],
-        tasks: ['shell:compileTemplates']
-      },
-      specificScripts: {
-        files: [
-          `${getCwd()}/assets/scripts/*.js`, 
-          `${getCwd()}/assets/scripts/**/*.js`, 
-          `${getCwd()}/assets/scripts/**/**/*.js`
-        ],
-        tasks: ['uglify', 'cleanForce:build', 'concat', 'cleanForce:minified']
-      }
-    },
-    uglify: {
-			build: {
-				options: {
-				  sourceMap: false,
-          compress: {
-            drop_console: false,
-            sequences: true,
-            dead_code: true,
-            conditionals: true,
-            booleans: true,
-            unused: true,
-            if_return: true,
-            join_vars: true
-          },
-          output: {
-            ascii_only: true
-          }
-				},
-				files: [{
-          expand: true,
-          src: [
-          	`${getCwd()}/assets/scripts/*.js`,
-      			`${getCwd()}/assets/scripts/**/*.js`,
-          	`${getCwd()}/assets/scripts/**/**/*.js`,
-          	`${getCwd()}/assets/scripts/**/**/**/*.js`
-          ],
-    			dest: getCwd() + '/public',
-					rename  : function (dest, src) {
-
-						var folder = src.substring(0, src.lastIndexOf('/')),
-							  filename  = src.substring(src.lastIndexOf('/'), src.length);
-      			filename  = filename.substring(0, filename.lastIndexOf('.'));
-      			folder = folder.replaceAll('assets/', 'public/');
-            let file = folder + filename + '.min.js';
-            //console.log('file: ', file);
-						return file;
-					}
-				}]
-			}
-		},
-    concat: {
-      build: {
-        src: [
-          // Order
-          `${getCwd()}/public/scripts/controllers/**/*.min.js`,
-          `${getCwd()}/public/scripts/views/**/*.min.js`,
-          `${getCwd()}/public/scripts/api/**/*.min.js`,
-          `${getCwd()}/public/scripts/*.min.js`,
-
-          // Ignore files
-          `!${getCwd()}/public/scripts/core/**`,
-          `!${getCwd()}/public/scripts/plugins/**`,
-          `!${getCwd()}/public/scripts/plugins/ui/**`
-        ],
-        dest: `${getCwd()}/public/scripts/vanilla.min.js`
-      }
-    },
-    compress: {
-      main: {
-        options: {
-          mode: 'gzip',
-          compressionLevel: 9
-        },
-        files: [{
-          expand: true,
-          src: [`${getCwd()}/public/scripts/vanilla.min.js`, `${getCwd()}/public/styles/app.min.css`],
-          dest: '',
-          rename: function(dest, src) {
-            return src + '.gz';
-          }
-        }]
-      }
-    },
-    shell: {
-      compileTemplates: {
-        command: 'node .grunt/compile_html.js <%= grunt.option("env") %>'
-      }
-    }
-  });
-  
-  grunt.registerTask('cleanForce', function(target) {
-    grunt.option('force', true);
-    grunt.task.run('clean:' + target);
-  });
-  grunt.registerTask('default', ['buildLess', 'uglify', 'cleanForce:build', 'concat', 'cleanForce:minified', 'shell:compileTemplates', 'watch']);
-  grunt.registerTask('build', ['buildLess', 'uglify', 'cleanForce:build', 'concat', 'cleanForce:minified', 'shell:compileTemplates']);
-  grunt.registerTask('server', ['buildLess']);
-};