Rebuilding project on gulp.watch has no effect - node.js

I have a simple build step of my project where I mainly concatenate several files. The code looks like this:
var gulp = require('gulp');
var p = require('gulp-load-plugins')();
var srcDir = 'src/';
var src=[/*some files here*/];
var header='',footer='';
gulp.task('build',function(){
gulp.src(src,{cwd:srcDir})
.pipe(p.concat('sdk.js'))
.pipe(p.header(header))
.pipe(p.footer(footer))
.pipe(p.jshint())
.pipe(gulp.dest('dist/'));
});
gulp.task('watch',function(){
gulp.watch('src/**/*.js',['build']);
});
gulp.task('default',['build','watch']);
The first build task works as expected, with execution time about 550ms:
[gulp] Starting 'build'...
[gulp] Finished 'build' after 541 ms
However, when I change something in the src folder, the build task takes very little time, although I don't use any caching:
[gulp] Starting 'build'...
[gulp] Finished 'build' after 2.37 ms
What's more, the task has no effect - the dist directory doesn't change. I noticed, however, that the files update when I kill gulp and run it again. I don't know whether it's something with gulp or the file system itself I don't understand.

It turns out that the problem was not associated with gulp - actually it was a problem with my IDE, WebStorm. While the IDE should normally update the files automatically using the mechanism described in this comment to another question
(and it also did in my case not so long ago...). Otherwise it falls back to checking all the files at a time interval. The file was not being updated in my IDE view, but it was already changed by gulp, which worked all the time. Until I fix the issue with automatic reloading, using File | Synchronize results in the up-to-date version of the file being shown.

Related

`gulp` command starts, but quits quickly

when I try to run using gulp command, it starts running, but quits after that. How can I make it work as a server?
admins-MacBook-Pro:javascript tester$ ls
bower.json bower_components gulpfile.js lib node_modules package.json
admins-MacBook-Pro:javascript tester$ gulp
[14:37:21] Using gulpfile ~/Documents/cakeshop/cakeshop-client-js/src/main/javascript/gulpfile.js
[14:37:21] Starting 'compile-libs'...
[14:37:21] Starting 'compile-combined'...
[14:37:21] Finished 'compile-libs' after 253 ms
[14:37:24] Finished 'compile-combined' after 3.28 s
[14:37:24] Starting 'compile'...
[14:37:24] Finished 'compile' after 27 μs
[14:37:24] Starting 'default'...
[14:37:24] Finished 'default' after 4.86 μs
admins-MacBook-Pro:javascript tester$
When you just run gulp, the default task is run. According to your output, the default task for your gulpfile depends on the compile-libs, compile-combined, and compile tasks, so those are executed in order.
The available tasks are defined in the gulpfile.js and as such are subject to your particular projects. We cannot tell you whether there is a development server task included or not, and we cannot tell you what it is called either.
You can get a list of available gulp tasks using gulp --tasks. Maybe you can spot a task that starts a server for you; you can then start that using e.g. gulp server. If there is no such task, you will have to write your own, setting up your own server.

Gulp - CALL_AND_RETRY_LAST Allocation failed - process out of memory

When calling one of my gulp task, I get "FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory".
I found in this question that I can pass a parameter to node to increase the default memory limit : node --max-old-space-size=2000 server.js. But how can I tell gulp to pass a parameter to node.exe ? Here is the list of flags I can pass to gulp, I was hoping to find one that gulp passes to node when it launches it for a task.
The task causing the issue :
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('imagemin', function() {
var OUTPUT_FOLDER = '../Release_Prepared/';
var extensionsToOptimize = ['gif', 'jpeg', 'jpg', 'png', 'svg'];
var glob = [];
for(var i=0; extensionsToOptimize.length; i++){
glob.push(OUTPUT_FOLDER + '**/*.' + extensionsToOptimize[i]);
}
gulp.src(glob)
.pipe(imagemin({
verbose: true
}))
.pipe(gulp.dest(OUTPUT_FOLDER));
});
I just found out today that gulp can be given any V8 option and it will be passed to node. For example, do gulp yourTask --max_old_space_size=2000 and it will give you the results you want. To see a list of V8 flags to pass, type node --v8-options in your terminal.
In our case First time it was Fine when i was executing gulp build command. I have Four separate tasks. Each task creates separate built files for each modules. we have been running Gulp command for the final build.
There we faced the process out of memory issue continuously. Even though if we allocate large memory to the process. Like below - around 8GB. But, still it was failing.
gulp --max-old-space-size=8192
Solution:
Just delete the previous built files which is created already. And the
above command creates the new file. So the process works seamlessly.
For example:
Delete main-built.js Manually / Through automation commands.
In other case just clear the cache by executing the below command.
npm cache clean
Since we had large amount of JS files. that is also another case,
it could cause this kind of problems. Remove unwanted and unused Js
files.
Hope this helps.
I believe you should run this kind of command when you start the bash script build
node --max-old-space-size=2000 ./node_modules/.bin/gulp {your gulp script e.g gulb.js}
I was able to solve this issue by manually deleting my built js/css (dest) files, then re-running the gulp task. This goes along with RJK's answer above, but did not have to allocate new memory.
Search for gulp.cmd and modify that file like this:
#IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\node_modules\gulp-cli\bin\gulp.js --max-old-space-size=1400" %*
) ELSE (
#SETLOCAL
#SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\node_modules\gulp-cli\bin\gulp.js --max-old-space-size=1400" %*
)
Give more memory not solved to me. What happen:
I lost some days with this problem, until I found that in some file I was importing a class from one static file, a builded file. It make the build process to never end. Something like:
import PropTypes from "../static/build/prop-types";
Fixing to the real source solved all the problem.
I had a simple project that ended up using gulp-imagemin, and had the same issue. The root issue was having LARGE marketing images and Gulp/Node just ran out of memory.
I could of course perform the accepted answer here. But these 4,000+ by 3,000+ pixel images had no business going up on the web anyways, and this error really just reminded me I missed re-sizing some of my images.
So if you get a similar error, check that you have appropriate sized images as gulp/node shouldn't choke on most normal sized builds.

