Run Gulp task before build in VS Code - asp.net-core

I have a new empty .NET Core project. Can I automatically run Gulp tasks before a build in VS Code?
I can run the styles task manually by doing VS Code package manager -> Tasks: Run Task -> gulp -> gulp: styles, but when I do build it does not run.
/// <binding beforebuild="styles"></binding>
var gulp = require('gulp');
var gulpless = require('gulp-less');
gulp.task('styles', function () {
var srcfile = 'styles/Styles.less';
var dest = 'wwwroot';
return gulp
.src(srcfile)
.pipe(gulpless())
.pipe(gulp.dest(dest));
});
I got this code from some tutorials online and everything works except the first line.
Is this supposed to work in VS Code or is this only a luxury of Visual Studio?

//In this case we’re adding the a task before other task.
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
// ...
})
//And in this case we’re adding for example the browserSync task.
gulp.task('watch', ['browserSync'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
//We’ll also want to make sure sass runs before watch so the CSS will already be the latest whenever we run a Gulp command.
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
});
Read this document : Gulp for Beginners

Related

How to migrate to gulp v4 from 3?

gulp.watch('watch', function() {
watch('./app/index.html', function() {
gulp.start('html');
});
});
I want to run a task named 'html' when any changes to the file are made. It worked in the previous version of gulp for as for now it generates the following error.
gulp.start is not a function.
I can't find any way to achieve this in the newer version of the gulp. All I found that I need to change it to function, but I can't seem to find what I need to change and how?
The rest of the code is as follows
var gulp = require("gulp"),
watch = require('gulp-watch');
gulp.task('default', function(done){
console.log("You created the default task");
done();``
});
gulp.task('html', function(done){
console.log('modifying the html');
done();
});
gulp.watch('watch', function() {
watch('./app/index.html', function() {
gulp.start('html');
});
});
You don't need to convert your tasks to named functions - although that is considered best practice and is easy to do.
To fix your watch task, try:
gulp.watch('watch', function(done) {
watch('./app/index.html', gulp.series('html'));
done();
});
To change to named functions:
function html(done) {
gulp.src(….)
console.log('modifying the html');
done();
};
function watch(done) {
watch('./app/index.html', gulp.series('html'));
done();
});
exports.html= gulp.series(html);
exports.default = gulp.series(watch);
Note that now the watch task is not called as a string, i.e., 'watch', but just watch.
In exports.html, the gulp.series is not strictly needed as there is only one task there so exports.html= html; is sufficient.
And you only need to export a task if you wish to call it directly (as from the command line gulp html for example). If say the html task will only be called internally by other tasks then there is no need to export it.

Exit with error after a task loaded by gulp-tasks failed

I am working with magento2-frontools and try to solve this issue:
https://github.com/SnowdogApps/magento2-frontools/issues/231
The problem is, that gulp styles should have a non-zero exit code in case of errors, but it exits with 0.
The gulp file looks like this:
// Tasks loading
require('gulp-task-loader')({
dir : 'task',
plugins: plugins,
configs: config
});
And the styles.js task like this:
'use strict';
module.exports = function() { // eslint-disable-line func-names
// Global variables
const gulp = this.gulp,
plugins = this.opts.plugins,
config = this.opts.configs,
themes = plugins.getThemes(),
streams = plugins.mergeStream();
// Generate all necessary symlinks before styles compilation, but ony if not a part of tasks pipeline
if (!plugins.util.env.pipeline) {
plugins.runSequence('inheritance');
}
// Loop through themes to compile scss or less depending on your config.json
themes.forEach(name => {
streams.add(require('../helper/scss')(gulp, plugins, config, name));
});
return streams;
};
(it can all be found on GitHub)
If have seen this approach to solve the problem:
.once("error", function () {
this.once("finish", () => process.exit(1));
})
But where can I add that code?
Just the --ci flag has to be used.

Running Knex Migrations Between Mocha Tests

