grunt-contrib-sass causing Grunt to reload itself - sass

I've set up a Vagrant box (precise32) to run the usual Grunt stuff but it's taking way too long.
Running "watch" task
Waiting...OK
>> File "../../home/vagrant/app/wp-content/themes/testcss/_vars.scss" changed.
Running "sass:dist" (sass) task
File "/home/vagrant/app/wp-content/themes/test/css/styles.css" created.
Done, without errors.
Completed in 40.392s at Mon Dec 02 2013 11:34:02 GMT+0000 (UTC) - Waiting...
OK
>> File "../../home/vagrant/app/wp-content/themes/test/css/styles.css" changed.
Completed in 0.000s at Mon Dec 02 2013 11:34:02 GMT+0000 (UTC) - Waiting...
I've tried this on the shared folder and a native folder within the VM with no change. I'm using the grunt-contrib-sass plugin although I've also tried grunt-sass and it takes a similar amount of time. The watch event fires quickly but then the VM consumes all spare CPU utilisation until the CSS compile completes.
Running sass manually takes ~2 seconds
Any idea where to go from here?
package.json
{
"name": "www",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-autoprefixer": "~0.4.0",
"grunt-concurrent": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-imagemin": "~0.3.0",
"grunt-contrib-jshint": "~0.7.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-google-cdn": "~0.2.0",
"grunt-newer": "~0.5.4",
"grunt-ngmin": "~0.0.2",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "~0.2.0",
"grunt-usemin": "~2.0.0",
"jshint-stylish": "~0.1.3",
"load-grunt-tasks": "~0.2.0",
"time-grunt": "~0.2.1",
"karma-ng-scenario": "~0.1.0",
"grunt-karma": "~0.6.2",
"karma-chrome-launcher": "~0.1.0",
"karma-script-launcher": "~0.1.0",
"karma-firefox-launcher": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-jasmine": "~0.1.3",
"requirejs": "~2.1.9",
"karma-requirejs": "~0.2.0",
"karma-coffee-preprocessor": "~0.1.0",
"karma-phantomjs-launcher": "~0.1.0",
"karma": "~0.10.5",
"karma-ng-html2js-preprocessor": "~0.1.0",
"grunt-contrib-sass": "~0.5.1",
"grunt-php": "~0.3.0"
},
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"test": "grunt test"
}
}
EDIT:
I've found out roughly where the problem lies. It is that whenever my grint-contrib-sass task is triggered from grunt-contrib-watch it actually reloads all of Grunt's modules. I cannot see why it is doing this nor why this would be necessary. I've changed the question title to reflect this.

Unless you are giving a lot of cpu to vagrant (normally it use 1 cpu core i believe), i will expect grunt to run slower than your host machine. If you are not using nfs then slow IO will be the next suspect.
We use grunt in vagrant as well but only with a small number of packages (mostly contrib plugin), on an iMac it takes about 2 second in vagrant, so your issue may indeed be the slow IO or certain package having to do a lot of file operations.
If you isolate your grunt watch to sass plugin alone, does it take the same amount of time when compare to running grunt sass manually? how about running on your host machine?
Another point to consider is try not to watch the files that will be generated by grunt, you might get into strange issues if a grunt task triggers another.

I've found out that this seems to be due to the spawn option. Setting this to false stops the whole reload.
I now have the problem that the watch reloads when the sass compiler task runs so that livereload on the watched css files isn't always working.

We've had mediocre success with this issue using jit-grunt. What we've done is we've replaced load-grunt-tasks with jit-gruntin Gruntfile.js. The execution of grunt serve went down from 20-30 seconds to less than 4 seconds. The bottleneck is now probably compass:server load and this is related to slow Shared folder.
Still doing Karma test runs without grunt (just using karma-cli) -- alot faster this way.

Related

#cypress/code-coverage Can't resolve '../self-coverage-helper' #cypress

I try to run in index.js of Cypress:
require('#cypress/code-coverage/task')
Getting this error:
Module not found: Error: Can't resolve '../self-coverage-helper' in 'C:\repo\patientstrength_codecover\node_modules\#cypress\code-coverage\node_modules\nyc'
Totally lost here. My package.json:
"nyc": "^15.1.0",
"cypress": "^5.0.0",
"cypress-istanbul": "^1.3.0",
"cypress-localstorage-commands": "^1.2.2",
"cypress-multi-reporters": "^1.2.4",
"#cypress/code-coverage": "^3.8.1",
"#babel/core": "^7.11.4",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-jsx": "^7.10.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
The issue was that we are using a "root" package.json with basic scripts like gulp, jest and well - also we tried to run Cypress from that root. And beside the coverage, it worked fine.
So we have:
/git/root/package.json
/git/root/solution1/package.json
/git/root/solution2/package.json
We solved the issue by simply install Cypress and all dependencies first (!) in the:
/git/root/solution1/package.json and /git/root/solution2/package.json solutions.
NOT in the /git/root/package.json.
The /git/root/package.json now only contains a script invoking the 2 Cypress installations. And later we merge the results. Sure some redundancy
The invoke script is as following:
"test:client1": "cd client1 && cd ClientApp && npm run coverage"
So very simple approach. What we couldn't solve is the redundancy regarding Cypress configuration and commands. That can be optimized.

