Gulp watch keeps firing nonstop even though there aren't any change - gulp

Just like the title, I currently have a nasty problem with Gulp watch, that keeps on compiling my files even though there aren't any change made.
For instance, this is a piece of my 'watch' task
gulp.task('watch', function() {
gulp.watch(jsIn, ['babel']);
}
And my 'babel' task, just to compile my scripts and move them to dist folder
const jsIn = ['dev/scripts/*.js', 'dev/scripts/**/*.js'],
jsOut = 'dist/scripts';
gulp.task('babel', function() {
gulp.src(jsIn)
.pipe(babel())
.on('error', gutil.log)
.pipe(gulp.dest(jsOut))
.pipe(connect.reload()); //yes I use gulp-connect to live reload my files.
});
When I run gulp watch it works normally, and then this keeps on happening
TRUONGs-MacBook-Pro:code sdsmnc$ gulp watch
[14:48:31] Using gulpfile /Volumes/SDSMNC_BU/2018/wildlife/code/gulpfile.js
[14:48:31] Starting 'watch'...
[14:48:31] Finished 'watch' after 14 ms
[14:48:32] Starting 'babel'...
[14:48:32] Finished 'babel' after 14 ms
[14:48:34] Starting 'babel'...
[14:48:34] Finished 'babel' after 1.95 ms
[14:48:34] Starting 'babel'...
[14:48:34] Finished 'babel' after 1.5 ms
[14:48:37] Starting 'babel'...
[14:48:37] Finished 'babel' after 1.18 ms
[14:48:39] Starting 'babel'...
[14:48:39] Finished 'babel' after 1.07 ms
[14:48:41] Starting 'babel'...
[14:48:41] Finished 'babel' after 1.03 ms
[14:48:42] Starting 'babel'...
[14:48:42] Finished 'babel' after 1.73 ms
[14:48:44] Starting 'babel'...
[14:48:44] Finished 'babel' after 1.04 ms
I practically use the same gulpfile.js for all of my projects, the old ones work fine, but somehow in this new project I get this problem. I tried to delete the node_modules folder and reinstall all the dependencies, even use the node_modules of my old projects but can't fix the problem.
Any help please...?

Related

Gulp running more tasks than specified

I've got a gulpfile set up with both a series of tasks to bundle an Angular2 app using systemjs as well as with webpack. Unfortunately, I'm seeing that if I run one of them in my Powershell prompt (e.g. "gulp webpack" or "gulp systemjs" without the quotes), it will actually run through more of the tasks than specified in my desired task.
I won't list all the tasks I've got within this for brevity, but they all follow the standard approach, as in the following sample:
gulp.task("angular",
() => {
var angularDirs = "./Scripts/MyApp/src/**/*.{html,css}";
return gulp.src(angularDirs)
.pipe(copy(config.wwwroot, { prefix: 1 }))
.pipe(gulp.dest(config.wwwroot));
});
For example, here's what I've got for my webpack task:
gulp.task("webpack", runSequence(["cleanRoot", "cleanBuild"],
["ts:webpack", "restore", "less", "angular", "webpackHtml", "javascript:webpack"]));
...and here's what I've got in the systemjs task:
gulp.task("systemjs", runSequence(["cleanRoot", "cleanBuild"], "embedTemplates",
"ts:systemjs", ["less", "restore", "angular"], "cleanWrongIndex"));
So, there's some overlap in there, but that's intended. However, if I run "gulp systemjs", I would expect that it'll only actually run "cleanRoot" and "cleanBuild" together, then "embedTemplates", then "ts:systemjs", the "less", "restore" and "angular" tasks and finally "cleanWrongIndex" and none of the other tasks in the file. However...
PS C:\Code\MyApp> gulp systemjs
[22:56:59] Using gulpfile
[22:56:59] Starting 'systemjs'...
[22:56:59] Finished 'systemjs' after 128 μs
[22:57:00] Finished 'cleanBuild' after 1.12 s
[22:57:01] Starting 'embedTemplates'...
**[22:57:01] Starting 'ts:webpack'...**
[22:57:01] Starting 'restore'...
[22:57:01] Starting 'less'...
[22:57:01] Starting 'angular'...
**[22:57:01] Starting 'webpackHtml'...**
**[22:57:01] Finished 'webpackHtml' after 705 μs**
**[22:57:01] Starting 'javascript:webpack'...**
**[22:57:01] Finished 'javascript:webpack' after 1.5 ms**
[22:57:01] Finished 'cleanRoot' after 1.9 s
[22:57:01] Finished 'restore' after 68 ms
[22:57:06] Finished 'less' after 5.65 s
[22:57:07] Finished 'angular' after 6.26 s
**[22:57:13] Finished 'ts:webpack' after 12 s**
**[22:57:14] Starting 'ts:systemjs'...**
[22:57:14] Finished 'embedTemplates' after 13 s
[22:57:20] Starting 'less'....
[22:57:20] Starting 'restore'...
[22:57:20] Starting 'angular'...
**[22:57:20] Finished 'ts:systemjs' after 5.64 s**
[22:57:20] Finished 'restore' after 161 ms
[22:57:23] Finished 'less' after 3.32 s
[22:57:23] Finished 'angular' after 3.79 s
[22:57:38] Starting 'restore'...
[22:57:38] Starting 'cleanWrongIndex'...
[22:57:38] Finished 'restore' after 25 μs
[22:57:38] Finished 'cleanWrongIndex' after 4.97 ms
PS C:\Code\MyApp>
I differentiated the tasks in the above that shouldn't be there since they're in the webpack task and not specified in this one.
Why are tasks showing up that I didn't specify? Is there any way to force gulp to only run the tasks I specify?
Thanks!

Gulp Task Error: 'Checksum error in glyf'

I am attempting to run a Gulp task and I get an error that I have no idea how to fix or even debug. The Gulp file and tasks have been created by NetSuite and haven't been editted by myself (they should work out of the box).
Any idea what node package could be causing the following error and how I can fix the error? Maybe I need to use a different version of SASS or Font-Awesome?
C:\Users\MyUser\SuiteCommerce Advanced Mont Blanc>gulp local
[08:48:45] Warning: gulp version mismatch:
[08:48:45] Global gulp is 3.9.1
[08:48:45] Local gulp is 3.8.7
[08:48:53] Using gulpfile ~\SuiteCommerce Advanced Mont Blanc\gulpfile.js
(node:1372) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
[08:48:53] Starting 'local-install'...
[08:48:53] Finished 'local-install' after 79 μs
[08:48:53] Starting 'templates'...
[08:48:53] Starting 'macros-jst'...
[08:48:53] Finished 'macros-jst' after 242 μs
[08:48:53] Starting 'macros'...
[08:48:53] Starting 'javascript-entrypoints'...
[08:48:53] Finished 'javascript-entrypoints' after 13 ms
[08:48:53] Starting 'javascript-move'...
[08:48:53] Starting 'copy'...
[08:48:53] Starting 'less'...
[08:48:53] Finished 'less' after 364 μs
[08:48:53] Starting 'sass-prepare'...
[08:48:53] Starting 'languages'...
[08:48:53] Starting 'images'...
[08:48:53] Starting 'fonts'...
[08:48:53] Finished 'fonts' after 386 μs
[08:48:53] Starting 'watch-templates'...
[08:48:53] Finished 'watch-templates' after 335 ms
[08:48:53] Starting 'watch-macros'...
[08:48:53] Finished 'watch-macros' after 610 μs
[08:48:53] Starting 'watch-javascript'...
[08:48:54] Finished 'watch-javascript' after 580 ms
[08:48:54] Starting 'watch-less'...
[08:48:54] Finished 'watch-less' after 459 μs
[08:48:54] Starting 'watch-sass'...
[08:48:55] Finished 'watch-sass' after 1.5 s
[08:48:55] Starting 'watch-languages'...
[08:48:55] Finished 'watch-languages' after 88 ms
[08:48:55] Starting 'watch-fonts'...
[08:48:56] Finished 'watch-fonts' after 365 μs
[08:48:56] Starting 'watch-images'...
[08:48:56] Finished 'watch-images' after 41 ms
[08:48:56] Finished 'copy' after 2.63 s
[08:48:56] Finished 'macros' after 2.71 s
[08:48:57] Finished 'javascript-move' after 4.15 s
[08:49:02] Finished 'images' after 9.11 s
[08:49:06] Finished 'languages' after 13 s
[08:49:07] Finished 'templates' after 14 s
[08:49:07] Starting 'javascript'...
[08:49:12] Finished 'sass-prepare' after 19 s
[08:49:12] Starting 'generate-sass-index'...
[08:49:12] Finished 'generate-sass-index' after 118 ms
[08:49:12] Starting 'sass'...
[08:49:12] Finished 'javascript' after 4.99 s
[08:49:12] Starting 'clean-templates'...
[08:49:12] Finished 'clean-templates' after 12 μs
[08:49:13] SOURCE CODE ERROR
[08:49:13] status 1
[08:49:13] file C:/Users/MyUser/SuiteCommerce Advanced Mont Blanc/LocalDistribution/sass/twitter-bootstrap-sass/mixins/_grid-framework.scss
[08:49:13] line 11
[08:49:13] column 245
[08:49:13] message LocalDistribution\sass\twitter-bootstrap-sass\mixins\_grid-framework.scss
Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
From "#extend .col-md-6" on line 134 of LocalDistribution/sass/ItemDetails/_item-details.scss
on line 11 of LocalDistribution/sass/twitter-bootstrap-sass/mixins/_grid-framework.scss
>>
[08:49:13] formatted Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
From "#extend .col-md-6" on line 134 of LocalDistribution/sass/ItemDetails/_item-details.scss
on line 11 of LocalDistribution/sass/twitter-bootstrap-sass/mixins/_grid-framework.scss
>>
[08:49:13] messageFormatted LocalDistribution\sass\twitter-bootstrap-sass\mixins\_grid-framework.scss
Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
From "#extend .col-md-6" on line 134 of LocalDistribution/sass/ItemDetails/_item-details.scss
on line 11 of LocalDistribution/sass/twitter-bootstrap-sass/mixins/_grid-framework.scss
>>
[08:49:13] name Error
[08:49:13] stack Error: LocalDistribution\sass\twitter-bootstrap-sass\mixins\_grid-framework.scss
Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
From "#extend .col-md-6" on line 134 of LocalDistribution/sass/ItemDetails/_item-details.scss
on line 11 of LocalDistribution/sass/twitter-bootstrap-sass/mixins/_grid-framework.scss
>>
at options.error (C:\Users\MyUser\SuiteCommerce Advanced Mont Blanc\node_modules\node-sass\lib\index.js:286:26)
[08:49:13] showStack false
[08:49:13] showProperties true
[08:49:13] plugin gulp-sass
[08:49:13] Finished 'sass' after 954 ms
[08:49:13] Starting 'font-awesome'...
[08:49:13] Starting 'clean-sass-tmp'...
[08:49:13] Finished 'clean-sass-tmp' after 5.57 μs
events.js:160
throw er; // Unhandled 'error' event
^
Error: Checksum error in glyf
It looks like you have node > v4 installed.
If you haven't run npm install since updating node you'll need to do that so SASS get's a new executable.
Running npm install may fix your issue
then gulp clean and gulp local.
Due to how often I see errors just running gulp local I generally run these as a single command:
gulp clean && gulp local
However I also go through and fix all those issues in the Netsuite's SASS files. Almost all of them are due to overspecification and I haven't seen any issues caused by fixing them.
e.g. From NS
.item-details-main {
#media (min-width: $screen-md-min) {
#extend .col-md-4;
}
}
behaves pretty much the same as:
.item-details-main {
#extend .col-md-4;
}
This error happens because SCA uses gulp-sass for compiling SCSS files. After Mont Blanc was released, node-sass, which is a dependency of gulp-sass was updated causing errors with SCSS files that were previously compiled.
There is no a fix for this issue without modifying SCSS files which throw fatal errors, but there is a workaround:
Uninstalling the gulp-sass package
Installing node-sass at 3.4.1 as a first-level dependency of the dev tools.
Reinstalling gulp-sass
In order to do this, run the following commands:
npm cache clear
npm uninstall gulp-sass node-sass
npm config set save-exact true
npm install --save node-sass#3.4.1 gulp-sass#2.1.0

