Develop Reference

Electron/Node.js - How to spawn a python script from another directory

I currently have the following file structure for my electron project:
<PROJECT>
<css>
<js>
<data>
<scripts>
script.py
index.html
main.js
package.json
In my main.js I have
var ipc = require('electron').ipcMain;
ipc.on('asynchronous-message', function (event, arg) {
var py = require('child_process').spawn('python', ['./scripts/script.py']);
py.on('close', function() {
event.sender.send('asynchronous-reply', '');
});
});
But the python script (which actually generates an output file) doesn't seem to run at all. If I take the script out of the scripts folder and place it in the top level folder right next to the main.js file and change the spawn agruments array to ['./script.py'], it runs perfectly fine. I'm just not entirely sure what part of the code above is causing the script to fail to execute.

Always use absolute paths, to create one relative to the current source file prefix it with __dirname, for example:
const path = require('path');
const scriptFilename = path.join(__dirname, 'scripts', 'script.py');

BrowserSync doesn't show changes after browser reload

BrowserSync in the gulpfile below is not showing the changes made to index.html even after it says 'Reloading Browsers' in command line as well as the 'Connected to BrowserSync' notification in Chrome.
Another odd thing that's occurring is that after the third save of the index.jade file, the rendered website in Chrome completely disappears, nothing in the rendered DOM.
I've followed ShakyShane's recipe on github (with a few tweaks). It worked without the tweaks on another project I started, but I can't see what's wrong here.
My file structure is:
project-folder
/app
/css
/jade
/js
/sass
index.html
gulpfile.js
package.json
Any help would be greatly appreciated.
/***********************************************************************************
1. DEPENDENCIES
/***********************************************************************************/
var gulp = require ('gulp'), // gulp core
plumber = require ('gulp-plumber'), // disable interuption
jade = require ('gulp-jade'), // jade compiler
sass = require ('gulp-sass'), // sass compiler
autoprefixer = require ('gulp-autoprefixer'), // sets missinb browser prefixes
browserSync = require ('browser-sync'), // inject code to all devices
reload = browserSync.reload; // browser sync reload
/*********************************************************************************
2. FILE DESTINATIONS (RELATIVE TO ASSETS FOLDER)
**********************************************************************************/
var target = {
jadeSrc : 'app/jade/**/*.jade', // source of jade files
htmlDest : 'app/', // html file destination
sassSrc : 'app/sass/**/*.sass', // source of sass files
cssDest : 'app/css', // minified css destination
jsDest : 'dist/js' // where to put minified js
};
/**********************************************************************************
3. SASS TASK
***********************************************************************************/
gulp.task ('sass', function (){
gulp.src(target.sassSrc) // get the files
.pipe(plumber()) // make sure gulp keeps runnin on errors
.pipe(sass()) // compile all sass
.pipe(autoprefixer()) // complete css with correct vendor prefixes
.pipe(gulp.dest(target.cssDest)) // file destination
.pipe(reload({stream:true}));
});
/**********************************************************************************
4. JADE TASKS
**********************************************************************************/
gulp.task('jade', function(){
var YOUR_LOCALS = {};
gulp.src(target.jadeSrc)
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest(target.htmlDest))
});
// separate watcher for browser-sync reaction to '.jade' file changes
gulp.task('jade-watch', ['jade'], reload);
/**********************************************************************************
5. BUILD SEQUENCES
**********************************************************************************/
gulp.task('default', ['sass', 'jade'], function(){
browserSync({server: target.htmlDest});
gulp.watch(target.sassSrc, ['sass']);
gulp.watch(target.jadeSrc, ['jade-watch']);
});

Use Grunt newer with custom task

I'm trying to use grunt-newer to watch files from a folder and if any is changed, trigger a custom task.
I have something like this in my Gruntfile.js:
grunt.initConfig({
watch: {
widgets: {
files: "/somepath/*.js",
tasks: ['newer:mycustomtask']
}
}
});
grunt.registerTask("mycustomtask", ["description of my task"], function() {
console.log("me has been triggered");
});
Whenever I run "grunt watch", I have this output:
Running "watch" task
Waiting...
File "/somepath/WidgetA.js" changed.
Running "newer:mycustomtask" (newer) task
Fatal error: The "newer" prefix is not supported for aliases
I googled but didn't found anything about this. Anyone knows how could I implement this? I need to now in my "customtask" which files have been changed

If you reference a task (inside watch or concurrent e.g.) which is either not installed or not configured you get this error output.
This happens often when you copy-paste a watch config from a different project.

