We Keep Coding

GULP.js: three single tasks works fine in stand alone but leads to unexpected results in gulp.series()

I would like to implement a build and watch job with automated testing via gulp.js.
New for me is the integration of a typescript compiler and the testing of frontend javascript in node.js.
For this I have coded three tasks:
compiling the typescript files into frontend javascript files
compiling the backend javascript test files using jsdom and amd-loader
running the unit tests
If I execute the tasks one by one, everything works as intended.
But if I run all three in gulp.series() after a code change, the next task does not grap the result of the previous task but to the state before the gulp.series call.
A TS change overwrites JS version 1 with JS version 2 in the build task.
The following buildUnitTests task, however, still uses JS version 1.
This is not the case with the watcher, where all changes are recognised by all tasks. But here I have the problem that every change triggers the execution of the unitTestings task and with the termination of the task the Watcher is also terminated:
[hh:mm:ss] The following tasks did not complete: watch, watch
[hh:mm:ss] Did you forget to signal async completion?
Well, the unit tests in the watcher are also a drag on performance and probably belong more in the release task - only there it doesn't work as desired yet.
What to do so that the tasks are processed one after the other, but the view to the changed files is updated between the tasks?
This is the file structure:
dev
|_ js
|_|_ customElements
|_|_|_ callbackBrookerExtesion.js
|_|
|_|_ looselyConnected
|_|_|_ stringifiedReferenceHandler
|_|_|_|_ require.js
|_|_|_|_ set.js
|_|_|
|_|_|_ callbackBrooker.js
|_|_|_ fileManager.js
|_|_|_ stringifiedReferenceHandler.js
gulp
|_ tasks
|_|_ script.js
|
|_ config.js
|_ index.js
test
|_ config
|_|_ unitTests.json
|
|_ templates
|_|_ exports.js
|_|_ looselyConnected.js
|_|_ prepare.js
|
|_ unittests
|_|_ spec
|_|_|_ looselyConnected
|_|_|_|_ callbackBrooker
|_|_|_|_|_ pull.spec.js
|_|_|_|_|_ push.spec.js
|_|
|_|_ src
|_|_|_ // the unit tests for custom elements are in progress
|_|_|_ looselyConnected.js
TS
|_ client
|_|_ customElements
|_|_|_ callbackBrookerExtesion.ts
|_|_|_ tsCallbackBrookerExtesionConfig.json
|_|
|_|_ looselyConnected
|_|_|_ stringifiedReferenceHandler
|_|_|_|_ require.ts
|_|_|_|_ set.jts
|_|_|
|_|_|_ callbackBrooker.ts
|_|_|_ fileManager.ts
|_|_|_ looselyConnected.d.ts
|_|_|_ stringifiedReferenceHandler.ts
|_|
|_|_ tsBaseConfig.json
|
|_ tsconfig
|_|_ customElements.json
|_|_ looselyConnected.json
gulpfile.js
gulp/index.js:
const gulp = require("gulp");
const scripts = require("./tasks/scripts");
gulp.task("default",
gulp.series(
scripts.build,
scripts.buildUnitTests,
scripts.unitTesting
)
);
gulp.task("build",
gulp.series(
scripts.build
)
);
gulp.task("buildUnitTests",
gulp.series(
scripts.buildUnitTests
)
);
gulp.task("unitTesting",
gulp.series(
scripts.unitTesting
)
);
gulp.task("watch",
gulp.series(
scripts.watch
)
);
gulp/config.js
exports.unitTests = {
looselyConnected: {
files: [
"./test/templates/prepare.js",
"./test/templates/looselyConnected.js",
"./dev/js/looselyConnected/callbackBroker.js",
"./dev/js/looselyConnected/stringifiedReferenceHandler.js",
"./dev/js/looselyConnected/fileManager.js",
"./dev/js/looselyConnected/stringifiedReferenceHandler/require.js",
"./dev/js/looselyConnected/stringifiedReferenceHandler/set.js",
"./test/templates/exports.js"
],
name: 'looselyConnected.js',
dest: './test/unittests/src',
watch: [
"./TS/client/looselyConnected/**/*",
"./TS/client/looselyConnected/looselyConnected.d.ts",
"./TS/client/customElements/**/*"
],
specs: [
"test/unittests/src/looselyConnected.js",
"test/unittests/spec/looselyConnected/callbackBroker/push.spec.js",
"test/unittests/spec/looselyConnected/callbackBroker/pull.spec.js"
]
}
}
gulp/tasks/script.js
const gulp = require("gulp");
const ts = require("gulp-typescript");
const concat = require('gulp-concat');
const Jasmine = require('jasmine');
const jasmine = new Jasmine();
const reporters = require('jasmine-reporters');
const config = require('../config');
const buildScript = cb => {
let tsProject = ts.createProject("tsconfig/looselyConnected.json");
tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("./dev/js/looselyConnected"));
tsProject = ts.createProject("tsconfig/customElements.json");
tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("./dev/js/customElements"));
return cb();
};
const unitTesting = cb => {
jasmine.loadConfigFile('./test/config/unitTests.json');
jasmine.addReporter(new reporters.JUnitXmlReporter());
jasmine.execute(config.unitTests.looselyConnected.specs);
return cb();
}
const buildUnitTests = cb => {
let tests = config.unitTests;
for (i in tests) {
let test = tests[i];
gulp.src(test.files)
.pipe(concat(test.name))
.pipe(gulp.dest(test.dest));
}
return cb();
}
const watch = () => {
let confLC = config.unitTests.looselyConnected;
gulp.watch(confLC.watch, buildScript);
gulp.watch(confLC.files, buildUnitTests);
//gulp.watch(confLC.specs, unitTesting); -> this will quit the watcher after every change
}
module.exports = {
build: buildScript,
buildUnitTests: buildUnitTests,
unitTesting: unitTesting,
watch: watch,
};

