Merge pull request #37 from Roky97/gulp-integration

Gulp integration - Release 2.8.0

Author: stefanogermano

README.md

@@ -59,7 +59,7 @@ Further information can be found in the [Wiki](https://github.com/DeMaCS-UNICAL/
 
 
 ## Getting Started (Installation and Usage)
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
+These instructions will get you a copy of the project up and running on your local machine.
 
 ### Prerequisites
 It requires only [Node.js®](https://nodejs.org)
@@ -70,7 +70,11 @@ Install dependencies:
  npm install
  ```
 
-### Running
+Now you can run LoIDE in development or in production mode.
+
+### Running in production mode
+In this mode, LoIDE will be optimized for production.
+
 Start the server:
 ```
 npm start
@@ -81,6 +85,19 @@ Use _LoIDE_ in a browser at:
 http://localhost:8084
 ```
 
+### Running in development mode
+Run LoIDE in development mode only for development and testing purposes.
+
+Start the server:
+```
+npm run start:dev
+```
+
+The browser will be opened automatically _LoIDE_ in at:
+```
+http://localhost:7000
+```
+
 ### Note
 You need an "executor" in order to run the solvers.
 
@@ -98,6 +115,16 @@ If you like it, you can use our [EmbASPServerExecutor](https://github.com/DeMaCS
  - [keymaster.js](https://github.com/madrobby/keymaster) - Used to implement keyboard shortcuts outside the editor
  - [Pugjs](https://pugjs.org) - Used to create a dynamic html pages
  - [Socket.io](https://socket.io) - Used for executor server connection
+ - [Browsersync](https://www.browsersync.io) - Used to enable the live reload on the browser
+ - [Gulp](https://gulpjs.com) - Used to automate and enhance the workflow with its plugins:
+   - [gulp-nodemon](https://github.com/JacksonGariety/gulp-nodemon) - Used to monitor for any changes in the source files and automatically restart the server
+   - [gulp-clean](https://github.com/peter-vilja/gulp-clean) - Used to remove files and folders
+   - [gulp-uglify-es](https://gitlab.com/itayronen/gulp-uglify-es) - Used to minify JS files
+   - [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer#readme) - Used to add CSS prefix
+   - [gulp-csso](https://github.com/ben-eb/gulp-csso) - Used to minify CSS files
+   - [gulp-shorthand](https://github.com/kevva/gulp-shorthand) - Used to make the CSS files lighter and more readable
+   - [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin#readme) - Used to minify PNG, JPEG, GIF and SVG images
+ 
 <!-- 
 ## Contributing
 

app.js

@@ -9,6 +9,19 @@ var pug = require('pug');
 var jpointer = require('json-pointer');
 const compression = require('compression');
 
+const environment =  {
+    dev: 'development',
+    prod: 'production'
+}
+
+const path =  {
+    dist: 'dist',
+    src: 'resources'
+}
+
+const currentEnv = process.env.NODE_ENV || environment.dev
+const resourcesPath = currentEnv == environment.prod ? path.dist : path.src
+
 // System config loading
 var properties  = require('./config/app-config.json');
 var httpPort    = properties.port.http;
@@ -55,8 +68,8 @@ app.use(helmet.hsts({
 }));
 
 app.use(compression());
-app.use(express.static('resources'));
-app.set('views', './resources');
+app.use(express.static(resourcesPath));
+app.set('views', './' + resourcesPath);
 app.set('view engine', 'pug');
 
 // Load variables in to the .pug file

gulpfile.js

@@ -0,0 +1,135 @@
+const { series, src, dest, parallel } = require('gulp');
+const csso = require('gulp-csso');
+const shorthand = require('gulp-shorthand');
+const clean = require('gulp-clean');
+const autoprefixer = require('gulp-autoprefixer');
+const uglify = require('gulp-uglify-es').default;
+const imagemin = require('gulp-imagemin');
+const nodemon = require('gulp-nodemon')
+var browserSync = require('browser-sync').create();
+
+const path =  {
+    dist: 'dist/',
+    src: 'resources/'
+}
+
+const environment =  {
+    dev: 'development',
+    prod: 'production'
+}
+
+// System config loading
+var properties  = require('./config/app-config.json');
+var httpPort    = properties.port.http;
+
+function cleanDir(){
+    return src( path.dist +  '*', {read: false})
+    .pipe(clean());
+}
+
+function css() {
+    return src(path.src + 'css/*.css')
+    .pipe(autoprefixer({
+        cascade: false
+    }))
+    .pipe(shorthand())
+    .pipe(csso())
+    .pipe(dest(path.dist + 'css/'))
+}
+
+function faviconImage() {
+    return src(path.src + 'favicon/*.{png,svg}')
+    .pipe(imagemin())
+    .pipe(dest(path.dist + 'favicon/'))
+}
+
+function faviconFiles() {
+    return src(path.src + 'favicon/*.{ico,xml,webmanifest}')
+    .pipe(dest(path.dist + 'favicon/'))
+}
+
+function img() {
+    return src(path.src + 'img/*.*')
+    .pipe(imagemin())
+    .pipe(dest(path.dist + 'img/'))
+}
+
+function js() {
+    return src(path.src + 'js/**/*.js')
+    .pipe(uglify())
+    .pipe(dest(path.dist + 'js/'))
+}
+
+function pug() {
+    return src(path.src + '**/*.pug')
+    .pipe(dest(path.dist))
+}
+
+function serveProd(done) {
+    const server = nodemon({
+        script: 'app.js'
+      , ext: 'js json'
+      , ignore: ['node_modules/', 'dist/', 'resources/', 'gulpfile.js']
+      , env: { 'NODE_ENV': environment.prod }
+      });
+
+      server.on('start', () => {
+        done();
+    });
+}
+
+function serveDev(done) {
+    const STARTUP_TIMEOUT = 5000;
+    const server = nodemon({
+        script: 'app.js'
+        , stdout: false
+        , ext: 'js json'
+        , ignore: ['node_modules/', 'dist/', 'resources/', 'gulpfile.js']
+        , env: { 'NODE_ENV': environment.dev }
+    });
+    let starting, restarting, crashed = false;
+
+    const onReady = () => {
+        starting = false;
+        if(restarting && !crashed) browserSync.reload();
+        restarting = false;
+        crashed = false;
+        done();
+    };
+    
+    server.on('start', () => {
+        starting = true;
+        setTimeout(onReady, STARTUP_TIMEOUT);
+    });
+    
+    server.on('stdout', (stdout) => {
+        process.stdout.write(stdout); // pass the stdout through
+        if (starting || restarting) {
+          onReady();
+        }
+    });  
+    
+    server.on('restart', () => {
+        browserSync.notify("Reastarting LoIDE, please wait!");
+        restarting = true;
+    });
+
+    server.on('crash', () => {
+        browserSync.notify("LoIDE crashed!", 5000);
+        crashed = true;
+    });
+}
+
+function startBrowserSync(done){
+    browserSync.init({
+      proxy: "http://localhost:" + httpPort,
+      files: [path.src + "/**/*.*"],
+      port: 7000,
+    }, done);
+}
+
+const build = parallel(css,faviconImage,faviconFiles,img,js,pug);
+
+exports.default = series(cleanDir, build, serveProd)
+exports.dev = series(cleanDir, serveDev, startBrowserSync)
+exports.clean = series(cleanDir)

package.json

@@ -1,11 +1,13 @@
 {
   "name": "LoIDE",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Web-based IDE for Logic Programming",
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node app.js"
+    "start": "npx gulp",
+    "start:dev": "npx gulp dev",
+    "clean": "npx gulp clean"
   },
   "repository": {
     "type": "git",
@@ -48,7 +50,16 @@
     "websocket": "^1.0.30"
   },
   "devDependencies": {
-    "compression": "^1.7.3"
+    "browser-sync": "^2.26.7",
+    "compression": "^1.7.3",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^7.0.1",
+    "gulp-clean": "^0.4.0",
+    "gulp-csso": "^4.0.1",
+    "gulp-imagemin": "^7.1.0",
+    "gulp-nodemon": "^2.5.0",
+    "gulp-shorthand": "^1.1.0",
+    "gulp-uglify-es": "^2.0.0"
   },
   "analyze": true,
   "homepage": "https://github.com/DeMaCS-UNICAL/LoIDE#readme"

resources/index.pug

@@ -140,7 +140,7 @@
     </div>
     <div class="container">
         <form id="input" style="position: relative;">
-            <div class="left-panel" style="height: auto">
+            <div class="left-panel left-panel-show" style="height: auto">
                 <div class="option-solver">
                     <div class="text-center left-panel-title sticky-top pt-2 mb-2">
                         <h5>Run options</h5>
@@ -409,7 +409,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-migrate-3.3.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
-    <script src="js/jquery.layout_and_plugins.min.js" type="text/javascript"></script>
+    <script src="js/plugin/jquery.layout_and_plugins.min.js" type="text/javascript"></script>
 
     <!-- Bootstrap JavaScript -->
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

resources/js/jquery.layout_and_plugins.min.js

@@ -312,6 +312,7 @@ $(document).ready(function () {
             }
         },
         south__minSize: 125,
+        east__minSize: 100,
         resizeWhileDragging: true,
         resizable: true,
         slidable: true,
@@ -387,12 +388,7 @@ $(document).ready(function () {
     });
 
     $("#btn-option").click(function () {
-        $('.left-panel').toggleClass('left-panel-show'); // add class 'left-panel-show' to increase the width of the left panel
-        $('.option-solver > div').toggleClass(" show"); // add class to show option components
-        $(".left-panel-show, .left-panel").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
-            function () {
-                layout.resizeAll();
-            });
+        openRunOptions();
     });
 
     $("#reset-editor").click(function () {
@@ -418,7 +414,7 @@ $(document).ready(function () {
 
     setAceMode();
 
-    openRunOptions();
+    closeRunOptionOnMobile();
 
     // Set the default options
     resetSolverOptions();
@@ -2839,12 +2835,20 @@ function renameSelectOptionsAndBadge() {
     });
 }
 
-function openRunOptions() {
-    if ($(window).width() > screen.small.size) {
-        $('#btn-option').trigger('click');
+function closeRunOptionOnMobile() {
+    if ($(window).width() <= screen.small.size) {
+        $('.left-panel').removeClass('left-panel-show');
     }
 }
 
+function openRunOptions() {
+    $('.left-panel').toggleClass('left-panel-show'); // add class 'left-panel-show' to increase the width of the left panel
+    $(".left-panel-show, .left-panel").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
+        function () {
+            layout.resizeAll();
+        });
+}
+
 function getHTMLFromJQueryElement(jQueryElement) {
     var DOMElement = '';