Skip to content
Permalink
Browse files
Browserify with Gulp, producing source maps.
  • Loading branch information
RubenVerborgh committed Oct 11, 2016
1 parent f1d8d24 commit 8830e449257ab12def48739c117629c312107289
Showing with 67 additions and 22 deletions.
  1. +1 −1 .gitignore
  2. +2 −7 README.md
  3. +59 −11 gulpfile.js
  4. +5 −3 package.json
@@ -1,5 +1,5 @@
node_modules
*.log
build
deps/ldf-client-browser.js
deps/*-browser.js*
queries.json
@@ -13,13 +13,8 @@ It allows users to execute SPARQL queries over one or multiple datasets exposed
- 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.

The file `browser.js` makes the Node.js library _ldf-client_ available in global scope as `ldf`.
<br>
This script is compiled with its dependencies to `deps/ldf-client-browser.js` via `npm run postinstall`.

You can use the resulting `deps/ldf-client-browser.js` in your browser applications; it is independent of the jQuery UI widget.
The original _ldf-client_ library is written for the Node.js environment.
The [browserify](http://browserify.org/) library makes it compatible with browsers.

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

@@ -2,36 +2,43 @@ var gulp = require('gulp'),
pump = require('pump'),
exec = require('child_process').exec,
autoprefixer = require('autoprefixer'),
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
concat = require('gulp-concat'),
csso = require('postcss-csso'),
del = require('del'),
postcss = require('gulp-postcss'),
replace = require('gulp-replace'),
source = require('vinyl-source-stream'),
sourcemaps = require('gulp-sourcemaps'),
sync = require('browser-sync').create(),
uglify = require('gulp-uglify'),
util = require('gulp-util');

var production = util.env.production;

// Start a Web server
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('*.js', ['scripts']);
gulp.watch('*.css', ['styles']);
gulp.watch(['*.json', 'queries/**/*.sparql'], ['queries']);
});

// Remove all generated files
gulp.task('clean', function () {
return del('build');
return del(['build', 'deps/*-browser*.js*']);
});

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

// Create build/index.html with images
gulp.task('html', function (done) {
pump([
gulp.src(['*.html', 'images/*.*', 'favicon.ico'], { base: './' }),
@@ -40,6 +47,7 @@ gulp.task('html', function (done) {
], done);
});

// Create build/queries.json
gulp.task('queries', function (done) {
exec('./queries-to-json', function (error) {
if (error)
@@ -52,43 +60,83 @@ gulp.task('queries', function (done) {
});
});

// Create build/scripts/*
gulp.task('scripts', ['scripts:ui', 'scripts:worker']);

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

gulp.task('scripts:worker', function (done) {
// Create build/scripts/ldf-client-worker.js with source map
gulp.task('scripts:worker', ['deps:ldf-client'], function (done) {
pump([
gulp.src([
'deps/ldf-client-browser.js',
'ldf-client-worker.js',
]),
sourcemaps.init(),
], { base: './' }),
sourcemaps.init({ loadMaps: true }),
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('.'),
sourcemaps.write('./', { sourceRoot: '../' }),
gulp.dest('build/scripts'),
sync.stream(),
], done);
});

// Create deps/ldf-client-browser.js with source map
gulp.task('deps:ldf-client', function (done) {
browerifyDependency('ldf', 'ldf-client', { exclude: ['stream'] }, done);
});

// Create deps/n3-browser.js with source map
gulp.task('deps:n3', function (done) {
browerifyDependency('N3', 'n3', { exclude: [
// The UI only uses the writer
'util', 'stream',
'n3/lib/N3Lexer.js', 'n3/lib/N3Parser.js',
'n3/lib/N3Store.js', 'n3/lib/N3Util.js',
] }, done);
});

// Browserifies the module and save it as a dependency
function browerifyDependency(name, entry, options, done) {
// Browserify the module
var module = browserify({ debug: true, standalone: name }, { base: './' });
module.add('node_modules/' + entry);
options.exclude.forEach(function (excluded) {
module.exclude(excluded);
module.exclude('/node_modules/' + excluded);
});
// Save as a dependency with a source map
pump([
module.bundle(),
source(entry + '-browser.js'),
buffer(),
sourcemaps.init({ loadMaps: true }),
sourcemaps.write('./', { sourceRoot: '../' + entry }),
gulp.dest('deps'),
], done);
}

// Create build/styles/*.css with source map
gulp.task('styles', function (done) {
pump([
gulp.src('*.css'),
@@ -1,18 +1,18 @@
{
"scripts": {
"lint": "eslint *.js",
"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"
"n3": "^0.8.1"
},
"devDependencies": {
"autoprefixer": "^6.5.0",
"browser-sync": "^2.17.2",
"browserify": "^13.1.0",
"del": "^2.2.2",
"eslint": "^3.7.1",
"gulp": "^3.9.1",
@@ -24,7 +24,9 @@
"gulp-util": "^3.0.7",
"postcss-csso": "^1.1.2",
"pre-commit": "^1.1.3",
"pump": "^1.0.1"
"pump": "^1.0.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"pre-commit": [
"lint"

0 comments on commit 8830e44

Please sign in to comment.