Node js app crashing a couple seconds after running on heroku with no logs

When I deploy my build, the build always succeeds and runs too. However a couple seconds after running it crashes with no logs about why. I have tested locally using the heroku local web command and it works flawlessly. I have also used heroku bash to check node_modules to ensure all my dependencies have been installed correctly. I also tried to run via heroku bash but the same error occured. Node and npm versions are the same on both local and remote with versions node: >=10.16.0 and npm: >= 6.9.0. I have attempted to also copy my files (excluding package-lock.json and node_modules) into a new directory and use npm install and npm run start and still works as intended locally. Any ideas?
Update
I rolled back to a previous commit that was working using the heroku's rollback command and the website is up and running. I create a staging branch and pushed my changes so I am now working off of that. The thing is I just wish there was some kind of error message in the logs that would specify why its crashing because this has left me stumped for days.
another update
I installed ubuntu to test running my project on a linux OS to see if that would repro this issue but it still ran as normal.
** Final Update **
I managed to get things working by completely starting from scratch and adding one thing at a time. I know this isnt helpful but I would like to keep this question open because I still do not know what caused this issue.
package.json
{
"name": "hayewoodbotapi-v2",
"version": "0.0.0",
"scripts": {
"start": "npm run prod",
"build": "npm-run-all clean transpile",
"server": "node ./dist-server/bin/www",
"prod": "npm-run-all build server",
"transpile": "webpack && babel server --source-maps --out-dir dist-server",
"clean": "rimraf dist-server"
},
"dependencies": {
"#babel/node": "^7.2.2",
"babel-loader": "^8.1.0",
"cookie-parser": "~1.4.4",
"crypto-js": "^4.0.0",
"debug": "~2.6.9",
"ejs": "^3.0.1",
"express": "^4.17.1",
"express-generator": "^4.16.1",
"express-session": "^1.17.0",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"lance-gg": "^4.0.8",
"morgan": "~1.9.1",
"nodemon": "^2.0.3",
"npm-run-all": "^4.1.5",
"passport": "^0.4.1",
"passport-oauth": "^1.0.0",
"passport-twitch": "^1.0.3",
"pg": "^7.18.2",
"query-string": "^6.12.0",
"regenerator-runtime": "^0.13.5",
"request": "^2.88.2",
"rimraf": "^3.0.2",
"sequelize": "^5.21.5",
"sequelize-cli": "^5.5.1",
"socket.io": "^2.3.0",
"webpack": "^3.8.1"
},
"engines": {
"node": ">=10.16.0",
"npm": ">=6.9.0"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"eslint": "^3.16.1",
"express-swagger-generator": "^1.1.17"
}
}
Here are the logs via heroku. As you can see it is executing because I added a console.log statement to output the port.
2020-04-30T18:50:49.307843+00:00 app[web.1]: Successfully compiled 23 files with Babel.
2020-04-30T18:50:50.111523+00:00 app[web.1]:
2020-04-30T18:50:50.111537+00:00 app[web.1]: > hayewoodbotapi-v2#0.0.0 server /app 2020-04-30T18:50:50.111537+00:00 app[web.1]: > node ./dist-server/bin/www
2020-04-30T18:50:50.111538+00:00 app[web.1]:
2020-04-30T18:50:52.021984+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2020-04-30T18:50:52.021997+00:00 app[web.1]: designed for a production environment, as it will leak
2020-04-30T18:50:52.021998+00:00 app[web.1]: memory, and will not scale past a single process. 2020-04-30T18:50:52.028026+00:00 app[web.1]: PORT: 49175 2020-04-30T18:50:52.063057+00:00 app[web.1]: (node:138) [SEQUELIZE0004]
DeprecationWarning: A boolean value was passed to options.operatorsAliases.
This is a no-op with v5 and should be removed.
2020-04-30T18:50:52.063059+00:00 app[web.1]: (Use node --trace-deprecation ... to show where the
warning was created) 2020-04-30T18:50:52.243126+00:00 heroku[web.1]: State changed from starting to crashed
It turned out I just needed to upgrade node version and downgrade webpack version.

sass-brunch omits modified SCSS on live-reload

