Grunt or gulp with netbeans and upload on save - node.js

I've been using netbeans for a long time. I mostly work with php, html, css and javascript primarily in relation to wordpress theme and plugin development. I run Netbeans 8.0.2 (and for testing gulp the latest nightly build) under windows 7.
I'm just getting started with grunt and / or gulp (leaning towards the latter so far), at the moment to take advantage of autoprefixer - but I see a million other potential benefits of these systems.
There is one showstopper though. I got addicted to the "Upload files on save" feature years ago, and I'm not about to kick that habbit - the instant upload is a very central part of my workflow on almost all projects...
So far it has just silently handled anything I threw at it, and automatically uploaded any changed files no matter if I used netbeans, photoshop, windows explorer or any other external program to modify or move files around... but it doesn't play nice with the recently introduced gulp and grunt support.
If I run a gulp (or grunt) task and files are updated, netbeans doesn't detect the changes until the changed files are opened (or tabbed to if already open)... and so the updated files aren't uploaded.
If the task runs as a watch it doesn't seem to matter if I run it from CLI or from netbeans. If it's a "normal" task (ie. not a watch - I'm not quite comfortable with the lingo yet) and I run it manually by right-clicking the Gruntfile.js -> Grunt Tasks -> whatever then the changes are detected... but this isn't very convenient (compared to my usual "deployment procedure" of pushing CTRL+S). So far this built-in way of running tasks works for grunt - but not (yet?) gulp.
Only options I see is to:
use an FTP plugin for grunt or gulp - very undesirable for a number of reasons
run gulp on the server side - which would mean a major disruption of the normal workflow when full control of the server is not possible, which is often the case on external projects - it would also mean a lot of extra initial work to set up each new project serverside even when it is possible
Has anyone managed to get this working in a similar scenario?
-Any other suggestions / pointers are welcome too, if I'm simply going about it completely wrong.
More or less minimal (based on my so far limited knowledge) files to reproduce:
package.json:
{
"name": "grunt_gulp_test",
"version": "0.0.1",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Mikkel",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.3.0",
"gulp-load-plugins": "^0.10.0",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-util": "^3.0.4"
}
}
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'test_grunt.css': 'test.scss'
}
}
},
watch: {
scripts: {
files: ['test.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
grunt.registerTask('watch_it', ['sass', 'watch']);
};
gulpfile.js:
'use strict';
var gulp = require('gulp');
var gutil = require( 'gulp-util' );
var $ = require('gulp-load-plugins')();
gulp.task('styles', function () {
return gulp.src([
'test.scss'
])
.pipe($.sourcemaps.init())
.pipe($.sass({
precision: 10,
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.autoprefixer({browsers: ['> 5%']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['styles']);
gulp.task('watch', ['styles'], function () {
gulp.watch(['test.scss'], ['styles']);
});
test.css:
div {
div {
display: flex;
background: #445552;
}
}

This was confirmed to be a bug for users running on windows.
The bug has been resolved, and until it is included in a stable release, anyone else who is affected by the problem can simply use a nightly build >= 201508060002

Related

React native : Failed to construct transformer: Error: Cannot create a string longer than 0x1fffffe8 characters

package.json
{
"name": "project",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.0",
"#react-native-community/clipboard": "^1.2.3",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/drawer": "^5.9.0",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"jetifier": "^1.6.6",
"react": "16.13.1",
"react-native": "^0.63.2",
"react-native-barcode-builder": "^2.0.0",
"react-native-biometrics": "^2.1.4",
"react-native-chart-kit": "^6.6.1",
"react-native-gesture-handler": "^1.7.0",
"react-native-image-picker": "^2.3.3",
"react-native-localization": "^2.1.6",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.6",
"react-native-screens": "^2.10.1",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-swipe-list-view": "^3.2.3",
"react-native-vector-icons": "^7.0.0"
},
"devDependencies": {
"#babel/core": "7.11.4",
"#babel/runtime": "7.11.2",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"miragejs": "^0.1.40",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
i did't fonund any answers related this except this : https://github.com/facebook/react-native/issues/28189
but it won't work for me...
myapp successfully install on android emulator but stuck at splash screen ...
the app works fine in my office computer but it did't work on my own computer
my node version : v14.10.0
so please help me.
I've tried to log the file that causing the error, but console.log wasn't working.
I come up with a quick hack to throw filePath then I've saw that a zip file, that I keeped as a backup, was the issue.
For some way react doesn't liked it so I have to move it outside of the project folder
For others having the same problem, and looking for a way to debug:
Edit /node_modules/jest-haste-map/build/worker.js
Wrap readFileSync in a try...catch, like this:
const getContent = () => {
if (content === undefined) {
try {
content = fs().readFileSync(filePath, 'utf8');
} catch (err) {
throw new Error(`error readFileSync ${filePath} : ${err.message}`);
}
}
return content;
};
(re)start metro bundler:
/node_modules/react-native/scripts/launchPackager.command; exit
My output:
To reload the app press "r"
To open developer menu press "d"
Failed to construct transformer: Error: error readFileSync <my project path>/some/big/file/that/caused/error : Cannot create a string longer than 0x1fffffe8 characters
at getContent (<my project path>/node_modules/jest-haste-map/build/worker.js:133:15)
at Object.worker (<my project path>/node_modules/jest-haste-map/build/worker.js:162:23)
at execFunction (<my project path>/node_modules/jest-worker/build/workers/processChild.js:145:17)
at execHelper (<my project path>/node_modules/jest-worker/build/workers/processChild.js:124:5)
at execMethod (<my project path>/node_modules/jest-worker/build/workers/processChild.js:128:5)
at process.messageListener (<my project path>/node_modules/jest-worker/build/workers/processChild.js:46:7)
at process.emi
Hope this helps others having the same problem!
I was running into the same problem.
warning: the transform cache was reset.
Welcome to React Native!
Learn once, write anywhere
Failed to construct transformer: Error: Cannot create a string longer than 0x1fffffe8 characters
at Object.slice (buffer.js:608:37)
at Buffer.toString (buffer.js:805:14)
at Object.readFileSync (fs.js:421:41)
at getContent (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:149:41)
at Object.<anonymous> (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:
199:9)
at Generator.next (<anonymous>)
at asyncGeneratorStep (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:
78:24)
at _next (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:98:9)
at J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:103:7
at new Promise (<anonymous>) {
type: 'Error',
code: 'ERR_STRING_TOO_LONG'
I solved the error by changing the node version to v14+ and then reverting back to the old version of node v10.15.3.
I've run into the exact same error. Turns out it was an auto-generated big file from gradle (> 700MB) inside "android.gradle\6.0.1\executionHistory"
To figure out what file caused an error I used #dirk approach.
I don't sure why but my App_name.app.dSYM.zip became too large (536MB) so the node was unable to read it because of the 512MB limitation. It might be some different file in your case.
Here is a patch-package to get more information about the file which caused this error
diff --git a/node_modules/jest-haste-map/build/worker.js b/node_modules/jest-haste-map/build/worker.js
index 1996d4a..1f17f11 100644
--- a/node_modules/jest-haste-map/build/worker.js
+++ b/node_modules/jest-haste-map/build/worker.js
## -146,7 +146,11 ## function _worker() {
const getContent = () => {
if (content === undefined) {
- content = _gracefulFs().default.readFileSync(filePath, 'utf8');
+ try {
+ content = _gracefulFs().default.readFileSync(filePath, 'utf8');
+ } catch (err) {
+ throw new Error(`error readFileSync ${filePath} : ${err.message}`);
+ }
}
return content;
Make sure you don't have any large files in your root project including (mp4, images, .zip, etc)?
In my own case I noticed I was using an mp4 video file for my react native application which was too large in size. I had to delete it and that was the fix for me
It took me the whole day but I solved it. I still can't understand why I'm getting this error when I want to launch the app on iOS but:
removing the build directory in android/app fixed it.
Check if there any unrelated file or zip in your project structure/folder
if yes then delete file and error will be resolved
In my case there was a zip file of whole project in the project directory which cause the issue when I remove it from the project directory and run
npm start --reset cache
it worked for me.
I had similar issue. After some debugging I found that it crashes because of asset file, which was generated by android build previously.
I don't know why it is trying to import this file (I experience this issue on ios), but when I removed folder ./android/app/build it started working.
Even if issue is not related to this dir in your case, you need to find which asset caused this issue.
Moving any large asset files [pictures,videos,etc...] up out of the project directory.
https://github.com/facebook/react-native/issues/28189#issuecomment-592918995
I got this error when i run build.
But This fix worked for me.
I deleted a zip file at the root of my app (I compressed the whole project to zip at end of the previous day for backup)
And i stopped the server with ctr + c command
Then restarted the server with npx react-native start
All now works fine after restarting the server and without having to run build again.
Just delete any zipped file in your project root directory. In my case I had packaged the app and sent it to someone and forgot to remove the zipped file thereafter.
This answer helped me a lot https://stackoverflow.com/a/41963217/2915928
For my case my app had a lot of audio files being included in android app bundle, this was then creating a large zip file in android/build/intermediates. So rather than deleting the build folder this tell the packager to ignore the file causing the issue.
Here is an example of my fix replace asset_pack_bundle with whatever file or directory you are having an issue with.
const exclusionList = require('metro-config/src/defaults/exclusionList');
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
blacklistRE: exclusionList([/asset_pack_bundle\/.*/]),
},
};
I have followed the below steps and it worked for me:
1. cleared cache and unnecessary space from my mac.
2. cleared npm cache and watchman.
3. cleared gradle.
4. restarted the metro server.

Signal async completion warning upon upgrade to Gulp 4

I use Gulp to run one simple task in a non-JavaScript project. I'm trying to upgrade from 3.9.1 to 4.0 to get rid of the flood of "deprecated" and "security" warnings. Together with articles like A quick guide for switching to gulp 4 I've upgraded locally, dropped gulp-util and ended up with this package.json:
{
"name": "redacted",
"main": "gulpfile.js",
"private": true,
"devDependencies": {
"ansi-colors": "^3.0.5",
"fancy-log": "^1.3.2",
"gulp": "^4.0.0",
"gulp-zip": "^4.2.0",
"temp": "^0.8.3"
}
}
But I'm not a Node.js expert and I'm clearly missing something. My old style tasks:
var gulp = require('gulp');
var log = require('fancy-log');
gulp.task('hi', function() {
log('Hello, World!');
});
… trigger:
PS D:\Redacted> gulp hi
[10:25:58] Using gulpfile D:\Redacted\gulpfile.js
[10:25:58] Starting 'hi'...
[10:25:58] Hello, World!
[10:25:58] The following tasks did not complete: hi
[10:25:58] Did you forget to signal async completion?
If I inject gulp.series() and get rid of anonymous functions as the article recommends:
function hi() {
log('Hello, World!');
}
gulp.task('hi', gulp.series(hi));
… then either the task runs twice or its output gets displayed twice (not sure) but the warning persists:
PS D:\Redacted> gulp hi
[10:28:47] Using gulpfile D:\Redacted\gulpfile.js
[10:28:47] Starting 'hi'...
[10:28:47] Starting 'hi'...
[10:28:47] Hello, World!
[10:28:47] The following tasks did not complete: hi, hi
[10:28:47] Did you forget to signal async completion?
What bit am I missing? Is there a better upgrade guide?
The old-fashioned syntax still works. I was apparently just missing a final call to the done callback that didn't seem to be required on Gulp/3:
gulp.task('hi', function(done){
log('Hello, World!');
done();
});
gulp.series() looks like overkill for running a single task.

async / await breaks my Webpack build for AWS Lambda; how can I migrate to Node 8.10?

Note: this is a Q&A on migrating AWS Lambda Webpack builds from v6.10 to v8.10 — no help is needed, but even better answers are of course always encouraged!
For a while now I have been a disciple of using Webpack to build my back-end Lambdas after reading James Long's excellent series entitled "Backend Apps with Webpack" (part 1, part2, and part3).
Up until recently, the only version of Node.js that Amazon Web Services offered was 6.10; you had to write your Lambda fn in the "callback" style. But on April 2, 2018 AWS announced that 8.10 was now supported, and with it the suggested pattern is async / await which is great! Until it immediately broke my Webpack build. After a bit of debugging, I can break my build just by adding one async fn to the Lambda handler (I don't even need to call it):
async function firstAsync() {
return true;
}
exports.handler = async (event) => {
// TODO implement
return 'Hello from Lambda!'
};
To be clear, doing this in the AWS Lambda console is perfectly fine, runs great. Webpack even builds it successfully, but upon uploading to AWS Lambda, I get the following error message: regeneratorRuntime is not defined. My code is below. What am I needing to do?
webpack.config.js
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
library: 'index',
libraryTarget: 'commonjs2',
filename: 'index.js'
},
target: 'node', // building for a Node environment
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
module: {
rules: [{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
},
plugins: [
new UglifyJsPlugin()
]
};
module.exports = config;
package.json
{
"name": "lambda-webpack",
"version": "1.0.0",
"description": "An empty project scaffold to enable webpack builds in AWS Lambda",
"main": "index.js",
"scripts": {
"build": "webpack",
"upload": "upload.bat"
},
"author": "Geek Stocks®",
"license": "MIT",
"devDependencies": {
"aws-sdk": "^2.179.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0",
"webpack-node-externals": "^1.6.0"
}
}
Geek Stock's answer above is only necessary when using the Node v6.10 runtime. It allows you to use async/await syntax and babel-runtime/regenerator converts your async functions to ES6 generators which is supported on Node v4.3.2 and newer runtimes.
In Node v8.10 though, it is different. async/await is already supported so you don't need Babel to convert your async functions to generators. You just use it correctly and it works.
As for your specific situation, I assume you simply changed your Javascript code to use async/await code but you didn't tell Babel NOT to convert your async/await code to generators. That is why babel-runtime is complaining about a missing plugin.
If this is the case, you simply need to configure Babel to simply target Node v8.10. You can do it like this in your .babelrc...
{
"presets": [
[
"env",
{
"targets": {
"node": "8.10"
}
}
]
]
}
babel will then stop converting those async functions. And since it's not doing a conversion, it will not need the regenerator-runtime anymore.
In my case I'm using it with nodejs12.x. I'm receiving the error regeneratorRuntime is not defined.
I was using preset es2015 and stage-0 with a node12.x code. Also I'm using an older version of babel.
What I did, installed:
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2"
And then set this babel preset:
"presets": [
["#babel/preset-env", {"targets": { "node": "current" }}]
]
Thanks,
To begin using async / await in your Webpack-built code, you need a little help from Babel, specfically the babel-runtime and the babel-plugin-transform-runtime. Fortunately there is a really good writeup on the installation and use of both here on the Babel website. You need Babel to do the following for you:
Automatically requires babel-runtime/regenerator when you use
generators/async functions.
I won't repeat what has been written there, however, of particular note is HOW you need to install these, because while their writeup certainly works for most, there is a needed tweak for some AWS Lambda devs who have not needed runtime dependencies before now.
The first part is pretty normal, you need new devDependencies:
npm install --save-dev babel-plugin-transform-runtime
And also you need to tweak your .babelrc file like they describe:
{
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
}
But here is the kicker, and this is new to the code above: the babel-runtime is a regular dependencies, not a devDependencies:
npm install --save babel-runtime
These 2 installs and the .babelrc tweaks do SOLVE the async / await problem described above, but it introduces a new problem to the build above: Cannot find module 'babel-runtime/regenerator'.
If you are at all concerned with keeping your Webpack built code small, you are likely also using webpack-node-externals like the above code does. For example, the aws-sdk for JavaScript in Node is very large and is already available in the Lambda environment, so its superfluous to bundle it again. The webpack-node-externals configuration above configures Webpack to ignore ALL the modules in node-modules by default, and there is the root of the new problem. The newly installed babel-runtime is a module that needs to be bundled in the build in order for Lambda to run correctly.
Understanding the problem then, the answer becomes simple: don't use the default configuration. Instead of passing in nothing to webpack-node-externals, configure it like this:
externals: [nodeExternals({
whitelist: [
'babel-runtime/regenerator',
'regenerator-runtime'
]
})], // ignore all modules in node_modules folder EXCEPT the whitelist
And that solves both the original async / await problem, and the (possible) new problem you may be encountering if you had no previous dependencies in your build. Hope that helps — happy Lambda awaiting!

Proper use of karma-commonjs with Jasmine 2

I've spent a fair amount of time trying to debug this, and figured I would ask. I even created a GitHub repository but won't rely on it, so here goes. I'm trying to take advantage of CommonJS syntax within the Karma test runner using PhantomJS. For my module I created the simplest thing I could think of:
exports.returnYes = function() {
return "Yes";
};
The Jasmine test is:
var returnYes = require("../js/returnYes").returnYes;
describe("returnYes", function() {
it("should return Yes", function() {
expect(returnYes()).toBe("Yes");
});
});
And, if I do a jasmine init I can run it from the command line thanks to jasmine-npm by simply typing jasmine with output:
$ jasmine
Started
.
1 spec, 0 failures
Finished in 0.003 seconds
Now to try and get it to work inside karma:
I create my karma.conf.js with frameworks: jasmine,commonjs. And, I add commonjs as preprocessor.
I try to do a karma run and I find that it can't find global which is part of getJasmineRequireObj in jasmine.js where it declares jasmineGlobal = global;
The command line output is a little hard to read, but here it is:
$ karma run
[2015-06-27 17:41:35.266] [DEBUG] config - Loading config /Users/zen/Projects/karma-commonjs-test/karma.conf.js
##teamcity[enteredTheMatrix]
##teamcity[testSuiteStarted nodeId='1' parentNodeId='0' name='karma.conf.js' nodeType='config' locationHint='config:///Users/zen/Projects/karma-commonjs-test/karma.conf.js']
##teamcity[testSuiteStarted nodeId='2' parentNodeId='1' name='PhantomJS 1.9.8 (Mac OS X 0.0.0)' nodeType='browser']
##teamcity[testStarted nodeId='3' parentNodeId='2' name='Error' nodeType='browserError']
##teamcity[testFailed nodeId='3' error='yes' message='ReferenceError: Can|'t find variable: global|nat http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?68f13ab3f93af5a219b9fe8409f8763b31998bba:27']
##teamcity[testSuiteFinished nodeId='2']
##teamcity[testSuiteFinished nodeId='1']
For good measure here are the devDependencies in my packages.json:
"devDependencies": {
"jasmine-core": "^2.3.4",
"karma": "^0.12.37",
"karma-commonjs": "0.0.13",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.2.0",
"phantomjs": "^1.9.17"
}
I'm not sure why I can't find global. Any help would be greatly appreciated!!! :)
It seems like my whole problem came down to the line in karma.conf.js (not shown in my original question:
preprocessors: {
'**/*.js': ['commonjs']
},
For some reason, jasmine.js is not happy being pre-processed by commonjs, and "**/*.js" says to go through all subdirectories (which is probably overkill), including node_modules which has jasmine-core/jasmine.js
So I can either make my pre-processor more specific (best practice):
preprocessors: {
'spec/*.js': ['commonjs'],
'js/*.js': ['commonjs']
},
but as a test to see if any other files would give me a problem, I tried:
preprocessors: {
'**/!(jasmine).js': ['commonjs'],
},
And, everything worked as well. Bottom line. Do not process jasmine.js through commonjs preprocessor!

the latest grunt-express does not work

I am trying to setup my environment to do some client side development. It is supposed to be nodejs based. I was recommended grunt-express as the component to configure the development server.
The problem I have is that the latest version (0.3.6) does not work and I am not sure is this because I am doing something stupid with the configuration or this is a bug introduced in the latest version.
Here is what I have:
The Gruntfile.js
'use strict';
module.exports = function(grunt) {
var path = require('path');
grunt.initConfig({
express: {
server: {
options: {
port: 3005,
bases: path.resolve('public'),
debug: true
}
}
}
});
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('start', ['express', 'express-keepalive']);
}
The package.json:
{
"name": "MvcTemplate",
"version": "0.0.1",
"engines": {
"node": ">0.8"
},
"private": true,
"dependencies": {
"grunt": "~0.4",
"grunt-express": "~0.2"
}
}
when I run grunt start the version of the package as specified above works fine - the server is started and responds to the requests as expected.
But if I switch to the latest version (0.3.6) when I run the grunt start or grunt express all I am getting is a constant stream of the messages CreateProcessW: The system cannot find the file specified.
So - is it me being stupid or something is wrong with the package?
Just tried it on my machine (OS X, Node: 0.10.9) and version 0.3.6 seems to work fine.
Try changing ports, or clearing npm cache, or removing node_modules?

Resources