From d352f5a7bb79efd950123818f57090255a63b01e Mon Sep 17 00:00:00 2001 From: Ruben Verborgh Date: Mon, 10 Oct 2016 17:41:28 +0200 Subject: [PATCH] Replace custom build script with gulp. --- .eslintrc | 1 + Dockerfile | 8 ++-- README.md | 10 ++--- build-minified | 54 ----------------------- deps/chosen-1.1.0.js | 0 gulpfile.js | 102 +++++++++++++++++++++++++++++++++++++++++++ index.html | 20 ++++----- ldf-client-ui.js | 2 +- ldf-client-worker.js | 2 - ldf-client.css | 20 ++++----- package.json | 20 +++++++-- 11 files changed, 143 insertions(+), 96 deletions(-) delete mode 100755 build-minified mode change 100755 => 100644 deps/chosen-1.1.0.js create mode 100644 gulpfile.js diff --git a/.eslintrc b/.eslintrc index 34a827a..0380644 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,6 @@ { env: { + node: true, browser: true, }, diff --git a/Dockerfile b/Dockerfile index 475514d..13c92a2 100644 --- a/Dockerfile +++ b/Dockerfile @@ -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 diff --git a/README.md b/README.md index acf42e8..d0027fe 100644 --- a/README.md +++ b/README.md @@ -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
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 diff --git a/build-minified b/build-minified deleted file mode 100755 index e4ff4ba..0000000 --- a/build-minified +++ /dev/null @@ -1,54 +0,0 @@ -#!/usr/bin/env node -/*! @license ©2014 Ruben Verborgh - Multimedia Lab / iMinds / Ghent University */ -/* Builds the minified HTML and JavaScript. */ - -var fs = require('fs'), - path = require('path'), - UglifyJS = require("uglify-js"), - UglifyCSS = require('uglifycss');; - -var sourceDir =__dirname, - outputDir = ensureExists(path.join(sourceDir, 'build')), - scriptsDir = ensureExists(path.join(outputDir, 'scripts')), - imagesDir = ensureExists(path.join(outputDir, 'images')), - html = fs.readFileSync(path.join(sourceDir, 'index.html'), 'utf8'); - -// Bundle all script files into a single script -var scriptFiles = [], inlineScript = '', minifiedScript; -html = html.replace(/\s*\n'); -} - -// Bundle all inline scripts into a single script -html = html.replace(/\s*\n'); -} - -// Inline the styles -var style = UglifyCSS.processFiles([path.join(sourceDir, 'ldf-client.css')]) -html = html.replace(/]*ldf-client[^>]*>/, '\n'); - -// Copy auxiliary files -copy(path.join(sourceDir, 'queries.json'), path.join(outputDir, 'queries.json')); -fs.readdirSync(path.join(sourceDir, 'images')).forEach(function (image) { - copy(path.join(sourceDir, 'images', image), path.join(imagesDir, image)); -}); -copy(path.join(sourceDir, 'favicon.ico'), path.join(outputDir, 'favicon.ico')); - -// Write the output HTML -fs.writeFileSync(path.join(outputDir, 'index.html'), html); - -// Ensures the path exists -function ensureExists(path) { return fs.existsSync(path) || fs.mkdirSync(path), path; } - -// Copies the source file to the destination -function copy(source, destination) { fs.writeFileSync(destination, fs.readFileSync(source)); } diff --git a/deps/chosen-1.1.0.js b/deps/chosen-1.1.0.js old mode 100755 new mode 100644 diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..cde3596 --- /dev/null +++ b/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); +}); diff --git a/index.html b/index.html index 7d0cf2f..f0a95c4 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,7 @@ Linked Data Fragments client - - - - - - - - + @@ -80,5 +69,12 @@

Query Linked Data on the Web

Source code.

+ + + diff --git a/ldf-client-ui.js b/ldf-client-ui.js index 25b973d..ce3d04c 100644 --- a/ldf-client-ui.js +++ b/ldf-client-ui.js @@ -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) { diff --git a/ldf-client-worker.js b/ldf-client-worker.js index 3c884c0..6fd29ee 100644 --- a/ldf-client-worker.js +++ b/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; diff --git a/ldf-client.css b/ldf-client.css index 6e55786..dbe31aa 100644 --- a/ldf-client.css +++ b/ldf-client.css @@ -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; } diff --git a/package.json b/package.json index ebe51e3..742a05a 100644 --- a/package.json +++ b/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"