Gulp - CALL_AND_RETRY_LAST Allocation failed - process out of memory - node.js

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.

Related

Worker thread postMessage() vs command line command

I recently learned about Worker threads in Node JS. I was trying to create a worker thread to run Stockfish chess engine in node js.
The npm package I am using for this is called stockfish. I tried using node-stockfish before this but it was not installing with npm as it was using an older version of the type definition for the "AbortSignal" variable apparently causing compatibility issues.
For the current npm package that I am using even though I was able to install it successfully, I could find very little documentation on how to use it. So I tried out a few ideas.
import { Worker } from "worker_threads";
const engine = new Worker("./node_modules/stockfish/src/stockfish.js")
engine.on('message', (data) => console.log(data))
engine.postMessage('position startpos move e2e4 e7e5')
engine.postMessage('go movetime 3000')
Here I tried to run the stockfish.js as a worker thread and send commands to it with the postMessage() function. This however did not work and it gave the following output:
worker.js received unknown command undefined
position startpos move e2e4 e7e5
worker.js received unknown command undefined
go movetime 3000
But I know these commands are valid commands if I run the same js from the command line like so:
It might be because I am using the flags --experimental-wasm-threads and --experimental-wasm-simd when I am running it from the command line. I found this command to run it from the little documentation that was present. But I don't know how to mention these flags when I run it through a worker thread.
Otherwise it could also be that I don't understand how worker threads work yet and postMessage() is not the same as sending it a command from the command line.
Any help is greatly appreciated.
I switched to using stockfish.wasm library instead. With this library I was able to achieve what I wanted and I don't need to use any worker threads for now. Maybe I can add this to a worker thread if required later. Here is a simple example:
const Stockfish = require("stockfish.wasm")
Stockfish().then((engine) => {
engine.addMessageListener((output) => {
console.log(output);
// Do something with the output data here
})
engine.postMessage("uci");
engine.postMessage("ucinewgame");
engine.postMessage("position startpos");
engine.postMessage("go depth 20");
});

How do you increase the memory limit of Vue UI [duplicate]

