MSC Undefined Error Using Gulp In Visual Studio Code on OSX - gulp

I'm trying to build a C# project using the Visual Studio Code task runner and Gulp on OSX 10.11.4. The documentation gives an example gulpfile for doing this:
var gulp = require("gulp");
var program = "MyApp";
var port = 55555;
gulp.task('default', ['debug']);
gulp.task('build', function() {
return gulp
.src('./**/*.cs')
.pipe(msc(['-fullpaths', '-debug', '-target:exe', '-out:' + program]));
});
gulp.task('debug', ['build'], function(done) {
return mono.debug({ port: port, program: program}, done);
});
When I try to run this code I get an error:
ReferenceError: msc is not defined
The sample code doesn't require any msc module but looking through Gulp and its documentation I don't see any msc module. Also searching npm finds no msc gulp module for compiling C#.
Where would I find this 'msc' module?

I'm pretty sure that
msc and mono.debug
might be placeholders.
You can use something like
var exec = require('gulp-exec');
gulp.task('build', function () {
return gulp
.src('./**/*.vb')
.pipe(exec('vbnc -optionstrict -warnaserror -debug -target:exe -out:' + program + ' <%= file.path %>'))
.pipe(exec.reporter());
});

Related

Gulp watch EPERM on Windows

Using gulp and the new Microsoft bash shell, I am trying to set up a gulp watch to compile my scss into css, in a way that the watch doesn't stop when there is an error compiling it.
I've set up a gulp task called sass to do this, and I can run it fine from the command line with gulp sass, but when I try to run my gulp watch command with gulp watch I get an EPERM error which I've been unable to fix in a way to get my gulp.watch working. Here is the error messages output to the command line, below.
I've tried changing permissions on my node_modules folder, as well using sudo to do, but I still get this error. Help would be greatly appreciated.
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
gulp.task('watch', ['sass'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(customPlumber('Error Running Sass'))
.pipe(sass())
.pipe(gulp.dest('app/css'))
})
function customPlumber(errTitle){
return plumber({
//use notify plugin to report error as windows toaster message
errorHandler:notify.onError({
//Customizing error title
title:errTitle || "Error running Gulp",
message: "Error: <%= error.message %>",
})
});
}
WSL doesn't support FS notify syscalls in Slow/Preview/Production rings. In the Fast ring, it supports tracking changes made inside WSL. Devs promise support for tracking changes made in Windows will be added soon enough.
Related links:
GitHub issue
UserVoice ticket

Gulp Child Process hangs

