A Gulp plugin to produce pre-parsed assets for QmlWeb
Add the following dependencies to your package.json:
{
"name": "QmlWebProject",
"devDependencies": {
"gulp": "~4.0.2",
"gulp-concat": "~2.6.1",
"gulp-qmlweb": "~0.0.7"
}
}Set up gulpfile.js in your project's root folder:
var gulp = require('gulp');
var qml = require('gulp-qmlweb');
var concat = require('gulp-concat');
function myPathFilter(path) {
return "/mynamespace/" + path;
}
gulp.task('scripts', function() {
return gulp.src(['qml/**/*.qml', 'qml/**/*.js', 'qml/**/qmldir'])
.pipe(qml({pathFilter: myPathFilter}))
.pipe(concat('qrc.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('default', gulp.series('scripts'));Now, running npx gulp will compile all your QML sources (qml and javascript) and concatenate them in the /dist/qrc.js file.
Include the qrc.js file and qmlweb.js file from the qmlweb package to get your application up and running.
Note that the path to files included from qrc.js must be preppended with the qrc:/ scheme.
<html>
<head>
<title>Gulp-powered QmlWeb App</title>
<script src="dist/qrc.js"></script>
<script src="dist/qmlweb.js"></script>
</head>
<body data-qml="qrc:/mynamespace/qml/main.qml">
</body>
</html>