I have a gulp task bulding something when the developer save the code (ctrl + s).
It's watching the code and building when there is a change
My issue is that the script do not display console.log during the execution of the script. It only display when we stop the script (ctrl + c)
gulpReactBridgeWatch = function (cb) {
'use strict';
var cmd = 'mkdir -p react/dist && NODE_PATH=react/src NODE_ENV=development ./node_modules/.bin/watchify -p [ tsify -p ./react/tsconfig_build.json ] -g [ scssify --sass [ --importer ./node_modules/node-sass-tilde-importer/index.js ] ] -t [ babelify --extensions .ts --extensions .js --extensions .tsx ] -g [ envify --REACT_APP_BRIDGED true ] -s ReactBridge react/src/bridge/index.ts --external react --external react-dom -o react/dist/bridge.js -v';
return exec(cmd, function (err, stdout, stderr) {
if (err) {
if (stdout) {
console.log(stdout);
}
if (stderr) {
console.log(stderr);
}
console.log('Error building ReactJS Bridge: ' + err);
process.exit(1);
}
cb();
});
},
As you can see, when launching the script, the console.log is not displayed :
But when we cancel the script, the logs appear :
Related
I am new to cypress. My cypress test suite are runing good before configure a mysql connector to connect to mysql database. It throw below Webpack Compilation Error error when add mysql connector code in plugins >> Index.js. following BDD apporche so feature file is used.
Error encountered:
Error: Webpack Compilation Error
./cypress/integration/Login.feature 1:15
Module parse failed: Unexpected token (1:15)
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
> Feature: Login test
Code in plugins >> index.js
const mysql = require('mysql2')
function queryTestDb(query, config) {
// creates a new mysql connection using credentials from cypress.json env's
const connection = mysql.createConnection(Cypress.env('passwrd'))
// start connection to db
connection.connect()
// exec query + disconnect to db as a Promise
return new Promise((resolve, reject) => {
connection.query(query, (error, results) => {
if (error) reject(error)
else {
connection.end()
// console.log(results)
return resolve(results)
}
})
})
};
module.exports = (on, config) => {
// Usage: cy.task('queryDb', query)
on('task', {
queryDb: query => {
return queryTestDb(query, config)
},
})
};
Calling function in step definition
cy.task(
"queryDb",
`select * from city LIMIT 5`
).then(count => {
expect(count).to.have.lengthOf(1);
});
Cypress.json
"env1": {
"db":
{"host": "xxxx.test.mysql",
"user": "xxxxxxx",
"passwrd": "xxxxxxx",
"database": "main" ,
"connectionLimit":10
}
}
tsconfig.js
"compilerOptions": {
"target": "es5",
"outDir": "./built",
"lib": ["es5", "dom"],
"allowSyntheticDefaultImports": false,
"allowJs": true,
"types": ["cypress", "node", "cypress-xpath"]
}
tried lots of ways likes
by refresh installation of node_modules
reinstall mysql2 and mysql package
reinstalling #cypress/webpack-preprocessor
but nothing works.
I would like to install all the dependencies of my package.json file globally.
I tried Running
npm install -g
But this will install the dependencies of the package locally.
Is it possible to install all my package dependencies globally?
Save the following content in root of project as package.js
let json = require('./package.json')
const ob = json
var a = 'npm i -g '
// #types/slug ^0.9.1
Object.entries(ob['dependencies']).forEach(e => {
a = a + ' ' + e[0] + '#' + e[1] + ' '
// console.log(e[0], )
})
const { exec } = require('child_process')
console.log('dependencies', a)
exec(a, (err, stdout, stderr) => {
if (err) {
//some err occurred
console.error(err)
} else {
// the *entire* stdout and stderr (buffered)
console.log(`stdout: ${stdout}`)
console.log(`stderr: ${stderr}`)
}
})
var b = 'npm i -g '
// #types/slug ^0.9.1
Object.entries(ob['devDependencies']).forEach(e => {
b = b + ' ' + e[0] + '#' + e[1] + ' '
// console.log(e[0], )
})
console.log('devDependencies', b)
exec(b, (err, stdout, stderr) => {
if (err) {
//some err occurred
console.error(err)
} else {
// the *entire* stdout and stderr (buffered)
console.log(`stdout: ${stdout}`)
console.log(`stderr: ${stderr}`)
}
})
now run node package.js
run it as sudo node package.js if face admin issue
I decided to use vinyl-ftp for my deployment process in gulp. One thing I would like to do is to have a separate file with my ftp credentials:
host
user
password
and put that file in my .gitignore. And then I want those credentials in that file be read by my connection variable in my gulp file. My deploy code is the following:
gulp.task( 'deploy', function () {
var conn = ftp.create( {
host: 'yourdomain.com',
user: 'ftpusername',
password: 'ftpuserpassword',
parallel: 10,
log: gutil.log
} );
var globs = [
'dist/**'
];
return gulp.src( globs, { base: './dist/', buffer: false } )
.pipe( conn.newer( 'yourdomain.com' ) )
.pipe( conn.dest( 'yourdomain.com' ) );
} );//end deploy
So I want the values of the variables yourdomain.com for the host, ftpusername for user and ftpuserpassword for password be read in from a separate file so my credentials show up when I do git push. How do I accomplish this?
Thanks
You can pass them as run args:
var
gulp = require('gulp'),
args = require('yargs').argv;
const distDir = "./dist";
gulp.task('deploy', function() {
var conn = ftp.create({
host: args.host,
user: args.user,
password: args.password,
parallel: 10,
log: flog // .log
});
var globs = [
distDir + '/**',
distDir + '/.htaccess',
];
return gulp.src(globs, {buffer: false})
.pipe(conn.dest(args.remotedir));
});
Then call it from command line or put the line in a batch file: npm run gulp deploy -- --host=hostname --user=username --password=password --remotedir=/path/to/folder/on/server. Use gulp instead of npm run gulp if gulp is installed global.
This is a good practice to pass credentials trough args at a program start.
I am getting a really weird behaviour with my gulp and browser-sync setup.
When I run my gulp serve task the gulp task runs and build everything and opens the web browser, it just stays there spinning. I go to check the console and I'm getting this error.
[gulp-bs] Watching files...
[gulp-bs] [proxy error] connect ECONNREFUSED
Mongoose connected to mongodb://localhost/<database name>
Now what is interesting is when I go and hit that URL with the browser bar to load the application, everything loads properly.
Why does it happen only the first time but subsequent reloading the browser URL works?
I can't seem to figure out what is causing this error, I don't want to keep reloading the browser after the initial load.
My gulp setup for browser-sync is shown below:
"gulp": "^3.9.0",
"browser-sync": "^2.7.13"
The function is called from a nodemon gulp-task.
function serve(isDev) {
var options = {
script: config.nodeServer,
delayTime: 1,
env: {
"PORT": config.port,
"NODE_ENV": isDev ? "dev" : "production"
}
};
$.nodemon(options)
.on("restart", function(ev) {
log("*** nodemon restarted.");
log("files changed on restart: " + ev);
setTimeout(function() {
browserSync.notify("Reloading now...");
browserSync.reload({
stream: false
});
}, config.browserReloadDelay);
})
.on("start", function() {
log("*** nodemon started.");
startBrowserSync(isDev);
})
.on("crash", function() {
log("*** nodemon crashed due to unexpected reason(s).");
})
.on("exit", function() {
log("*** nodemon exited successfully!.");
});
}
Browser-sync function:
function startBrowserSync(isDev) {
log("*** Starting browser sync");
if (browserSync.active || args.nosync) {
return;
}
if (isDev) {
gulp.watch([config.styles], ["styles"])
.on("change", function(event) {
changeEvent(event);
});
gulp.watch([config.js], ["wiredep"])
.on("change", function(event) {
changeEvent(event);
});
} else {
gulp.watch([config.styles, config.js, config.html], ["optimize", browserSync.reload])
.on("change", function(event) {
changeEvent(event);
});
}
var options = {
proxy: "localhost:" + config.port,
port: 8000,
files: isDev ? [
config.client + "**/*.*",
"!" + config.styles,
config.css + "**/*.css"
] : [],
ghostMode: {
clicks: true,
scroll: true,
location: false,
forms: true
},
injectChanges: true,
logFileChanges: true,
logLevel: "debug",
logPrefix: "gulp-bs",
notify: true,
reloadDelay: 1,
};
browserSync(options);
}
The config.port value is set to 3000 read from a configuration file.
When running gulp, the tests run just fine. On file change, the errors get thrown but then run and pass the tests. If I pull up the browser with tests running, it just errors out. I noticed the files aren't getting served as I specify. My current directory looks like so
app
bower_components
node_modules
public
javascripts
tests
karma.conf.js
gulpfile.js
var gulp = require('gulp');
var karma = require('gulp-karma');
var shell = require('gulp-shell');
var testFiles = [
];
var serverDir = [
'./views/*.js',
'./test/**/*.js',
'./test/*.js',
'./routes/**/*.js',
'./routes/*.js',
'./models/**/*.js',
'./models/*.js',
'app.js'
];
gulp.task('test', function() {
// Be sure to return the stream
return gulp.src(testFiles)
.pipe(karma({
configFile: 'public/javascripts/karma.conf.js',
action: 'watch'
}))
.on('error', function(err) {
// Make sure failed tests cause gulp to exit non-zero
//throw err;
});
});
gulp.task('default', ['test', 'testServer', 'watchServerFiles']);
gulp.task('watchServerFiles', function() {
gulp.watch(serverDir, ['testServer']);
});
gulp.task('testServer', shell.task('jasmine-node-karma test/api.spec.js'));
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'../../bower_components/angular/angular.js',
'../../bower_components/angular-mocks/angular-mocks.js',
'../../bower_components/angular-resource/angular-resource.js',
'../../bower_components/angular-route/angular-route.js',
'../../bower_components/lodash/lodash.js',
'./app.js',
'./controllers/*.js',
'./directives/*.js',
'./services/*.js',
'./*.js',
'./test/*.js',
'./test/**/*.js'
],
reporters: ['progress'],
browsers: ['PhantomJS'],
plugins: [
'karma-jasmine',
'karma-phantomjs-launcher'
],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false
});
};
Check this thread
Both most voted answers work well, but I decided to go with replacing gulp-karma with karma itself. The advantage is that you don't need to duplicate the list of files in both gulpfile.js and karma.conf.js files.
var gulp = require('gulp');
var karma = require('karma').server;
gulp.task('tests', function(done) {
return karma.start({
configFile: __dirname + '/test/karma.conf.js',
singleRun: true
}, done);
});