Skip to content

Commit

Permalink
Replace custom build script with gulp.
Browse files Browse the repository at this point in the history
  • Loading branch information
RubenVerborgh committed Oct 10, 2016
1 parent baa88c6 commit d352f5a
Show file tree
Hide file tree
Showing 11 changed files with 143 additions and 96 deletions.
1 change: 1 addition & 0 deletions .eslintrc
@@ -1,5 +1,6 @@
{
env: {
node: true,
browser: true,
},

Expand Down
8 changes: 3 additions & 5 deletions Dockerfile
@@ -1,4 +1,4 @@
FROM node:4.4.5
FROM node:6.7.0

# Install location
ENV dir /var/www/online-client
Expand All @@ -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
10 changes: 4 additions & 6 deletions README.md
Expand Up @@ -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.
Expand All @@ -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

Expand All @@ -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
Expand Down
54 changes: 0 additions & 54 deletions build-minified

This file was deleted.

Empty file modified deps/chosen-1.1.0.js 100755 → 100644
Empty file.
102 changes: 102 additions & 0 deletions gulpfile.js
@@ -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);
});
20 changes: 8 additions & 12 deletions index.html
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion ldf-client-ui.js
Expand Up @@ -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) {
Expand Down
2 changes: 0 additions & 2 deletions ldf-client-worker.js
@@ -1,5 +1,3 @@
self.importScripts('deps/ldf-client-browser.js');

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

Expand Down
20 changes: 8 additions & 12 deletions ldf-client.css
Expand Up @@ -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 */
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
20 changes: 16 additions & 4 deletions package.json
@@ -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"
Expand Down

0 comments on commit d352f5a

Please sign in to comment.