Why is this gulp task not being run consecutively? - javascript

I have three gulp tasks: watch, build, test. I'd like to have my watch running and when a file is saved, it is built and then tested (duh).
What is happening is that despite being set up to run build as a dependency of test, I need to save the file twice in order for the latest build to be the one that is tested.
I can reproduce this by starting the watch, making a change to somewhere in the client JS code (like adding a console log) and then watching the resulting output. The first save will not have any console output. Just saving the file again (no changes made) will cause the test to be re-run and the console output to display.
I have also noticed cases where the first build+test cycle will be the correct build (i.e. will have the console log statement), but after that, it takes two saves to make sure the latest code is the one being tested.
Spec files are immune to this because they are not built and instead used directly (sorta, they're transpiled first).
So, am I going crazy here? These should be run consecutively, right?
The log would suggest that's the case:
[12:05:54] Starting 'build:client:js'...
[12:05:54] Finished 'build:client:js' after 13 ms
[12:05:54] Starting 'test:client'...
19 09 2016 12:05:54.808:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
19 09 2016 12:05:54.808:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
19 09 2016 12:05:54.841:INFO [launcher]: Starting browser PhantomJS
19 09 2016 12:05:55.381:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#Zklau3qmk75NKg2HAAAB with id 61545463
LOG: 'test'
.
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.002 secs / 0.029 secs)
[12:05:55] Finished 'test:client' after 775 ms
Build:
Basic build for AngularJS App, nothing too strange here.
gulp.task('build:client:js', () => {
gulp.src('app/sections/client/**/!(*.spec|*.e2e).js')
.pipe(sourceMaps.init())
.pipe(eslint())
.pipe(eslint.formatEach())
.pipe(babel({presets: ['es2015']}))
.pipe(ngAnnotate())
.pipe(concat('client.js'))
.pipe(uglify())
.pipe(sourceMaps.write())
.pipe(gulp.dest(paths.build))
});
Test:
This is set up so that, ideally, build runs and completes first.
gulp.task('test:client', ['build:client:js'], (done) => {
const src = {};
src['client'] = 'app/sections/client';
const config = getTestConfig(src);
new karmaServer(config, done).start();
});
Watch:
This should only need to run test because build is a dependency of test.
gulp.task('watch:client:js', () => {
gulp.watch('app/sections/client/**/*.js', ['test:client']);
});
Also, to be totally transparent, most of my watch>build>test gulp tasks are being generated dynamically based off a paths file. It basically returns JSON that is then used by functions to create the gulp tasks. The output below is the result of that generation, but I'm not sure that physically writing each task out like this would make any difference.
You can experiment with or see more here.

In the task 'build:client:js', you should return the stream so that gulp knows when the task actually ends.
gulp.task('build:client:js', () => {
return gulp.src('app/sections/client/**/!(*.spec|*.e2e).js')
.pipe(sourceMaps.init())
.pipe(eslint())
.pipe(eslint.formatEach())
.pipe(babel({presets: ['es2015']}))
.pipe(ngAnnotate())
.pipe(concat('client.js'))
.pipe(uglify())
.pipe(sourceMaps.write())
.pipe(gulp.dest(paths.build))
});

Related

Gulp hangs after executing tasks

I'm figuring out how gulp is working; it looks like the gulp tasks are being executed, but then it hangs.
Environment:
node version v14.17.0.
gulp:
CLI version: 2.3.0 Local version: 4.0.2
const babel = require("gulp-babel");
task("js",()=>{
return src("src/*.js").pipe(babel()).pipe(dest("dist/js"));
})
task("moveHTML",()=>{
return src("src/*.html").pipe(dest("dist"));
});
task("watch",()=>{
watch("src/*.js",series("js"));
});
task("default",series('moveHTML','js','watch'));
There is no error here, but the execution is hanging. below is the node terminal message:
[10:30:29] Starting 'default'...
[10:30:29] Starting 'moveHTML'...
[10:30:29] Finished 'moveHTML' after 85 ms
[10:30:29] Starting 'js'...
[10:30:32] Finished 'js' after 3.22 s
[10:30:32] Starting 'watch'...
The process persists because you are calling gulp.watch which returns an instance of chokidar and by default keeps the node process running.
If you want to stop the node process use the persistent option and set it to false.
watch("src/*.js", { persistent: false }, series("js"));
However, the gulp docs suggest not to do this.