Nuxt 2.x: Add babel's transform plugin, that work on imported node_module file

How to add #babel/plugin-proposal-optional-chaining plugin to .nuxt.config that work for a file imported from node_modules (a one that not pre-build )
By this Example here I do:
export default {
plugins: [
'~/plugins/accesso.js' // that one make the trouble
],
build: {
babel: {
plugins: [
['#babel/plugin-proposal-optional-chaining', {loose: true}]
]
}
}
}
// ~/plugins/accesso.js
import Accesso from '#perymimon/accesso'
export default function (ctx, inject) {
inject('Accesso', accesso)
}
And it works fine for some foo?.bar in .vue files but not for files that come from node_module.
why?
The eror is reguar error from webpack
Module parse failed: Unexpected token (311:25) friendly-errors 14:39:06
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| function frame$extractPayload(frame, authSetting) {
> let location = frame?.contentWindow?.location || frame.location;
| const {protocol, host, pathname} = location;
| const atHome = protocol + '//' + host + pathname === authSetting.redirect_uri;
friendly-errors 14:39:06
# ./node_modules/#perymimon/accesso/src/providers.js 1:0-37 3:0-29 3:0-29 8:22-29 34:23-30 51:22-29
# ./plugins/accesso.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=modern&path=/__webpack_hmr/modern ./.nuxt/client.js

I'm speculating that it may be that the dependencies in question are not already transpiled.
In vue.config.js you can specify an array of dependencies that should be transpiled by the project.
vue.config.js:
module.exports = {
transpileDependencies: ['tomsNodeModule'],
}

Multiple eslintrc in grunt pointing to different folder

I have folder structure like below and using eslint I am validating my syntax rules .
I have a grunt file which runs eslint by default to all folder below src . But now I have got new scenario where I need to run few more rules to one specific folder mddx. Along With default rules mddx should run with more rules .
I know we can have multiple .eslintrc.json file , but how to configure in gruntfile.js with two task , both doing eslint but rules are diffrent.
Also pointing folder is different.
parent
|
|
|------src
| +mund
| |
| |--<jsfiles>
| +mddx
| |
| |--<jsfiles>
.eslintrc.json
|
|
gruntfile.js
|
gruntfile.js
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
eslint: {
options: {
config: '.eslintrc.json',
reset: false
},
target: {
src: [
'src/**/*.js'
]
}
}
});
grunt.registerTask('default', ['eslint']);
};

I got answer so posting it .
Created .eslintrc.json file specific to folder and divided eslint into two sub task . Both has different configuration and points to different rule and
folder.
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
eslint: {
default: {
options: {
configFile: '.eslintrc.json',
reset: false
},
src: [
'src/**/*.js'
]
},
mddx: {
options: {
configFile: 'src/mddx/.eslintrc.json',
reset: false
},
src: [
'src/mddx/**/*.js'
]
}
}
});
grunt.registerTask('default', ['eslint']);
};

Typescript + Gulp + Sourcemaps wrong source path