I am trying to create a gulp task that updates all the assets in my project by executing a shell script. The problem is that it executes as expected and then just hangs.
'use-strict';
var gulp = require('gulp'),
gutil = require('gulp-util');
exec = require('child_process').exec;
var foreach = require('gulp-foreach');
gulp.task('update-assets', function () {
exec('./update_assets.sh', {cwd: 'assets'}, function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
});
gulp.task('default', ['update-assets'], function() {
gulp.start('update-assets');
});
This is because of the nature of exec(). What exec() does it allows the command you give it to "take over" the current process. What you can do is instead try something like child_process.spawn . If it is a daemon process.
Take a good look at the Child_Process documentation. I think that this should help you get a good start.
Other options that may be helpful include modifying the script to throw exit codes for Gulp to recognize, or using timeouts to know when a gulp task has terminated.
UPDATE: Alternatively, you could use this, which is what I found worked for me when running a web server.
shell.exec('./update_assets.sh', {async:true} );

browser-sync + gulp reloading in chrome

Before asking here i tried to find similar subject on overstockflow but it didn't help much. So, here is my subject. I'm using browser-sync + gulp and have problems with reload and watch. I have gulpfile and when I run gulp, it should watch and reload the all changes that happens but doesn't. It compiles but stop watching farther and gives me notification. I have to reload my page in browser manually what is not handy, Here is my code:
var gulp = require('gulp'),
jade = require ('gulp-jade'),
stylus = require ('gulp-stylus'),
watch = require ('gulp-watch'),
plumber = require('gulp-plumber'),
browserSync = require ('browser-sync').create(),
poststylus = require ('poststylus'),
lost = require ('lost');
// JADE
gulp.task('jade', function(){
return gulp.src('app/jade/*.jade')
.pipe(plumber())
.pipe(jade({pretty:true}))
.pipe(gulp.dest('build/'))
});
// STYLUS
gulp.task('stylus', function(){
return gulp.src('app/stylus/*.styl')
.pipe(plumber())
.pipe(stylus({use:[poststylus(['lost'])]}))
.pipe(gulp.dest('build/css'))
});
gulp.task('browser-watch', ['jade', 'stylus'], browserSync.reload);
gulp.task('serve', function(){
browserSync({
server: {
baseDir: './'
}
});
gulp.watch('app/jade/*.jade', 'app/stylus/*.styl', ['browser-watch']);
});
// DEFUALT
gulp.task('default', ['browser-watch', 'serve']);
here is notification:
$ gulp
[20:34:23] Using gulpfile c:\Users\Bogdan\Desktop\projects\lost\gulpfile.js
[20:34:23] Starting 'jade'...
[20:34:23] Starting 'stylus'...
[20:34:23] Starting 'serve'...
[20:34:23] 'serve' errored after 239 μs
[20:34:23] TypeError: object is not a function
at Gulp.<anonymous> (c:\Users\Bogdan\Desktop\projects\lost\gulpfile.js:31:2)
at module.exports (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at c:\Users\Bogdan\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#removeSelf is deprecated. Use Node#remove.
[20:34:23] Finished 'jade' after 412 ms
[20:34:23] Finished 'stylus' after 390 ms
any idea what i'm doing wrong?
Try this: Deprecate container#remove and node#removeSelf. Fixes #191.
I know this part is wrong in your 'serve' task:
gulp.watch('app/jade/*.jade', 'app/stylus/*.styl', ['browser-watch']);
should put the sources in an array to watch 'multiple files'
gulp.watch(['app/jade/*.jade', 'app/stylus/*.styl'], ['browser-watch']);
On another note, I didn't know about 'poststylus'. That looks awesome! Good luck!
The issue is not in poststylus but in lost plugin, its 100%. The version of lost that you use now in your project used deprecated methods of postcss.
Try to delete it from your package and then to add it (or simply update):
sudo npm uninstall --save-dev lost
sudo npm install --save-dev lost
It worked for me - the notification of deprecated removeSelf disappeared.
The issue was solved 2 days ago: https://github.com/corysimmons/lost/pull/169

Gulp-Shell is not executing any commands

I'm trying to execute something using gulp-shell. My gulfile.js contains the following content:
var gulp = require('gulp'),
shell = require('gulp-shell');
gulp.task('test', function() {
shell(['echo test']);
});
Then I run it calling gulp test. This is the output I get:
Using gulpfile ~/gulpfile.js
Starting 'test'...
Finished 'test' after 2.62 ms
There's no output for my echo call.
I'm using an Ubuntu 14 VM that I connected to, using Putty.
Anyone got an idea what's wrong?
That's because it's not the good way to use gulp-shell.
Try this, as seen in the gulp-shell README.
var gulp = require('gulp'),
shell = require('gulp-shell');
gulp.task('test', shell.task([
'echo test'
]));
For the record, if you want to pipe gulp-shell, per specified in the doc:
gulp.task('myGulpTask', [], function() {
return gulp.src('gulpfile.js', {read: false})
.pipe(shell('echo "This works too"'));
});

Gulp Watch and Nodemon conflict

Short of it: started using Gulp recently (convert from Grunt), and am trying to use both Gulp's default watch task (not gulp-watch from npm) for SASS/JS/HTML and gulp-nodemon (from npm) to restart an Express server upon changes. When running just gulp watch, it works fine; and when running gulp server (for nodemon) that works fine. However, using both together (shown below in the configuration of the default task), the watch stuff isn't working. The task is running, and on the CLI gulp shows 'Starting' and 'Finished' for the watch tasks, but the files don't update.
Relevant task configurations:
Concat javascript:
gulp.task('js:app', function(){
return gulp.src([
pathSource('js/application/modules/**/*.js'),
pathSource('js/application/_main.js')
])
.pipe(concat('application.js'))
.pipe(gulp.dest('./build/assets/js')).on('error', utils.log);
});
Nodemon, restart on changes to express app:
gulp.task('express', function(){
return nodemon({script:'server.js', ext:'js', cwd: __dirname + '/express', legacyWatch: true})
.on('restart', function(){
//gulp.run('watch'); // doesn't work :(
});
});
Watch javascript changes, and run js:app for concat'ing.
gulp.task('watch', function(){
gulp.watch(pathSource('js/application/**/*.js'), ['js:app']);
});
Default task, to initialize gulp watch and nodemon simultaneously:
gulp.task('default', ['watch', 'express']);
If anyone has any ideas, thanks in advance!
gulp.run calls have been deprecated, so I'd try a different approach. Since you're already using gulp, may I suggest giving gulp-nodemon a try?
As per gulp-nodemon documentation, you can pass it an array of tasks to execute:
UPDATE: Here's the full gulpfile.js file, together with a working sample on github.
'use strict';
// Main dependencies and plugins
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');
var assets = 'assets/js/**/*.js';
var publicDir = 'public/javascripts';
// Lint Task
gulp.task('lint', function () {
return gulp.src(assets)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Concatenate and minify all JS files
gulp.task('scripts', function () {
return gulp.src(assets)
.pipe(concat('global.js'))
.pipe(gulp.dest(publicDir))
.pipe(rename('global.min.js'))
.pipe(uglify())
.pipe(gulp.dest(publicDir));
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch(assets, ['lint', 'scripts']);
});
gulp.task('demon', function () {
nodemon({
script: 'server.js',
ext: 'js',
env: {
'NODE_ENV': 'development'
}
})
.on('start', ['watch'])
.on('change', ['watch'])
.on('restart', function () {
console.log('restarted!');
});
});
// Default Task
gulp.task('default', ['demon']);
This way, you spawn the watch task upon nodemon's start and ensure that the watch task is again triggered whenever nodemon restarts your app.
EDIT: seems you should be calling the on-change event from gulp-nodemon, which will handle compile tasks before the restart event triggers.
EDIT: It seems nodemon's on('change', callback) is removed from their API
FWIW, it seems that using the cwd parameter on gulp-nodemon's configuration actually sets the entire gulp cwd to that directory. This means future tasks will be executed in the wrong directory.
I had this problem when running gulp watch tasks on my frontend server at the same time as nodemon tasks on my backend server (in the same gulpfile), there was a race condition wherein if the nodemon command was executed first, the frontend stuff would actually build into (Home)/backend/frontend instead of (Home)/frontend, and everything would go pearshaped from there.
I found that using watch and script params on gulp-nodemon worked around this (although it still looks like nodemon is watching my entire project for changes rather than the built backend directory).