EACCES: permission denied on gulp css minify, same src and dest

I have a gulp task to build up everything which runs for dev (works fine). On release gulp task we do the same but also tack on a bundle task which also minifies the css.
I want to just minify the css inline, meaning the same src and dest for the file; however, I am getting the below error when running.
Error: EACCES: permission denied, open
I don't think I'm hitting any race conditions since my build task shows as finished before the minify starts
[15:11:48] Finished 'build_client_lib' after 3.31 s
[15:11:48] Starting 'build'...
[15:11:48] Finished 'build' after 1.67 μs
[15:11:48] Starting 'minify-css'...
[15:11:48] 'minify-css' errored after 344 ms
The tasks in question are:
gulp.task('release', callback => {
gulpSequence('clean_packages', 'build', 'client_lib_bundle')(callback)
});
gulp.task('client_lib_bundle', ['minify-css'], () => {
});
gulp.task('minify-css', () => {
return gulp.src('build/client_lib/**/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('build/client_lib'));
});
It works fine is I specify an alternate dest path, but I'd prefer not to do that. How can I resolve this access issue?
Turns out the package I was using gulpSequence caused this, and a slew of other items, to run in an awkwardly async manner. Changing to the npm package run-sequence cleared all this up and ensures everything is running in the correct order.

Gulp tasks does not work sequentially

I have 4 tasks to clean the build, build styles & javascripts and to create asset manifest. My default task looks like this:
gulp.task('default', function(callback) {
runSequence('clean', ['styles', 'scripts'], 'version', callback);
});
So, this works out perfectly but the 'version' tasks. It does not create anything and has no effect.
gulp.task('version', function() {
gulp.src(utils.dst('**/*'))
// create content hashed filenames
.pipe(rev())
.pipe(gulp.dest(utils.dst()))
// create asset manifest
.pipe(rev.manifest())
.pipe(gulp.dest(utils.dst()))
});
If I run do the gulp clean; gulp styles; gulp scripts; gulp version; the version tasks will create the desired asset manifest.
This is the output of running the default task:
Starting 'default'...
Starting 'clean'...
Finished 'clean' after 6.87 ms
Starting 'styles'...
Finished 'styles' after 7.63 ms
Starting 'scripts'...
Finished 'scripts' after 2.96 ms
Starting 'version'...
Finished 'version' after 2.25 ms
Finished 'default' after 22 ms
Do anyone see the mistake I do? Maybe the build assets are not there yet when I run the version task, but that's why I made the tasks run sequentially.
Any suggestions how I could solve the problem?
You have to return the stream like so :
gulp.task('version', function() {
return gulp.src(utils.dst('**/*'))
// create content hashed filenames
.pipe(rev())
.pipe(gulp.dest(utils.dst()))
// create asset manifest
.pipe(rev.manifest())
.pipe(gulp.dest(utils.dst()))
});
Otherwise gulp can't know if your task is finished or not !

Why is my m.e.a.n. server so slow?

I started a m.e.a.n. server with google compute engine. It seems ok but should it be this slow? The server is http://130.211.66.116:3000/
Everything seems ok but the response time is like 30 seconds. Is it just that the example configuration has too little power and I must create a new VM with more dedicated power? I used the example from google.
How I start it:
$ gulp
Invoking gulp - development
[08:04:58] Using gulpfile ~/onacciweb/gulpfile.js
[08:04:58] Starting 'clean'...
[08:04:58] Finished 'clean' after 4.95 ms
[08:04:58] Starting 'default'...
[08:04:58] Starting 'coffee'...
[08:04:58] Finished 'coffee' after 7.29 ms
[08:04:58] Starting 'clean'...
[08:04:58] Starting 'less'...
[08:04:58] Starting 'csslint'...
[08:04:58] Starting 'env:development'...
[08:04:58] Finished 'env:development' after 33 μs
[08:04:58] Starting 'devServe'...
[08:04:58] Finished 'devServe' after 65 ms
[08:04:58] Starting 'watch'...
[08:05:04] Finished 'watch' after 5.31 s
[08:05:04] Finished 'clean' after 5.62 s
[08:05:04] [nodemon] v1.4.1
[08:05:04] [nodemon] to restart at any time, enter `rs`
[08:05:04] [nodemon] watching: *.*
[08:05:04] [nodemon] starting `node --debug server.js`
debugger listening on port 5858
[08:05:05]
[08:05:05] Finished 'less' after 6.53 s
[08:05:05] csslint: 3 files lint free
[08:05:05] Finished 'csslint' after 6.35 s
[08:05:05] Starting 'development'...
[08:05:05] Finished 'development' after 12 μs
loading docs for: /home/niklasro/onacciweb/packages/core/articles
Mean app started on port 3000 (development) cluster.worker.id: 0
[08:05:07] index.html reloaded.
It looks like your issue is that livereload.js is timing out. On that Click to Deploy, I believe there are some post deployment steps that must be completed for final configuration of the MEAN instance. Did you successfully complete those?