On my Phoenix project, I found a peculiar behavior of sass-brunch.
Here are the short descriptions of my problem:
It generates a correct app.css on the priv/static/css directory when the Phoenix server started in dev envrionment.
When I modify one of SCSS files, the app.css gets generated but lacks only the lines from the modified SCSS file. It keeps the lines from the unmodified files.
This problem occurs on Ubuntu 16.04, but not on macOS.
On the log file, I noticed an entry that may be related to this issue:
[debug] Duplicate channel join for topic "phoenix:live_reload" in Phoenix.LiveReloader.Socket. Closing existing channel for new join.
I don't see such a line on my Mac.
My environment:
Ubuntu 16.04 Desktop
Phoenix 1.2.5
Node.js 8.9.1
npm 5.5.1
Brunch 2.10.7
sass-brunch 2.10.4
My package.json:
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html"
},
"devDependencies": {
"babel-brunch": "6.0.6",
"brunch": "2.10.7",
"clean-css-brunch": "2.10.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "2.1.1"
}
}
[UPDATE]
I found an interesting fact.
When I edit SCSS files using vim, the app.css gets generated normally.
When I edit them using atom, things do not go well.
I found a workaround to my problem.
Put these lines to the brunch-config.js:
watcher: {
usePolling: true
}
As the documentation of Brunch says, watcher gets slower but can be more reliable by setting true to this option.
The usePolling option is passed to chokidar, whose document says:
usePolling (default: false). Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations.

Gulp.watch will not keep watching files.

I have the following code,
http://paste.ubuntu.com/6824071/
but when I run 'gulp' in cli it just runs the tasks and quits. It dosen't stay to watch the files and recompile.
Ezras-MacBook-Air:no1fitness-sandbox Ezra$ gulp
[gulp] Using file /www/no1fitness-sandbox/gulpfile.js
[gulp] Working directory changed to /www/no1fitness-sandbox
[gulp] Running 'default'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[gulp] Running 'styles'...
[gulp] Finished 'default' in 8.2 ms
[gulp] Finished 'styles' in 1.85 s
Ezras-MacBook-Air:no1fitness-sandbox Ezra$
The only way I can make it do it is by removing the task around the gulp.watch function.
is this right? Are there better ways (that work)?
Then theres the warning about gulp.run, which I'm confused about as their own docs still seem to use it.
You aren't calling the watch task — you are running the default task:
[gulp] Running 'default'...
Run gulp watch to run your watch task.
I know that the question was answered right, but this post comes from Google while I was searching for my problem and the solution in my case is:
npm install gulp-watch
Hope this saves someone else time ^^
Another cause could be that the directory to watch does not contains any file. In that case 'gulp watch' stops immediately.

grunt faster loading tasks

Is there anybody who can tell me how to get grunt tasks load faster.
I really want to reduce the loading time, because most tasks require 1 second to load.
Especially for 'watch' task. when I am watching for changes, I really want to compile sass much faster.
Any ideas?
Thanx
You are really looking for this: jit-grunt.
Instead of loading all tasks every time, jit-grunt will only load those that are necessary.
Had the same problem as the OP: grunt watch was very slow for compiling .less files and liveReload so here's what I did:
install time-grunt to show execution times for each task:
$ npm install --save-dev time-grunt
and then place this line right after module-exports:
module.exports = function(grunt) {
require('time-grunt')(grunt);
After running grunt you will notice which tasks took longer than others. In my case it was loading all dependencies on every file change, so I found this solution:
install jit-grunt to load dependencies on demand instead of loading all of them each time grunt performs a task.
$ npm install jit-grunt --save-dev
and replace the initial loader in the gruntfile
require('load-grunt-tasks')(grunt);
with
require('jit-grunt')(grunt);
This saved my liveReload time for .css updates from ~1600ms to ~250ms.
PS: #curist suggested jit-grunt as well but I thought that more details might help anyone.
If your grunt is in a Vagrant virtualbox, you can synchronize via nfs, which is a bit faster than the default sharing. (but still way slower than a native filesystem)
In your Vagrantfile:
config.vm.synced_folder ".", "/vagrant", type: "nfs"
On my machine, time for grunt to load tasks (with ssd):
native: ~1s
nfs: ~4s
default Vagrant sharing: ~16s
Same problem here, after changed and execute task all modules was reload.
But i found a very good solution on github
(https://github.com/steida/grunt-este-watch)
What's wrong with official grunt-contrib-watch?
It's slow and buggy, because it uses combination fs.fileWatch and fs.watch, for historical reason. From Node 0.9.2+, fs.watch is ok.
What to do?
install grunt-este-watch
npm install grunt-este-watch --save-dev
change contrib watch
grunt.loadNpmTasks('grunt-contrib-watch');
to este watch
grunt.loadNpmTasks('grunt-este-watch');
change task
watch: {
javascript: {
files: 'src/js/**/*',
tasks: ['uglify']
}
}
to
esteWatch: {
options: {
dirs: ['../src/**/*']
},
'js': function(filepath) { return 'uglify' }
}
It sounds like your computer is the problem here, you will not have many options but to upgrade.
The only thing I can think of is concurrent tasks, if you can run the tasks concurrent you might shave some time off.
You could use grunt-concurrent as said on the repo:
Running slow tasks like Coffee and Sass concurrently can potentially improve your build time significantly. This task is also useful if you need to run multiple blocking tasks like nodemon and watch at once, as seen in the example config.
You can also load the tasks only when needed with this trick.

Resources