Skip to content
Permalink
Browse files
Replace custom build script with gulp.
  • Loading branch information
RubenVerborgh committed Oct 10, 2016
1 parent baa88c6 commit d352f5a7bb79efd950123818f57090255a63b01e
Showing with 143 additions and 96 deletions.
  1. +1 −0 .eslintrc
  2. +3 −5 Dockerfile
  3. +4 −6 README.md
  4. +0 −54 build-minified
  5. 0 deps/chosen-1.1.0.js
  6. +102 −0 gulpfile.js
  7. +8 −12 index.html
  8. +1 −1 ldf-client-ui.js
  9. +0 −2 ldf-client-worker.js
  10. +8 −12 ldf-client.css
  11. +16 −4 package.json
@@ -1,5 +1,6 @@
{
env: {
node: true,
browser: true,
},

@@ -1,4 +1,4 @@
FROM node:4.4.5
FROM node:6.7.0

# Install location
ENV dir /var/www/online-client
@@ -7,14 +7,12 @@ ENV dir /var/www/online-client
ADD . ${dir}

# Install the node module
RUN npm install -g http-server
RUN cd ${dir} && npm install --unsafe-perm
RUN cd ${dir} && cp settings.json /tmp && cp -r queries /tmp/queries/

# Expose the default port
EXPOSE 8080
EXPOSE 3000

# Run base binary
WORKDIR ${dir}
CMD cp /tmp/settings.json settings.json && rm -rf queries && cp -r /tmp/queries queries/ && npm run production && http-server build

CMD cp /tmp/settings.json settings.json && rm -rf queries && cp -r /tmp/queries queries/ && npm start
@@ -8,11 +8,9 @@ It allows users to execute SPARQL queries over one or multiple datasets exposed

## Using the code
- Run `npm install` to fetch dependencies and build the browser version of the client code.
- Place the files from this repository on a local Web server
(for instance, by starting a tool such as [adsf](https://github.com/ddfreyne/adsf) in the root folder).
- Open `index.html` in the browser through your Web server (typically `http://localhost:3000/`).
- Run `npm start` to run a local Web server.
- Edit datasources in `settings.json` and queries in the `queries` folder, and run `queries-to-json` to compile both of them in a single JSON file.
- Run `./build-minified` to generate a production version in the `build` folder.
- Run `npm run production` to generate a production version in the `build` folder.

## How the browser client works
The original _ldf-client_ library is written for the Node.js environment. The [browserify](http://browserify.org/) library makes it compatible with browsers.
@@ -21,7 +19,7 @@ The file `browser.js` makes the Node.js library _ldf-client_ available in global
<br>
This script is compiled with its dependencies to `deps/ldf-client-browser.js` via `npm run postinstall`.

You can use the resulting `ldf-client-browser.js` in your browser applications; it is independent of the jQuery UI widget.
You can use the resulting `deps/ldf-client-browser.js` in your browser applications; it is independent of the jQuery UI widget.

### _(Optional)_ Running in a Docker container

@@ -36,7 +34,7 @@ Next, create a `queries` directory in which you should insert the queries that w

After that, you can run your newly created container in which `settings.json` and `queries` is mounted to the Docker container:
```bash
$ docker run -p 8080:8080 -it --rm -v $(pwd)/settings.json:/tmp/settings.json -v $(pwd)/queries:/tmp/queries ldf-client-widget
$ docker run -p 3000:3000 -it --rm -v $(pwd)/settings.json:/tmp/settings.json -v $(pwd)/queries:/tmp/queries ldf-client-widget
```

## License

This file was deleted.

0 deps/chosen-1.1.0.js 100755 → 100644
Empty file.
@@ -0,0 +1,102 @@
var gulp = require('gulp'),
pump = require('pump'),
exec = require('child_process').exec,
autoprefixer = require('autoprefixer'),
concat = require('gulp-concat'),
csso = require('postcss-csso'),
del = require('del'),
postcss = require('gulp-postcss'),
replace = require('gulp-replace'),
sourcemaps = require('gulp-sourcemaps'),
sync = require('browser-sync').create(),
uglify = require('gulp-uglify'),
util = require('gulp-util');

var production = util.env.production;

gulp.task('default', ['build'], function () {
sync.init({
ui: false,
notify: false,
server: { baseDir: 'build' },
});
gulp.watch('*.html', ['html']);
gulp.watch(['*.js', 'deps'], ['scripts']);
gulp.watch('*.css', ['styles']);
gulp.watch(['*.json', 'queries/**/*.sparql'], ['queries']);
});

gulp.task('clean', function () {
return del('build');
});

gulp.task('build', ['html', 'queries', 'scripts', 'styles']);

gulp.task('html', function (done) {
pump([
gulp.src(['*.html', 'images/*.*', 'favicon.ico'], { base: './' }),
gulp.dest('build'),
sync.stream(),
], done);
});

gulp.task('queries', function (done) {
exec('./queries-to-json', function (error) {
if (error)
return done(error);
pump([
gulp.src('queries.json'),
gulp.dest('build'),
sync.stream(),
], done);
});
});

gulp.task('scripts', ['scripts:ui', 'scripts:worker']);

gulp.task('scripts:ui', function (done) {
pump([
gulp.src([
'deps/jquery-2.1.0.js',
'deps/chosen-1.1.0.js',
'deps/fast-scroller.js',
'ldf-client-ui.js',
'ldf-client-url-state.js',
]),
sourcemaps.init(),
concat('ldf-client-ui-packaged.js'),
production ? uglify({ preserveComments: 'license' }) : util.noop(),
sourcemaps.write('.'),
gulp.dest('build/scripts'),
sync.stream(),
], done);
});

gulp.task('scripts:worker', function (done) {
pump([
gulp.src([
'deps/ldf-client-browser.js',
'ldf-client-worker.js',
]),
sourcemaps.init(),
concat('ldf-client-worker.js'),
// Correct lodash from window (browser) to self (Web Worker)
replace(/var root =.*;/, 'var root = self;'),
production ? uglify({ preserveComments: 'license' }) : util.noop(),
sourcemaps.write('.'),
gulp.dest('build/scripts'),
sync.stream(),
], done);
});

gulp.task('styles', function (done) {
pump([
gulp.src('*.css'),
postcss([
autoprefixer,
csso,
]),
gulp.dest('build/styles'),
sync.stream(),
], done);
});
@@ -4,18 +4,7 @@
<head>
<meta charset="utf-8">
<title>Linked Data Fragments client</title>
<script src="deps/jquery-2.1.0.js"></script>
<script src="deps/chosen-1.1.0.js"></script>
<script src="deps/fast-scroller.js"></script>
<script src="deps/ldf-client-browser.js"></script>
<script src="ldf-client-ui.js"></script>
<script src="ldf-client-url-state.js"></script>
<script>
jQuery(function ($) {
$('.ldf-client').queryui({ settings: 'queries.json' });
});
</script>
<link rel=stylesheet href="ldf-client.css">
<link rel=stylesheet href="styles/ldf-client.css">
<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,700italic,400,700">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
</head>
@@ -80,5 +69,12 @@ <h1>Query Linked Data on the Web</h1>
<a href="https://github.com/LinkedDataFragments/jQuery-Widget.js">Source code</a>.
</p>
</footer>

<script src="scripts/ldf-client-ui-packaged.js"></script>
<script>
jQuery(function ($) {
$('.ldf-client').queryui({ settings: 'queries.json' });
});
</script>
</body>
</html>
@@ -45,7 +45,7 @@

// Create the query execution Web Worker
var self = this;
this._queryWorker = new Worker('ldf-client-worker.js');
this._queryWorker = new Worker('scripts/ldf-client-worker.js');
this._queryWorker.onmessage = function (message) {
var data = message.data;
switch (data.type) {
@@ -1,5 +1,3 @@
self.importScripts('deps/ldf-client-browser.js');

// The active fragments client and the current results
var fragmentsClient, resultsIterator;

@@ -134,14 +134,14 @@ input.datetime {
margin: 0 -35px;
float: right;
cursor: pointer;
background: url(images/memento.svg) no-repeat center center / contain;
background: url(../images/memento.svg) no-repeat center center / contain;
opacity: .8;
}
.details-toggle:hover, .details-toggle.enabled {
opacity: 1;
}
.details-toggle.enabled {
background-image: url(images/memento.svg#active);
background-image: url(../images/memento.svg#active);
width: 25px; /* for Chrome */
}

@@ -297,13 +297,9 @@ footer {
font-size: 13px;
zoom: 1;
*display: inline;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.chosen * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chosen .chosen-drop {
@@ -356,7 +352,7 @@ footer {
display: block;
width: 12px;
height: 12px;
background: url('images/chosen-sprite.png') -42px 1px no-repeat;
background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-single .chosen-single abbr:hover {
@@ -374,7 +370,7 @@ footer {
display: block;
width: 100%;
height: 100%;
background: url('images/chosen-sprite.png') no-repeat 0px 2px;
background: url('../images/chosen-sprite.png') no-repeat 0px 2px;
}
.chosen-single .chosen-search {
position: relative;
@@ -390,8 +386,8 @@ footer {
height: auto;
outline: 0;
border: 1px solid #999999;
background: white url('images/chosen-sprite.png') no-repeat 100% -20px;
background: url('images/chosen-sprite.png') no-repeat 100% -20px;
background: white url('../images/chosen-sprite.png') no-repeat 100% -20px;
background: url('../images/chosen-sprite.png') no-repeat 100% -20px;
font-size: 1em;
line-height: normal;
border-radius: 0;
@@ -496,7 +492,7 @@ li.search-choice .search-choice-close {
display: block;
width: 12px;
height: 12px;
background: url('images/chosen-sprite.png') -42px 1px no-repeat;
background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
li.search-choice .search-choice-close:hover {
@@ -542,7 +538,7 @@ li.search-choice-focus .search-choice-close {
.chosen-multi .chosen-choices .search-choice .search-choice-close,
.chosen .chosen-results-scroll-down span,
.chosen .chosen-results-scroll-up span {
background-image: url('images/chosen-sprite@2x.png') !important;
background-image: url('../images/chosen-sprite@2x.png') !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
@@ -1,18 +1,30 @@
{
"scripts": {
"lint": "eslint *.js",
"postinstall": "browserify node_modules/ldf-client/browser.js -u stream -o deps/ldf-client-browser.js\n./queries-to-json",
"production": "./queries-to-json\n./build-minified"
"postinstall": "browserify node_modules/ldf-client/browser.js -u stream -o deps/ldf-client-browser.js",
"start": "gulp",
"build": "gulp build",
"production": "gulp build --production"
},
"dependencies": {
"ldf-client": "~1.4.0",
"browserify": "~13.0.0"
},
"devDependencies": {
"autoprefixer": "^6.5.0",
"browser-sync": "^2.17.2",
"del": "^2.2.2",
"eslint": "^3.7.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-postcss": "^6.2.0",
"gulp-replace": "^0.5.4",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"postcss-csso": "^1.1.2",
"pre-commit": "^1.1.3",
"uglify-js": ">=2.4.12",
"uglifycss": "0.0.8"
"pump": "^1.0.1"
},
"pre-commit": [
"lint"

0 comments on commit d352f5a

Please sign in to comment.