gulp-angular-templatecache fails to find the the template file it creates - gulp

We are developing a web application using AngularJS and ASP.NET Web API. There is a dev machine set up with GoCD that deploys the app after every commit to dev branch in our github repo. We are using gulp to build the frontend but after the last commit one of the tasks fails to complete.
It's pretty clear that this particular commit has nothing to do with it since it's a trivial 9 lines of css fixes. Against all logic we decided to revert but it didn't help. Gulp completes fine on Windows 10 and Linux but fails on Windows Server 2012. It's not clear why, as it was working perfectly fine for 3 months.
The task that fails:
gulp.task('partials', function () {
return gulp.src([
path.join(conf.paths.src, '/app/**/*.html'),
path.join(conf.paths.tmp, '/serve/app/**/*.html')
])
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe($.angularTemplatecache('templateCacheHtml.js', {
module: 'portal',
root: 'app'
}))
.pipe(gulp.dest(conf.paths.tmp + '/partials/'));
});
The angularTemplateCache fails with the error message that it cannot find '..src/app/templateCacheHtml.js' but this is the file that it is supposed to create and then move to '/partials/templateCacheHtml.js'.
We've tried to find some clues as to what causes it but there is nothing even remotely connected to that problem. It works perfectly on our local machines.

There is an open issue on GitHub discussing this exact problem: https://github.com/miickel/gulp-angular-templatecache/issues/124
Apparently gulp-header (a dependency of gulp-angular-templatecache) was updated yesterday that seemed to break the plugin.
Add the following to your package.json:
"gulp-header": "1.8.2",
and run "npm install" should fix the problem.

Related

grunt build getting stuck in running task (ngtemplates:dist)

This is on an existing project where I have setup npm,bower. "grunt build --force" worked fine in the initial run.
A few days later, with changes in some files (.html, .css, .py) I've been trying to run the "grunt build" / "grunt build --force". After running, the progress is stuck at ""running "ngtemplates:dist" (ngtemplates) task"" and has never ended.
Don't know what seems to be the problem.
The cause turned out to be an extra double quote symbol in one of the HTML

gulp Live reload for server side

I have a developed gulp file with both browser-sync and live reload. this gulp file works perfectly for my requirements. for the base idea, I have a root folder in my Apache server and inside it I have my project folders.
--public
---proj1
---proj2
I'm using my gulp file to watch and build project folder and live reload.
currently I'm using browser-sync:
browserSync.init({
proxy: {
target: "localhost/newTest/public", // can be [virtual host, sub-directory, localhost with port]
ws: true // enables websockets
}
});
every changes done inside the 'public' folder, will affect the live reload. if I have opened both projects in two separate windows and do some changes on one project both windows are refreshing(live-reloading). I do not need that to happen. only one window should be live-reloading. how can I do it.
reason:
I want to implement this to server side level for many users, how can I do it? A change from a user should not affect other users.

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author

I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.
My server runs using php artisan serve command.
I was seeing the error message in this question's title and this solution worked for me:
Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).
Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.
Below is what the changes looked like in my project:
If the page uses a production/minified build of Vue.js, devtools
inspection is disabled by default so the Vue pane won't show up.
To make it work for pages opened via file:// protocol, you need to
check "Allow access to file URLs" for this extension in Chrome's
extension management panel.
I had to restart the chrome, and it worked :-)
If your using CDN; make sure your not using a production (minified) build of the library.
Use: https://unpkg.com/vue#2.4.4/dist/vue.js
Instead of: https://unpkg.com/vue#2.4.4/dist/vue.min.js
You might need to do Ctrl+Alt+I for it to show up the first time. (Source)
Updated Aug 2022
So apparently as #kissu said, the answer below causes the released code to be an unoptimized one. This might be different than what you want if you want to check production code while being able to check Vue Dev Tools.
Just be aware of it. Unless you don't mind checking the released code in an unoptimized bundle, then the following script is fine. If you don't like the Vue.config.devtools value being static, it might be time to consider env variables or something similar.
Here's how to setup Environtment Variables in Vue
Alternative answer for Vue CLI 3.x
Besides what #NathanWailes has said, this is an alternative which allows the Dev Tools to be available through scripts instead of writing it in your main Vue entry (which is usually main.js or index.js).
You can do this by simply adding this script to package.json
scripts: {
"start:dev": "vue-cli-service build --mode=development"
}
Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.
Then you can run using npm run start:dev and check the file in your dist/ folder! ;)
You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue#2.3.2
When using Laravel just make sure you run the proper webpack for your environment for development . Running
npm run watch
should build Vue with debug mode on. Using
npm run production
minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.
For me Installing latest Vue dev tools - link and enabling 'Allow access to file URLs' in extension settings resolved the issue.
make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62
Just add into vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
delete package-lock.json, node_modules, run npm i and VueJS Devtool will be working
you could try to set environment variable NODE_ENV to 'development'
(e.g. set NODE_ENV=development on Windows or export NODE_ENV="development" under Linux)
before launching Vue dev server.
In my case for Laravel 9 fresh installation, I forgot to run sail npm run dev.
If you're using Vite you can configure your environment directory via shared options. If you change that and have NODE_ENV set to production you'll receive this message when trying to inspect your app.

