gulp-pug | Gulp plugin for compiling Pug templates

I've published an npm package and gulp plugin here to address this exact issue: https://www.npmjs.com/package/gulp-url-builder

I had the same desire and wrote a function that uses gulp-rename to rewrite the file paths as they're being processed.

After you run pug(), run rename() with this function:

There are 2 things you didn't get right.

1. You made a typo, or maybe don't understand how gulp-load-plugins works.

If your plugin name is gulp-post-css, then it becomes gulpPlugins.postCss. However, that plugin name is gulp-postcss, so it will be:

@babel/preset-env is not the same thing as @babel/preset-es2015 - the former turns plugins on and off based on your targeted browser compatibility metrics (which you can customize).

The docs say that if you don't explicitly specify the targets in the preset's config, the following defaults will be used:

Sidenote, if no targets are specified, @babel/preset-env behaves exactly the same as @babel/preset-es2015, @babel/preset-es2016 and @babel/preset-es2017 together (or the deprecated babel-preset-latest).

@babel/preset-es2015 alone, on the other hand, will only compile features that were added in the ES2015 version of the spec. This does not include newer features, such as async/await! If you want all of the features added since then, you will have to add all of the yearly presets. For this reason, it's recommended that you use the env preset.

If you switch https://babeljs.io to the @babel/preset-env preset (which is a seperate section below the list of yearly presets), you get the same output.

This is truly a magic of stackoverflow. I find solution in 5-15 mins after creating a question :).

Solition for me was in rewriting watch task to this format:

I think this is because autoprefixer does not return a stream.

Try using gulp-autoprefixer instead:

Figured it out. BrowserSync looks for an 'index.html' file to start up and we get the 'cannot GET /' error because it's looking for something it doesn't see. So wherever our pug/html files are located, we must tell the pug function + the watch function where they are and then run BrowserSync. After it's run, you will still see the error however it's really working. All you have to do is link to the file so in my browser after localhost:3000 I would type the location of my file, so it would be 'localhost:3000/dist/about.html' After that, BrowserSync works. :)

Use a process manager that will take care of environment.

few options are

forever(https://www.npmjs.com/package/forever)

with this, you start the website on localhost using forever start

PM2 (https://www.npmjs.com/package/pm2)

with this, you start the website on localhost using pm2 start

With process managers, you are abstracted from the environment specifications until you need to have something more specific.

Append reload after each watch call. You have initiated browser sync, but you need to let it know when to reload. And it should reload on any file change. So add it after watch()

Apprently I was updating karma config with zone.js details, instead it should be updated on tests.ts, and also it's a good idea to compare with a brand new application and try to keep the differences between them as minimal as possible.

As we update from one Angular version to another, we initially started with version 2 as we progressed to version 5 there were number of differences, and any one of those could break.

I have also compared the files for package.json, karma.config.js, tsconfig.json .

And it made the trick.