Auto compilation of bootstrap less file with gulp/gulp-watch-less does'nt regenerate the css

I've installed nodejs and gulp to auto compile the bootstrap less file (v 3.3.5) with gulp-watch-less module.
Everything is working fine expect one thing: I have to stop and start gulp to regenerate bootstrap.css.
For information, Gulp is detecting that a .less file included in bootstrap.less is modified, I have the following message:
[23:14:40] Starting 'default'...
[23:14:42] Finished 'default' after 2.04 s
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw bootstrap.less was changed:by:import
[23:16:42] LESS saw bootstrap.less was changed:by:import
But when I open the bootstrap.css file i don’t see the changes until I stop and start gulp again.
Here is the content of my gulpfile.js:
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
gulp.task('default', function () {
return gulp.src('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less')
.pipe(watchLess('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less'))
.pipe(less())
.pipe(gulp.dest('./../../../../drupal8/sandbox/felicity/themes/octogone/css'));
});
This code is from gulp-watch-less page
Can some one explain me why the bootstrap.css is not auto-re-generated?
I've solved the problem by using gulp-watch-less2
Gulp-watch-less wasn't compatible with gulp 3.9

Gulp.js: "gulp-chug" only runs one file even when set to watching many

I've started working with Gulp and the problem I'm having is getting gulp-chug to work properly.
I've followed everything in the documentation, telling my gulpfile to watch all gulpfiles within certain directories, whereas it only watches one file.
This is the code I have used following the documentation...
var gulp = require('gulp');
var chug = require('gulp-chug');
gulp.task('default', function () {
gulp.src('**/task_runner/gulpfile.js')
.pipe(chug());
});
I even tried to see if it makes a difference if I put the filepath in an array...
...
gulp.src(
[ '**/task_runner/gulpfile.js' ]
)
...
I also tried this (and a version without the array in gulp.src())...
...
gulp.src(
[ 'Project_01/task_runner/gulpfile.js', 'Project_02/task_runner/gulpfile.js' ]
)
...
...and it still does the same thing.
My file structure looks like this,
*root*
node_modules
gulpfile.js
package.json
Project_01
css
scss
task_runner
Project_02
css
scss
task_runner
All the gulpfiles work when running them individually, but I want them all to run at the same time within one cmd window with gulp-chug.
This is what my cmd looks like, which is showing that it's only watching Project_02,
C:\Users\WaheedJ\Desktop\UniServer\www\Practice\gulp>gulp
[14:19:40] Using gulpfile ~\Desktop\UniServer\www\Practice\gulp\gulpfile.js
[14:19:40] Starting 'default'...
[14:19:40] Finished 'default' after 6.37 ms
[gulp-chug] File is a buffer. Need to write buffer to temp file...
[gulp-chug] Writing buffer to Project_02\task_runner\gulpfile.tmp.1411996780120.
js...
[gulp-chug] Spawning process C:\Users\WaheedJ\Desktop\UniServer\www\Practice\gul
p\Project_02\task_runner\node_modules\gulp\bin\gulp.js with args C:\Users\Waheed
J\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner\node_modules\gulp\b
in\gulp.js --gulpfile gulpfile.tmp.1411996780120.js default from directory C:\Us
ers\WaheedJ\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner...
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:42] Usi
ng gulpfile ~\Desktop\UniServer\www\Practice\gulp\Project_02\task_runner\gulpfil
e.tmp.1411996780120.js
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:42] Sta
rting 'watch'...
[gulp-chug](Project_02\task_runner\gulpfile.tmp.1411996780120.js) [14:19:43] Fin
ished 'watch' after 18 ms
[14:19:43] Starting 'default'...
[14:19:43] Finished 'default' after 7.13 µs
What can I do to fix this?
I have the same thing happening. For now i employed this workaround :
gulp.task('default', ['one-gulpfile', 'another-gulpfile'], function () {});
gulp.task('one-gulpfile', function () { return gulp.src('./project-one/gulpfile.js').pipe(chug()); });
gulp.task('another-gulpfile', function () { return gulp.src('./project-another/gulpfile.js').pipe(chug()); });
Basically an empty default task, with dependencies on hard coded tasks that each, run one gulp file.
Of course not dynamic, and needs maintenance, but I got it going which is what i needed most at this point in time. I hope to see chug mature a bit more.

JHipster gulp file error -- Task 'browserify' is not in your gulpfile

In the JHipster gulpfile.js, there is a watch task set up for JS files which attempts to call a 'browserify' task. However, there is no 'browserify' task defined. If you are running 'gulp server' during development, the process will terminate as soon as you modify one of your JS files.
[11:43:19] Server started
[11:43:19] LiveReload started on port 35729
[11:43:19] Finished 'server' after 52 ms
**[11:52:14] Task 'browserify' is not in your gulpfile**
[11:52:14] Please check the documentation for proper gulpfile formatting
Is this a bug? I don't see why we would need to call to browserify with the current setup.
Yes it looks like a bug:https://github.com/jhipster/generator-jhipster/issues/367
The Gulp option is a community effort, and is less stable than the Grunt option.
However, of course, our goal is to have a correct and stable Gulp option for our soon-to-be-released 1.0 version.
Can you add your comments and feedback to the opened bug?

Resources