Gulp task does not finish even when the process terminates with code 0

I have added a gulp task to remove directories in the given paths. The paths are read from an array.
My gulp task runs properly and does the required job. The Task Runner explorer give the message of starting the task as well as the process terminating successfully with code 0. The problem is that it doesn't state that the task has finished. Due to this, my other tasks that are dependent on this task, cannot execute during build process automation.
const rmr = require('rmr');
// array containing the list of all paths of the folders to be deleted
const removeFoldersArr = [
{
Path: "wwww/scripts"
},
{
Path: "www/styles"
}
];
// Gulp Task to remove all files in a folder
gulp.task('cleanFolders', function () {
return removeFoldersArr.map(function (folder) {
rmr.sync(folder.Path);
});
});
Inside Task Runner Explorer, the task starts but doesn't finish, though it terminates with code 0, as shown below:
cmd.exe /c gulp -b "D:\My Projects\Solution1" --color --gulpfile "D:\My Projects\Solution1\Gulpfile.js" cleanFolders
[18:04:23] Using gulpfile D:\My Projects\Solution1\Gulpfile.js
[18:04:23] Starting 'cleanFolders'...
Process terminated with code 0.
The correct way is to return a promise.
Given an iterable (array or string), or a promise of an iterable, promise.all iterates over all the values in the iterable into an array and returns a promise that is fulfilled when all the item(s) in the array is(are) fulfilled.
Following is the code snippet of the solution:
gulp.task('cleanFolders', function () {
return Promise.all([
removeFoldersArr.map(function (folder) {
rmr.sync(folder.Path);
})
]);
});
Now, the process first finishes and then gets terminated.
Following is the output as shown in Task Runner Explorer:
cmd.exe /c gulp -b "D:\My Projects\Solution1" --color --gulpfile "D:\My Projects\Solution1\Gulpfile.js" cleanFolders
[12:25:01] Using gulpfile D:\My Projects\Solution1\Gulpfile.js
[12:45:01] Starting 'cleanFolders'...
[12:45:01] Finished 'cleanFolders' after 3.18 ms
Process terminated with code 0.
After having this issue on VS2017, we looked to see that the issue we were having was related to version numbers 15.8.X, in which they shipped a new version of Node.js, version 10.6, and that basically broke gulp. It was terminating the process early with a code 0, but few if any of the processes were even allowed to finish.
Rearranging the web package management list to put $(PATH) before $(VSInstalledExternalTools) and having LTS version of Node on your path is what fixed it for us.
See: https://developercommunity.visualstudio.com/content/problem/311553/task-runner-cant-load-gruntfilejs.html

gulp.watch() not running associated task

