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
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());
});
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} );
Normally we can run gulp task from console via something like gulp mytask. Is there anyway that I can pass in parameter to gulp task? If possible, please show example how it can be done.
It's a feature programs cannot stay without. You can try yargs.
npm install --save-dev yargs
You can use it like this:
gulp mytask --production --test 1234
In the code, for example:
var argv = require('yargs').argv;
var isProduction = (argv.production === undefined) ? false : true;
For your understanding:
> gulp watch
console.log(argv.production === undefined); <-- true
console.log(argv.test === undefined); <-- true
> gulp watch --production
console.log(argv.production === undefined); <-- false
console.log(argv.production); <-- true
console.log(argv.test === undefined); <-- true
console.log(argv.test); <-- undefined
> gulp watch --production --test 1234
console.log(argv.production === undefined); <-- false
console.log(argv.production); <-- true
console.log(argv.test === undefined); <-- false
console.log(argv.test); <-- 1234
Hope you can take it from here.
There's another plugin that you can use, minimist. There's another post where there's good examples for both yargs and minimist: (Is it possible to pass a flag to Gulp to have it run tasks in different ways?)
If you want to avoid adding extra dependencies, I found node's process.argv to be useful:
gulp.task('mytask', function() {
console.log(process.argv);
});
So the following:
gulp mytask --option 123
should display:
[ 'node', 'path/to/gulp.js', 'mytask', '--option', '123']
If you are sure that the desired parameter is in the right position, then the flags aren't needed.** Just use (in this case):
var option = process.argv[4]; //set to '123'
BUT: as the option may not be set, or may be in a different position, I feel that a better idea would be something like:
var option, i = process.argv.indexOf("--option");
if(i>-1) {
option = process.argv[i+1];
}
That way, you can handle variations in multiple options, like:
//task should still find 'option' variable in all cases
gulp mytask --newoption somestuff --option 123
gulp mytask --option 123 --newoption somestuff
gulp mytask --flag --option 123
** Edit: true for node scripts, but gulp interprets anything without a leading "--" as another task name. So using gulp mytask 123 will fail because gulp can't find a task called '123'.
There's an official gulp recipe for this using minimist.
https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md
The basics are using minimist to separate the cli arguments and combine them with known options:
var options = minimist(process.argv.slice(2), knownOptions);
Which would parse something like
$ gulp scripts --env development
More complete info in the recipe.
Passing a parameter to gulp can mean a few things:
From the command line to the gulpfile (already exemplified here).
From the main body of the gulpfile.js script to gulp tasks.
From one gulp task to another gulp task.
Here's an approach of passing parameters from the main gulpfile to a gulp task. By moving the task that needs the parameter to it's own module and wrapping it in a function (so a parameter can be passed).:
// ./gulp-tasks/my-neat-task.js file
module.exports = function(opts){
opts.gulp.task('my-neat-task', function(){
console.log( 'the value is ' + opts.value );
});
};
//main gulpfile.js file
//...do some work to figure out a value called val...
var val = 'some value';
//pass that value as a parameter to the 'my-neat-task' gulp task
require('./gulp-tasks/my-neat-task.js')({ gulp: gulp, value: val});
This can come in handy if you have a lot of gulp tasks and want to pass them some handy environmental configs. I'm not sure if it can work between one task and another.
If you want to use environment params and other utils as well such as log, you can use gulp-util
/*
$npm install gulp-util --save-dev
$gulp --varName 123
*/
var util = require('gulp-util');
util.log(util.env.varName);
Update
gulp-util is now deprecated. You can use minimist instead.
var argv = require('minimist')(process.argv.slice(2));
console.dir(argv);
#Ethan's answer would completely work. From my experience, the more node way is to use environment variables. It's a standard way to configure programs deployed on hosting platforms (e.g. Heroku or Dokku).
To pass the parameter from the command line, do it like this:
Development:
gulp dev
Production:
NODE_ENV=production gulp dev
The syntax is different, but very Unix, and it's compatible with Heroku, Dokku, etc.
You can access the variable in your code at process.env.NODE_ENV
MYAPP=something_else gulp dev
would set
process.env.MYAPP === 'something_else'
This answer might give you some other ideas.
Here is my sample how I use it. For the css/less task. Can be applied for all.
var cssTask = function (options) {
var minifyCSS = require('gulp-minify-css'),
less = require('gulp-less'),
src = cssDependencies;
src.push(codePath + '**/*.less');
var run = function () {
var start = Date.now();
console.log('Start building CSS/LESS bundle');
gulp.src(src)
.pipe(gulpif(options.devBuild, plumber({
errorHandler: onError
})))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulpif(options.minify, minifyCSS()))
.pipe(gulp.dest(buildPath + 'css'))
.pipe(gulpif(options.devBuild, browserSync.reload({stream:true})))
.pipe(notify(function () {
console.log('END CSS/LESS built in ' + (Date.now() - start) + 'ms');
}));
};
run();
if (options.watch) {
gulp.watch(src, run);
}
};
gulp.task('dev', function () {
var options = {
devBuild: true,
minify: false,
watch: false
};
cssTask (options);
});
If you use gulp with yargs, notice the following:
If you have a task 'customer' and wan't to use yargs build in Parameter checking for required commands:
.command("customer <place> [language]","Create a customer directory")
call it with:
gulp customer --customer Bob --place Chicago --language english
yargs will allway throw an error, that there are not enough commands was assigned to the call, even if you have!! —
Give it a try and add only a digit to the command (to make it not equal to the gulp-task name)... and it will work:
.command("customer1 <place> [language]","Create a customer directory")
This is cause of gulp seems to trigger the task, before yargs is able to check for this required Parameter. It cost me surveral hours to figure this out.
Hope this helps you..
Here is another way without extra modules:
I needed to guess the environment from the task name, I have a 'dev' task and a 'prod' task.
When I run gulp prod it should be set to prod environment.
When I run gulp dev or anything else it should be set to dev environment.
For that I just check the running task name:
devEnv = process.argv[process.argv.length-1] !== 'prod';
I know I am late to answer this question but I would like to add something to answer of #Ethan, the highest voted and accepted answer.
We can use yargs to get the command line parameter and with that we can also add our own alias for some parameters like follow.
var args = require('yargs')
.alias('r', 'release')
.alias('d', 'develop')
.default('release', false)
.argv;
Kindly refer this link for more details.
https://github.com/yargs/yargs/blob/HEAD/docs/api.md
Following is use of alias as per given in documentation of yargs. We can also find more yargs function there and can make the command line passing experience even better.
.alias(key, alias)
Set key names as equivalent such that updates to a key will propagate
to aliases and vice-versa.
Optionally .alias() can take an object that maps keys to aliases. Each
key of this object should be the canonical version of the option, and
each value should be a string or an array of strings.
There is certainly a shorter notation, but that was my approach:
gulp.task('check_env', function () {
return new Promise(function (resolve, reject) {
// gulp --dev
var env = process.argv[3], isDev;
if (env) {
if (env == "--dev") {
log.info("Dev Mode on");
isDev = true;
} else {
log.info("Dev Mode off");
isDev = false;
}
} else {
if (variables.settings.isDev == true) {
isDev = true;
} else {
isDev = false;
}
}
resolve();
});
});
If you want to set the env based to the actual Git branch (master/develop):
gulp.task('set_env', function (cb) {
exec('git rev-parse --abbrev-ref HEAD', function (err, stdout, stderr) {
const git__branch = stdout.replace(/(\r\n|\n|\r)/gm, ""),
regex__feature = new RegExp('feature/feature-*');
if (git__branch == "develop") {
log.info("👨💻Develop Branch");
isCompressing = false;
} else if (git__branch == "master") {
log.info("🌎Master Branch");
isCompressing = true;
} else if (regex__feature.test(git__branch) === true){
log.info("✨Feature Branch");
isCompressing = true;
}else{
//TODO: check for other branch
log.warn("Unknown " + git__branch + ", maybe hotfix?");
//isCompressing = variables.settings.isCompressing;
}
log.info(stderr);
cb(err);
});
return;
})
P.s. For the log I added the following:
var log = require('fancy-log');
In Case you need it, thats my default Task:
gulp.task('default',
gulp.series('set_env', gulp.parallel('build_scss', 'minify_js', 'minify_ts', 'minify_html', 'browser_sync_func', 'watch'),
function () {
}));
Suggestions for optimization are welcome.
Just load it into a new object on process .. process.gulp = {} and have the task look there.
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).