Today I ran my script for filesystem indexing to refresh RAID files index and after 4h it crashed with following error:
[md5:] 241613/241627 97.5%
[md5:] 241614/241627 97.5%
[md5:] 241625/241627 98.1%
Creating missing list... (79570 files missing)
Creating new files list... (241627 new files)
<--- Last few GCs --->
11629672 ms: Mark-sweep 1174.6 (1426.5) -> 1172.4 (1418.3) MB, 659.9 / 0 ms [allocation failure] [GC in old space requested].
11630371 ms: Mark-sweep 1172.4 (1418.3) -> 1172.4 (1411.3) MB, 698.9 / 0 ms [allocation failure] [GC in old space requested].
11631105 ms: Mark-sweep 1172.4 (1411.3) -> 1172.4 (1389.3) MB, 733.5 / 0 ms [last resort gc].
11631778 ms: Mark-sweep 1172.4 (1389.3) -> 1172.4 (1368.3) MB, 673.6 / 0 ms [last resort gc].
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x3d1d329c9e59 <JS Object>
1: SparseJoinWithSeparatorJS(aka SparseJoinWithSeparatorJS) [native array.js:~84] [pc=0x3629ef689ad0] (this=0x3d1d32904189 <undefined>,w=0x2b690ce91071 <JS Array[241627]>,L=241627,M=0x3d1d329b4a11 <JS Function ConvertToString (SharedFunctionInfo 0x3d1d3294ef79)>,N=0x7c953bf4d49 <String[4]\: ,\n >)
2: Join(aka Join) [native array.js:143] [pc=0x3629ef616696] (this=0x3d1d32904189 <undefin...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/usr/bin/node]
2: 0xe2c5fc [/usr/bin/node]
3: v8::Utils::ReportApiFailure(char const*, char const*) [/usr/bin/node]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/bin/node]
5: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/usr/bin/node]
6: v8::internal::Runtime_SparseJoinWithSeparator(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/bin/node]
7: 0x3629ef50961b
Server is equipped with 16gb RAM and 24gb SSD swap. I highly doubt my script exceeded 36gb of memory. At least it shouldn't
Script creates index of files stored as Array of Objects with files metadata (modification dates, permissions, etc, no big data)
Here's full script code:
http://pastebin.com/mjaD76c3
I've already experiend weird node issues in the past with this script what forced me eg. split index into multiple files as node was glitching when working on such big files as String. Is there any way to improve nodejs memory management with huge datasets?
If I remember correctly, there is a strict standard limit for the memory usage in V8 of around 1.7 GB, if you do not increase it manually.
In one of our products we followed this solution in our deploy script:
node --max-old-space-size=4096 yourFile.js
There would also be a new space command but as I read here: a-tour-of-v8-garbage-collection the new space only collects the newly created short-term data and the old space contains all referenced data structures which should be in your case the best option.
If you want to increase the memory usage of the node globally - not only single script, you can export environment variable, like this:
export NODE_OPTIONS=--max_old_space_size=4096
Then you do not need to play with files when running builds like
npm run build.
Just in case anyone runs into this in an environment where they cannot set node properties directly (in my case a build tool):
NODE_OPTIONS="--max-old-space-size=4096" node ...
You can set the node options using an environment variable if you cannot pass them on the command line.
Here are some flag values to add some additional info on how to allow more memory when you start up your node server.
1GB - 8GB
#increase to 1gb
node --max-old-space-size=1024 index.js
#increase to 2gb
node --max-old-space-size=2048 index.js
#increase to 3gb
node --max-old-space-size=3072 index.js
#increase to 4gb
node --max-old-space-size=4096 index.js
#increase to 5gb
node --max-old-space-size=5120 index.js
#increase to 6gb
node --max-old-space-size=6144 index.js
#increase to 7gb
node --max-old-space-size=7168 index.js
#increase to 8gb
node --max-old-space-size=8192 index.js
I just faced same problem with my EC2 instance t2.micro which has 1 GB memory.
I resolved the problem by creating swap file using this url and set following environment variable.
export NODE_OPTIONS=--max_old_space_size=4096
Finally the problem has gone.
I hope that would be helpful for future.
i was struggling with this even after setting --max-old-space-size.
Then i realised need to put options --max-old-space-size before the karma script.
also best to specify both syntaxes --max-old-space-size and --max_old_space_size my script for karma :
node --max-old-space-size=8192 --optimize-for-size --max-executable-size=8192 --max_old_space_size=8192 --optimize_for_size --max_executable_size=8192 node_modules/karma/bin/karma start --single-run --max_new_space_size=8192 --prod --aot
reference https://github.com/angular/angular-cli/issues/1652
I encountered this issue when trying to debug with VSCode, so just wanted to add this is how you can add the argument to your debug setup.
You can add it to the runtimeArgs property of your config in launch.json.
See example below.
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\server.js"
},
{
"type": "node",
"request": "launch",
"name": "Launch Training Script",
"program": "${workspaceRoot}\\training-script.js",
"runtimeArgs": [
"--max-old-space-size=4096"
]
}
]}
I had a similar issue while doing AOT angular build. Following commands helped me.
npm install -g increase-memory-limit
increase-memory-limit
Source: https://geeklearning.io/angular-aot-webpack-memory-trick/
I just want to add that in some systems, even increasing the node memory limit with --max-old-space-size, it's not enough and there is an OS error like this:
terminate called after throwing an instance of 'std::bad_alloc'
what(): std::bad_alloc
Aborted (core dumped)
In this case, probably is because you reached the max mmap per process.
You can check the max_map_count by running
sysctl vm.max_map_count
and increas it by running
sysctl -w vm.max_map_count=655300
and fix it to not be reset after a reboot by adding this line
vm.max_map_count=655300
in /etc/sysctl.conf file.
Check here for more info.
A good method to analyse the error is by run the process with strace
strace node --max-old-space-size=128000 my_memory_consuming_process.js
I've faced this same problem recently and came across to this thread but my problem was with React App. Below changes in the node start command solved my issues.
Syntax
node --max-old-space-size=<size> path-to/fileName.js
Example
node --max-old-space-size=16000 scripts/build.js
Why size is 16000 in max-old-space-size?
Basically, it varies depends on the allocated memory to that thread and your node settings.
How to verify and give right size?
This is basically stay in our engine v8. below code helps you to understand the Heap Size of your local node v8 engine.
const v8 = require('v8');
const totalHeapSize = v8.getHeapStatistics().total_available_size;
const totalHeapSizeGb = (totalHeapSize / 1024 / 1024 / 1024).toFixed(2);
console.log('totalHeapSizeGb: ', totalHeapSizeGb);
Steps to fix this issue (In Windows) -
Open command prompt and type %appdata% press enter
Navigate to %appdata% > npm folder
Open or Edit ng.cmd in your favorite editor
Add --max_old_space_size=8192 to the IF and ELSE block
Your node.cmd file looks like this after the change:
#IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "--max_old_space_size=8192" "%~dp0\node_modules\#angular\cli\bin\ng" %*
) ELSE (
#SETLOCAL
#SET PATHEXT=%PATHEXT:;.JS;=;%
node "--max_old_space_size=8192" "%~dp0\node_modules\#angular\cli\bin\ng" %*
)
Recently, in one of my project ran into same problem. Tried couple of things which anyone can try as a debugging to identify the root cause:
As everyone suggested , increase the memory limit in node by adding this command:
{
"scripts":{
"server":"node --max-old-space-size={size-value} server/index.js"
}
}
Here size-value i have defined for my application was 1536 (as my kubernetes pod memory was 2 GB limit , request 1.5 GB)
So always define the size-value based on your frontend infrastructure/architecture limit (little lesser than limit)
One strict callout here in the above command, use --max-old-space-size after node command not after the filename server/index.js.
If you have ngnix config file then check following things:
worker_connections: 16384 (for heavy frontend applications)
[nginx default is 512 connections per worker, which is too low for modern applications]
use: epoll (efficient method) [nginx supports a variety of connection processing methods]
http: add following things to free your worker from getting busy in handling some unwanted task. (client_body_timeout , reset_timeout_connection , client_header_timeout,keepalive_timeout ,send_timeout).
Remove all logging/tracking tools like APM , Kafka , UTM tracking, Prerender (SEO) etc middlewares or turn off.
Now code level debugging: In your main server file , remove unwanted console.log which is just printing a message.
Now check for every server route i.e app.get() , app.post() ... below scenarios:
data => if(data) res.send(data) // do you really need to wait for data or that api returns something in response which i have to wait for?? , If not then modify like this:
data => res.send(data) // this will not block your thread, apply everywhere where it's needed
else part: if there is no error coming then simply return res.send({}) , NO console.log here.
error part: some people define as error or err which creates confusion and mistakes. like this:
`error => { next(err) } // here err is undefined`
`err => {next(error) } // here error is undefined`
`app.get(API , (re,res) =>{
error => next(error) // here next is not defined
})`
remove winston , elastic-epm-node other unused libraries using npx depcheck command.
In the axios service file , check the methods and logging properly or not like :
if(successCB) console.log("success") successCB(response.data) // here it's wrong statement, because on success you are just logging and then `successCB` sending outside the if block which return in failure case also.
Save yourself from using stringify , parse etc on accessive large dataset. (which i can see in your above shown logs too.
Last but not least , for every time when your application crashes or pods restarted check the logs. In log specifically look for this section: Security context
This will give you why , where and who is the culprit behind the crash.
I will mention 2 types of solution.
My solution : In my case I add this to my environment variables :
export NODE_OPTIONS=--max_old_space_size=20480
But even if I restart my computer it still does not work. My project folder is in d:\ disk. So I remove my project to c:\ disk and it worked.
My team mate's solution : package.json configuration is worked also.
"start": "rimraf ./build && react-scripts --expose-gc --max_old_space_size=4096 start",
For other beginners like me, who didn't find any suitable solution for this error, check the node version installed (x32, x64, x86). I have a 64-bit CPU and I've installed x86 node version, which caused the CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory error.
if you want to change the memory globally for node (windows) go to advanced system settings -> environment variables -> new user variable
variable name = NODE_OPTIONS
variable value = --max-old-space-size=4096
You can also change Window's environment variables with:
$env:NODE_OPTIONS="--max-old-space-size=8192"
Unix (Mac OS)
Open a terminal and open our .zshrc file using nano like so (this will create one, if one doesn't exist):
nano ~/.zshrc
Update our NODE_OPTIONS environment variable by adding the following line into our currently open .zshrc file:
export NODE_OPTIONS=--max-old-space-size=8192 # increase node memory limit
Please note that we can set the number of megabytes passed in to whatever we like, provided our system has enough memory (here we are passing in 8192 megabytes which is roughly 8 GB).
Save and exit nano by pressing: ctrl + x, then y to agree and finally enter to save the changes.
Close and reopen the terminal to make sure our changes have been recognised.
We can print out the contents of our .zshrc file to see if our changes were saved like so: cat ~/.zshrc.
Linux (Ubuntu)
Open a terminal and open the .bashrc file using nano like so:
nano ~/.bashrc
The remaining steps are similar with the Mac steps from above, except we would most likely be using ~/.bashrc by default (as opposed to ~/.zshrc). So these values would need to be substituted!
Link to Nodejs Docs
Use the option --optimize-for-size. It's going to focus on using less ram.
I had this error on AWS Elastic Beanstalk, upgrading instance type from t3.micro (Free tier) to t3.small fixed the error
In my case, I upgraded node.js version to latest (version 12.8.0) and it worked like a charm.
Upgrade node to the latest version. I was on node 6.6 with this error and upgraded to 8.9.4 and the problem went away.
For Angular, this is how I fixed
In Package.json, inside script tag add this
"scripts": {
"build-prod": "node --max_old_space_size=5048 ./node_modules/#angular/cli/bin/ng build --prod",
},
Now in terminal/cmd instead of using ng build --prod just use
npm run build-prod
If you want to use this configuration for build only just remove --prod from all the 3 places
I experienced the same problem today. The problem for me was, I was trying to import lot of data to the database in my NextJS project.
So what I did is, I installed win-node-env package like this:
yarn add win-node-env
Because my development machine was Windows. I installed it locally than globally. You can install it globally also like this: yarn global add win-node-env
And then in the package.json file of my NextJS project, I added another startup script like this:
"dev_more_mem": "NODE_OPTIONS=\"--max_old_space_size=8192\" next dev"
Here, am passing the node option, ie. setting 8GB as the limit.
So my package.json file somewhat looks like this:
{
"name": "my_project_name_here",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev_more_mem": "NODE_OPTIONS=\"--max_old_space_size=8192\" next dev",
"build": "next build",
"lint": "next lint"
},
......
}
And then I run it like this:
yarn dev_more_mem
For me, I was facing the issue only on my development machine (because I was doing the importing of large data). Hence this solution. Thought to share this as it might come in handy for others.
I had the same issue in a windows machine and I noticed that for some reason it didn't work in git bash, but it was working in power shell
Just in case it may help people having this issue while using nodejs apps that produce heavy logging, a colleague solved this issue by piping the standard output(s) to a file.
If you are trying to launch not node itself, but some other soft, for example webpack you can use the environment variable and cross-env package:
$ cross-env NODE_OPTIONS='--max-old-space-size=4096' \
webpack --progress --config build/webpack.config.dev.js
For angular project bundling, I've added the below line to my pakage.json file in the scripts section.
"build-prod": "node --max_old_space_size=5120 ./node_modules/#angular/cli/bin/ng build --prod --base-href /"
Now, to bundle my code, I use npm run build-prod instead of ng build --requiredFlagsHere
hope this helps!
If any of the given answers are not working for you, check your installed node if it compatible (i.e 32bit or 64bit) to your system. Usually this type of error occurs because of incompatible node and OS versions and terminal/system will not tell you about that but will keep you giving out of memory error.
None of all these every single answers worked for me (I didn't try to update npm tho).
Here's what worked: My program was using two arrays. One that was parsed on JSON, the other that was generated from datas on the first one. Just before the second loop, I just had to set my first JSON parsed array back to [].
That way a loooooot of memory is freed, allowing the program to continue execution without failing memory allocation at some point.
Cheers !
You can fix a "heap out of memory" error in Node.js by below approaches.
Increase the amount of memory allocated to the Node.js process by using the --max-old-space-size flag when starting the application. For example, you can increase the limit to 4GB by running node --max-old-space-size=4096 index.js.
Use a memory leak detection tool, such as the Node.js heap dump module, to identify and fix memory leaks in your application. You can also use the node inspector and use chrome://inspect to check memory usage.
Optimize your code to reduce the amount of memory needed. This might involve reducing the size of data structures, reusing objects instead of creating new ones, or using more efficient algorithms.
Use a garbage collector (GC) algorithm to manage memory automatically. Node.js uses the V8 engine's garbage collector by default, but you can also use other GC algorithms such as the Garbage Collection in Node.js
Use a containerization technology like Docker which limits the amount of memory available to the container.
Use a process manager like pm2 which allows to automatically restart the node application if it goes out of memory.

Within Docker VM, Gulp-Watch Seems to not work well on volumes hosted from the host OS

So I have a setup, probably as most people have, where their app code is mounted into a Docker container through a separate volume.
The problem is that if I run gulp, and specifically gulp-watch, to watch for file modifications etc. within docker, on the app code mounted within the docker container, to properly build and restart node within the docker container as necessary, it seems to get cpu intensive (as in polling for file changes instead of listening for file change events) to the point where my machine buckles.
I think this is due to a limitation of having the file system mounted from the native host to the docker container but how are folks working around this? Are they doing all of their work in the container? Native host then constantly building? Or am I missing something where my setup is incorrect with gulp-watch / nodemon?
For anyone using gulp4
The only way I could get this to work is to use usePolling like below
gulp.watch('./**/*', {interval: 1000, usePolling: true}, gulp.series('superTask'));
Try changing the gulp.watch options. This has been much better for me:
gulp.watch('./**/*', {interval: 1000, mode: 'poll'}, ['build']);
You should use the plugin gulp-watch instead of gulp.watch. The latter uses stat polling, which is much too heavy for the shared file system. gulp-watch uses inotify events to watch the file system on OSX.
The previous answer of usePoll: true didn't work. This one did:
gulp.watch('./**/*', {interval: 1000, usePolling: true}, ['build']);
Jesse's answer didn't work for me, but it was really close. Now, the option seems to be:
gulp.watch('./**/*', {interval: 1000, usePoll: true}, ['build']);
The mode field has been switched out for the usePoll field flag.
See the API section for more details.
In a docker container that has a nodemon installed (npm i -g nodemon) there is an alternative to gulp watch.
Let's say that one wants to watch changes to a swagger.yaml file in ./swagger/swagger.yaml and convert it to a project.json file for use with swagger UI.
Assuming that the correct node modules are installed, or that a stand-alone yaml to json convert tool is installed, one could run the following:
nodemon -L --watch ./editor/api/swagger/* --exec "node ./cvt_yaml_to_json.js"
where:
./editor/api/swagger/* is the directory to watch for file changes
"node ./cvt_yaml_to_json.js" is the command to execute (it can be an arbitrary command). In this case it is a JavaScript script which depends on js-yaml module (npm i js-yaml) and performs YAML to JSON conversion like this:
const yaml = require("js-yaml");
const path = require("path");
const fs = require("fs");
const swaggerYamlFile = "/api/project/editor/api/swagger/swagger.yaml";
const swaggerJsonFile = "/api/project/project.json";
//Converts yaml to json
const doc = yaml.safeLoad(fs.readFileSync(swaggerYamlFile));
fs.writeFileSync(swaggerJsonFile, JSON.stringify(doc, null, " "));

How to use Gulp to create a separate vendor bundle with Browserify from Bower components

I'm using Gulp and Browserify to package my Javascript into 2 separate bundles: application.js and vendor.js.
How do I bundle the vendor package if my vendor libraries are installed with Bower?
In my gulpfile, I'm using the following modules:
var gulp = require("gulp");
var browserify = require("browserify");
var debowerify = require("debowerify");
var source = require("vinyl-source-stream");
Assuming that I have only the Phaser framework installed with bower (for this example), my Gulp task to create the application package looks like this:
gulp.task("scripts-app", function () {
browserify("./app/javascripts/index.js")
.external("phaser")
.pipe(source("application.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Meanwhile, the vendor task looks like this:
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("phaser")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
When I run this Gulp task, I get an error that states Error: Cannot find module 'phaser' from and then all the directories it search through (none of which are the bower_components directory).
Any ideas about how to package these up successfully are greatly appreciated. Thanks!
Answered my own question:
When using require in the Gulp task, you need to supply a path to a file, not just a name.
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("./bower_components/phaser/phaser.js")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Notice that require("phaser") became require("./bower_components/phaser/phaser.js").
Doing this works, although the bundle takes forever to build (around 20 seconds). You're probably better of just loading giant libraries/frameworks directly into your app through a <script> tag and then using Browserify Shim.
This let's you require() (in the NodeJS/Browserify sense) global variables (documentation).
Seems like you figured out how to require the bower file. Hopefully you'll only have to bundle it once initially, and not every build. Including the library via a script tag isn't a bad idea. Another technique I'm using is to use scriptjs (a polyfill would work too), to async load whatever vender libraries I need, but make sure to include any/all require's after the script loads. For example, your index.js could be like:
$script.('/assets/vendor', function() {
var phaser = require('phaser');
//rest of code
});
It's especially nice for loading cdn files or having the ability to defer loading certain libraries that aren't necessarily used in the core app by every user, or loading libraries after client-side routing.

Rebuilding project on gulp.watch has no effect

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.

Resources