I have a nodejs app with the following folder structure:
project
|-- src/
| |-- controllers/
| | |`-- authorize-controller.ts
| |`-- index.ts
|--dist/
| |--controllers/
| | |`-- authorize-controller.js
| | |`-- authorize-controller.js.map
| |`-- index.js
| |`-- index.js.map
`-- gulpfile.js
`-- tsconfig.json
The sourcemaps are generated. The index.js.map points to "../src/index.ts" (correct). The corresponding content of the map file is {"version":3,"sources":["../src/index.ts"],"names":[],"mappings"
But the dist\controllers\authorize-controller.js.map points to the wrong directory. It has {"version":3,"sources":["../src/controllers/authentication.controller.ts"],"names":[],. There is one ../ missing.
My gulpfile.js is:
gulp.task('compile', () => {
var tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject());
return tsResult.js
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' }))
.pipe(gulp.dest('dist'));
});
My tsconfig.json is:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"outDir": "dist"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"dist",
".vscode"
]
}
What am I doing wrong?
It seems the sourceRoot is ignored by gulp-sourcemaps.

Ok I found a solution to get the breakpoints hit.
I looked on the wrong part of the sourcefile. "sources":["../src/controllers/authentication.controller.ts"] is always the same and can be ignored. If I change the gulp task to use sourceRoot: '../src' it works.
At the end of the sourcemap-file, the sourceRoot is set.
This is my new gulp task:
gulp.task('compile', () => {
var tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject());
return tsResult.js
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../src' }))
.pipe(gulp.dest('dist'));
});

My source files are located at "src" folder at the project root folder and all output with corresponding folder structure goes into "dist" folder similar to yours. Here is my "compile" task that I think can help you :
var gulp = require("gulp");
var tsc = require("gulp-typescript");
var sourcemaps = require('gulp-sourcemaps');
gulp.task("compile", function () {
var tsProject = tsc.createProject('tsconfig.json');
return gulp
.src("src/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write(
".",
{
sourceRoot: function(file) {
var filePathSplit = file.sourceMap.file.split("/");
var backTrack = '../'.repeat(filePathSplit.length-1) || '../' ;
var filePath = backTrack+ "src/";
return filePath;
}}
))
.pipe(gulp.dest("dist"));
});
Hope this will help.

Compile using Gulp handlebars partials to single HTML file

I would like to create a gulpfile to compile from partials into a single HTML file. This is my file structure:
| css/
| - main.css
| gulpfile.js
| less/
| - main.less
| index.html
| templates/
| - index.handlebars
| - partials /
| -- header.hbs
| -- footer.hbs
My gulpfile.js looks like this:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var hbsAll = require('gulp-handlebars-all');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars')(handlebars); //default to require('handlebars') if not provided
var rename = require('gulp-rename');
var less = require('gulp-less-sourcemap');
var autoprefixer = require('gulp-autoprefixer');
var watch = require('gulp-watch');
handlebars.registerPartial('header', '{{header}}'),
handlebars.registerPartial('footer', '{{footer}}')
gulp.task('default', function () {
options = {
partialsDirectory : ['./templates/partials']
}
return gulp.src('templates/index.handlebars')
.pipe(gulpHandlebars( options))
.pipe(rename('index.html'))
.pipe(gulp.dest(''));
});
gulp.task('hbsToHTML', function() {
gulp.src('templates/*.hbs')
.pipe(hbsAll('html', {
context: {foo: 'bar'},
partials: ['templates/partials/*.hbs'],
}))
.pipe(gulp.dest('templates'));
});
gulp.task('less', function () {
gulp.src('./less/*.less')
.pipe(less({
sourceMap: {
sourceMapRootpath: '../less' // Optional absolute or relative path to your LESS files
}
}))
.pipe(gulp.dest('./css'));
});
gulp.task('prefix', function () {
return gulp.src('css/main.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./css'));
});
gulp.task('default', ['hbsToHTML', 'less', 'prefix']);
and my index.handlebars file looks like this:
{{> header}}
<p>Hello </p>
<p>there </p>
{{> footer}}
So, everthing else looks fine, but I can't get the hbsToHTML function to work. Any help is welcome! I know there could be more than a few bugs :(

There's an excellent gulp plugin which does exactly this. You can find it on npm here: https://www.npmjs.com/package/gulp-compile-handlebars
Set the path to your partials using the batch option.
Set the path to your templates using gulp.src
and set the destination using gulp.dest
The example code on the npm page demonstrates this, though in your case you will not need the partials option and you may want to set the ignorePartials to false so that it picks up all the files you have in your partials directory

I figured it out btw and uploaded it to git. Check it.
https://github.com/nikdelig/hbsToHTML
gulp.task('hbsToHTML', function() {
gulp.src('templates/*.hbs')
.pipe(hbsAll('html', {
context: {foo: 'bar'},
partials: ['templates/partials/**/*.hbs'],}))
.pipe(rename('index.html'))
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(''));
});