Skip to content

Commit

Permalink
Merge pull request #37 from Roky97/gulp-integration
Browse files Browse the repository at this point in the history
Gulp integration - Release 2.8.0
  • Loading branch information
stefanogermano committed Jul 6, 2020
2 parents af256ff + 519592c commit 5a0babd
Show file tree
Hide file tree
Showing 8 changed files with 210 additions and 20 deletions.
31 changes: 29 additions & 2 deletions README.md
Expand Up @@ -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)
Expand All @@ -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
Expand All @@ -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.

Expand All @@ -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
Expand Down
17 changes: 15 additions & 2 deletions app.js
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
135 changes: 135 additions & 0 deletions 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)
17 changes: 14 additions & 3 deletions 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",
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions resources/index.pug
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion resources/js/jquery.layout_and_plugins.min.js

This file was deleted.

1 change: 1 addition & 0 deletions resources/js/plugin/jquery.layout_and_plugins.min.js

Large diffs are not rendered by default.

24 changes: 14 additions & 10 deletions resources/js/script.js
Expand Up @@ -312,6 +312,7 @@ $(document).ready(function () {
}
},
south__minSize: 125,
east__minSize: 100,
resizeWhileDragging: true,
resizable: true,
slidable: true,
Expand Down Expand Up @@ -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 () {
Expand All @@ -418,7 +414,7 @@ $(document).ready(function () {

setAceMode();

openRunOptions();
closeRunOptionOnMobile();

// Set the default options
resetSolverOptions();
Expand Down Expand Up @@ -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 = '';

Expand Down

0 comments on commit 5a0babd

Please sign in to comment.