I have the following code in my gulpfile.js:
gulp.task('test-watch', function () {
console.log('running test-watch...');
return gulp.src('./views/layout.tmpl')
.pipe(rename('layout.html'))
.pipe(gulp.dest('./views/'));
});
gulp.task('watch', function () {
var watcher = gulp.watch('./views/layout.tmpl', ['test-watch']);
watcher.on('change', function (event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
It results in the following output (the last line occurs after I edit/save "layout.tmpl"):
[15:53:12] Using gulpfile C:\project1\gulpfile.js
[15:53:12] Starting 'watch'...
[15:53:12] Finished 'watch' after 6.72 ms
File C:\project1\views\layout.tmpl was changed, running tasks...
The file "layout.html" (which is supposed to be a copy of "layout.tmpl") does not get created. Note that in the above output while the "console.log" within the "watcher.on" invocation is shown in output, the "console.log" within the "test-watch" task is not shown. If I run the test-watch task directly, the file does get created.
Here is the output if I run the test-watch task directly:
[15:53:56] Using gulpfile C:\project1\gulpfile.js
[15:53:56] Starting 'test-watch'...
running test-watch...
[15:53:56] Finished 'test-watch' after 12 ms
Note that the "console.log" within the "test-watch" task is shown.
This is on a Windows 7 machine, running gulp tasks from cmd.exe.
Support for passing in watch tasks to the gulp.watch API as an array requires gulp version 3.5 at minimum. The gulp.watch API accepts an array of tasks only in gulp version 3.5 and up.
My local gulp was version 3.4.
I updated gulp to latest 3.8 version and my watch task worked correctly.

Tests with Karma not finishing

I have been trying to run some tests with karma but have not been able to get it to work. After trying to get it to work with my application, I tried running it with the most simple possible test, and yet, it still does not finish.
Here is my karma.conf.js file:
// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
// 'app/bower_components/angular/angular.js',
// // 'app/bower_components/angular/angular-mocks.js',
// 'app/scripts/*.js',
// 'app/scripts/controllers/main.js',
// // 'test/mock/**/*.js',
// 'test/spec/**/*.js',
// // 'app/scripts/**/*.js,'
'testing.js'
],
// list of files / patterns to exclude
exclude: ['angular-scenario.js'],
// web server port
port: 8080,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
and here is the testing.js file :
describe("hello", function(){
it("Should fail automatically", function(){
expect(false).toBe(true)
});
});
The result I get without fail is:
$ karma start karma.conf.js
INFO [karma]: Karma v0.10.9 server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 30.0.1599 (Mac OS X 10.7.5)]: Connected on socket dGANukHhgkPC3YyhyUrU
INFO [Chrome 30.0.1599 (Mac OS X 10.7.5)]: Connected on socket HC8iGMv-VmeYX2UAyUrV
It never seems to go on and tell me how many of my tests succeeded or not.
Thanks for all of the help. Hopefully I will have some hair left at the end of this, haha.
This is the expected behaviour.
single_run : true means run the tests once and exit.
single_run : false means don't exit (this is not obvious).
autowatch : true means trigger running tests when a file changes.
If you have both autowatch and single_run set to false (like you do), then running
karma start
will just have karma initialize and wait for something to trigger it to run.
In order to trigger running the tests you need to open a new console and do
karma run
(Or set one of the above mentioned flags to 'true')
I ran into the same problem. I ended up installing the version of node that was suggested here: http://karma-runner.github.io/0.10/intro/faq.html. So now, I am running node.js version 0.10.38 with karma server version 1.4.28 and Chrome is happy with that.

Karma with Jasmine: expect undefined

I am working with karma & jasmine for unit testing my javascript pages. After all configuration done i was able to run the test cases. However, the expect statement is falining stating undefined. even though i hard code 2 strings in the expect, its failing. I tried toBe & toEqual but without success. Below is my code:
describe('Sanity Test', function() {
var scope;
beforeEach(angular.mock.module('serviceApp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) {
scope = $rootScope.$new();
$controller('welcomeController', {
$scope : scope
});
}));
it('Sanity test Jasmine"', function() {
scope.text = 'Hi';
expect('Hi').toEqual('Hi');
});
});
Error:
INFO [launcher]: Starting browser Chrome
INFO [Chrome 30.0.1599 (Windows 7)]: Connected on socket DjMqv6LulftBpkJ2ph7g
Chrome 30.0.1599 (Windows 7) Sanity Test Sanity test Jasmine" FAILED
expect undefined toEqual "Hi"
.....src/main/webapp/test/spec/controllers/welcome.test.js:15:3: expected "Hi" but was undefined
Chrome 30.0.1599 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.424 secs / 0.025 secs)
Been struggling for last 2 days.
May be something to do with the karma version i was using. I moved to mac with a slightly older version of karma and everything worked smooth.
I was getting undefined messages like this for all my tests in an Ionic project which ran with grunt. It ended up being because my karma settings were configured to use mocha and chai instead of jasmine. Just edit your configuration (whether its gulpfile.js, Gruntfile.js or karma.my.js) from
frameworks: ['mocha', 'chai'],
to
frameworks: ['jasmine'],

Categories