I was using Mocha to test my Nodejs app with a test database. In order to reset the DB before each test I had the following code, which worked perfectly:
process.env.NODE_ENV = 'test';
var knex = require('../db/knex');
describe("Add Item", function() {
beforeEach(function(done) {
knex.migrate.rollback()
.then(function() {
knex.migrate.latest()
.then(function() {
return knex.seed.run()
.then(function() {
done();
});
});
});
});
...
I've since switched from mocha to mocha-casperjs for my integration tests, and now the knex migrations won't run. I'm given this error message with the exact same before each hook:
undefined is not an object (evaluating 'knex.migrate.rollback')
phantomjs://platform/new-item.js:12:17
value#phantomjs://platform/mocha-casperjs.js:114:20
callFnAsync#phantomjs://platform/mocha.js:4314:12
run#phantomjs://platform/mocha.js:4266:18
next#phantomjs://platform/mocha.js:4630:13
phantomjs://platform/mocha.js:4652:9
timeslice#phantomjs://platform/mocha.js:12620:27
I'm pretty sure that migration functionality is not included in webpack build. If you go to http://knexjs.org/ open up debug console and checkout different clients e.g. mysql.migrate you see that there are no functions declared at all.
Actually you can check it out with node too if you explicitly load webpack build instead of node lib.
// load webpack build instead of node build...
let knex = require('knex/build/knex')({client : 'pg'});
console.log(knex.migrate);
// outputs: {}
So... the question is why are you trying to run your tests on PhantomJS browser instead of node.js?

Gulp is getting stuck on my task

I'm pretty new to gulp, so I'm stumbling around a bit. I was fine up until the point I wanted to add sourcemaps to my project, now my gulp gets stuck after running the default task and doesn't seem like it will ever start my 'css' task. Since, I'm not getting an error (my gulp task is just stalling) I can't narrow down what's wrong with my file. Here's my gulpfile code and a picture of what's going on in my terminal. I've waited for a good 5 minutes for it to start 'css' and throw an error, but nothing is progressing.
As an edit note, I did change my sass files so that it would trigger the 'css' task to update my styles. I am still having the same issue where it is stuck after it runs the default task and does not start 'css'.
var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function() {
return sass('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('styles.css'))
.on('error', sass.logError)
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});
gulp.task('default', function() {
gulp.watch('scss/**/*.scss',['css']);
});
terminal window

Catching and handling Uglify errors when using Gulp

My Gulp setup is otherwise working fantastically, but it stops if there's an error with my JS files. Until Gulp 4 is finally released, we're all stuck using the less than perfect error system in Gulp... So how can I catch Uglify's errors?
gulp.task('js', function() {
return gulp
.src(inputJS)
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify(uglifyOptions))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(outputJS))
});
According to the Uglify documentation, gulp-uglify emits an 'error' event if it is unable to minify a specific file. Wherever possible, the PluginError object will contain the following properties: fileName, lineNumber, message.
The closest I've gotten it to working is: .on('error', function(uglify) { console.error(uglify.message) })), but it ends up with the above Gulp task ceasing to do any more.
Edit: I realise that there's a number of Gulp extensions that help when dealing with error handling (eg. Gulp-Util, Stream-Combiner2, Gulp-Plumber, etc.) but I don't wish to install a whole new extension just for Uglify (I'm handling my Sass errors just fine without one).
It seems the solution was very simple:
.pipe(uglify(uglifyOptions).on('error', function(uglify) {
console.error(uglify.message);
this.emit('end');
}))
Almost exactly what Jeffwa suggested, but no need for gulp-plumber. The reason my attempt was stopping is because Gulp watch tasks wait until they receive end (see: https://github.com/gulpjs/gulp/issues/259).
Maybe gulp-plumber will help.
var plumber = require('gulp-plumber');
gulp.task('js', function() {
return gulp
.src(inputJS)
.pipe(plumber(function(error) {
console.error(error.message);
gulp.emit('finish');
}))
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify(uglifyOptions))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(outputJS))
});
That should catch any errors emitted and write them to the console.