I came across a similar requirement and the solution I ended up with is roughly as follows. Let's assume that the project structure is:
Gruntfile.js
package.json
src/
config.js
data.js
tasks/
customtask.js
Here, the src directory contains data which will be monitored by watch, while the definition of the custom task is stored in tasks/customtask.js. For the purpose of this example, this task will only print the file names of the changed files:
var fs = require('fs');
var path = require('path');
module.exports = function(grunt) {
grunt.registerMultiTask('customtask', function() {
var done = this.async();
if(!this.files){ done(); return; }
this.files[0].src.forEach(file_name => {
console.log(file_name);
});
done();
});
};
Now, Gruntfile.js looks like:
module.exports = function(grunt) {
const files = ['src/config.js', 'src/data.js'];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
customtask: {
release: {
src: files
}
},
watch: {
data: {
files: files,
tasks: ['customtask:release']
},
options: {
spawn: false
}
}
});
grunt.loadTasks('tasks');
grunt.loadNpmTasks('grunt-contrib-watch');
var changedFiles = Object.create(null);
var onChange = grunt.util._.debounce(function() {
grunt.config('customtask.release.src', Object.keys(changedFiles));
changedFiles = Object.create(null);
}, 200);
grunt.event.on('watch', function(action, filepath) {
changedFiles[filepath] = action;
onChange();
});
grunt.registerTask('build', ['watch:data']);
};
here, it specifies that:
the files of interest are ['src/config.js', 'src/data.js']
that our customtask operates in principle on these files (in case it would be invoked directly)
that watch is supposed to observe these files and launch customtask:release whenever something changes
grunt.loadTasks('tasks') loads all "tasks definitions" from the directory tasks, i.e., here only the customtask
grunt.registerTask('build', ['watch:data']) defines a "shortcut" for watch:data
Finally, in order to invoke customtask only for the changed files, this example uses the strategy employed in the documentation in the section "Compiling files as needed". In loose terms, it assembles all changed files in an object the keys of which are then used to modify the src property of the customtask on-the-fly.
Running grunt build then initiates the "watch". If one runs in another terminal window for example touch src/*.js, the output is:
Running "watch:data" (watch) task
Waiting...
>> File "src/config.js" changed.
>> File "src/data.js" changed.
Running "customtask:release" (customtask) task
src/config.js
src/data.js
where the last two lines come from customtask...

You just need to have a config entry (even an empty one) for your task:
grunt.initConfig({
mycustomtask: {
},
watch: {
widgets: {
files: "/somepath/*.js",
tasks: ['newer:mycustomtask']
}
}
});

gulp-connect root as array

In the gulp-connect documentation, it says options.root can be an array or string.
I have a build directory that I would like to serve as my root, but I also have a (separate) sources directory that all of my source maps point to. Would I be able to leverage this options.root array syntax to allow me to serve both directories?
I have tried
root: ['build', 'sources']
but this results in only build being accessible through the server. Am I missing something here?

Actually it does work, yet the root page displays in the index page only the first root.
What I did is create directory a with a simple index.html file which had in it:
<script src="b.js"></script>
then in directory b I put b.js with a single line:
alert("you found me!!!")
I started the following gulpfile:
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('default', function () {
connect.server({
root: ['a', 'b'],
port: 8080,
livereload: true
});
});
and loaded localhost:8080/index.html and ... the alert popped up

Dynamic Grunt involving n subdirectories

I have a folder layout such that:
/
-- css/
-- js/
-- apps/
-- -- myFirstApp/
-- -- mySecondApp/
-- -- ...
Each of these are git submodules, and have a corresponding Gruntfile, package.json, etc. What I want to do is the same sequence of commands, but differ depending on the respective package.json.
My command list is this:
npm install
grunt dist
copy app/css/[fileName].css (from package.json) to css/
copy app/js/[fileName].js to js/
copy app/js/[fileName].html to /
Is there a plugin or something I'm overlooking that I can use with grunt to do this? I don't want to do it statically if at all possible -- I'd like to only have to update the submodule list for this to work.

I don't know of any pre-built Grunt task that will do this for you, but writing the task isn't so difficult. You'll need to pull in the Node fs module to deal with the filesystem and obviously there will be some other things to do... here's a general structure for it with some code and some TODO's:
var fs = require("fs"),
path = require("path");
module.exports = function ( grunt ) {
grunt.initConfig({
... // all of your other Grunt config
// options for our new task
copymodulefiles: {
all: {
rootDir: "apps/"
}
}
});
// Here's our custom task definition
grunt.registerMultiTask("copymodulefiles", "Copies files from sub-projects", function() {
var done = this.async(), // tell Grunt this is an async task
root = grunt.config(this.name + "." + this.target + ".rootDir"),
modules = fs.readdirSync(root);
modules.forEach(function(dirName) {
var pkg = fs.readFileSync(root + dirName + path.sep + "package.json", "utf8");
pkgJson = JSON.parse(pkg);
// TODO: find what you need in the pkgJson variable
// copy files from wherever to wherever
// You can write a file like so:
fs.writeFile(theFilenameToWrite, "Contents of the new file", function (err) {
// (check for errors!)
// log it?
grunt.log.ok("file written!");
});
});
// Determine when all are complete and call "done()" to tell Grunt everything's complete
// call Grunt's "done" method to signal task completion
done();
});
};

Try with grunt-shell i found it perfect and did similar tasks like what you are trying to do.
Have a look at my Gruntfile.js configuration what i have written to run shell commands:
shell: {
multiple: {
command: ['bower install',
'mv bower_components/** public/',
'rm -rf bower_components'
].join('&&')
}
}
So here i am running bower, then i am copying its components to public folder and after that i am deleting the bower_components folder. So i guess from here onwards you can customize this script as per your usage.