Gulp 4 watcher is running but does not detect changes

I'm having the following file structure:
/ src
-- app.less
/ gulp
-- index.js
-- gulpfile.js
This file structure is mounted in a vagrant box in /vagrant which means the path to app.less becomes /vagrant/src/app.less. Yes, I've checked this.
gulpfile.js
require('./gulp');
index.js
var paths = {
less: '/vagrant/src/app.less'
};
gulp.task('less', function () {
console.log('less function running');
return gulp.src(paths.less)
.pipe(less());
});
gulp.task('watch:styles', function () {
console.log('watch function running');
gulp.watch(paths.less, gulp.series('less'));
});
gulp.task('watch', gulp.parallel('watch:styles'));
gulp -v returns:
[10:02:05] CLI version 0.4.0
[10:02:05] Local version 4.0.0-alpha.1
gulp watch returns:
[09:45:20] Using gulpfile /vagrant/gulpfile.js
[09:45:20] Starting 'watch'...
[09:45:20] Starting 'watch:styles'...
watch function running
I've been using Gulp 4 for over 2 months without problems with the watcher. Since last week the watcher is not responding to files that are being changed. I've tried several editors, I've tried multiple paths like '/vagrant/**/*.less' and '../src/*.less' and even the absolute path to app.less '/vagrant/src/app.less', none of them worked.
After some research I found several issues on the github repo of Gulp 4 about the watcher. Yet, I can't figure out what the problem is. Maybe I'm overlooking an error in my code or something new in the docs, but I'm trying to solve this since yesterday morning without any luck.
It appears you're using Vagrant. If you have Gulp running on your Vagrant machine instead of on the host it won't detect any changes to files that you make on the host. This is because the events that notify the OS about filesystem changes don't propagate into the VM.
If this is the case, the solution is to simply run Gulp wherever you actually make changes to the files (i.e. if you make the changes on the VM, run it on the VM, if you make changes on the host, run Gulp on the host).
Also maybe make the path relative, instead of tying your implementation to your Vagrant box. i.e. less: './src/app.less'.

Laravel Elixir: Gulp watch fires without any interaction

I have the following set up within the assets/sass folder:
app.scss
- partials
_settings.scss
_main.scss
Now the issue is that when i run gulp watch, it runs all ok as a normal gulp, but then it just repeats the sass process, even when I have not touched anything, have anything in the files etc
It constantly runs the following over and over, sometime constantly or after a few seconds: The below is the loop thats is spat out within the terminal.
[20:49:30] Starting 'sass'...
[20:49:30] Running Sass: resources/assets/sass/app.scss
[20:49:30] gulp-notify: [Laravel Elixir] Sass Compiled!
[20:49:30] Finished 'sass' after 23 ms
Now doing several tests to see whats causing this, if i have DONT have any files with in the partials directory and just have code within the app.scssthen the gulp watchruns and simply waits for changes.
But as soon as I add a file within the sass folder or in the partials folder the gulp watch runs as I would expect, BUT this then never stops running the script...
I am using a simple elixir set up, for now:
elixir(function(mix) {
mix.sass('app.scss', 'public/js/main.css');
});
Any ideas why this is.
Running on a Homestead VM latest
Using latest elixir version
Laravel v.5.1.13
EDIT: Update
I was doing this outside the VM so thought to try to run this through the VM and it seems to be OK and run as expected...
I am running this outside the VM and so when run within the VM its runs as expected. But i do get the Error in plugin 'gulp-notify' not found: notify-senderror, but i can turn this off via adding process.env.DISABLE_NOTIFIER = true; to the top of the gulp file.