Related
I maintain an browser-based Angular app that was at version 5.6. This app has two components that subscribe to an IOT topic and listen for updates (no pub, just sub).
We need to upgrade to Agnular 11.0.3. I have completed that work. But now the aws-iot-device-sdk NPM module caucuses these errors when I try to run the local web server or run a build:
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/common/lib'
Error: Can't resolve 'path' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'tls' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device/lib'
I have spent many hours pulling my hair out on this issue. Our front-end (browser) IOT code has been working perfectly for the last few years. But the upgrade to Angular 11.0.3 has to happen and this issue is a big blocker.
SAMPLE CODE FROM OUR APPLICATION:
(Our package.json is at the end)
The xxxx-app.component.ts file:
import { AwsIotService } from '../../shared/awsIot/awsIot.service';
this.awsIotService.getNewIotConnection(this.iotTopic, this.iotUrl, (iotClient) => {
//cache the iotClient
this.iotClient = iotClient;
//handle the iotClient's message event
iotClient.on('message', (topic, message) => {
// process the message here:
console.log('IOT Message received:');
console.dir(message);
});
});
awsIotService.ts:
In the code below, "iotUrl" points to a custom service we wrote that provides the details needed by the browser-based Angular app in order to connect and subscribe:
awsIot = require('aws-iot-device-sdk'); //simply requiring that NPM module causes the errors stated above
getNewIotConnection (topic, iotUrl, callback) {
this.httpClient.get(iotUrl).subscribe(responseData => {
const client = this.awsIot.device({
port: 443,
protocol: 'wss',
region: responseData.region,
host: responseData.iotEndpoint,
secretKey: responseData.secretKey,
accessKeyId: responseData.accessKey,
sessionToken: responseData.sessionToken,
});
// subscribe to the topic
client.on('connect', () => client.subscribe(topic));
// call the callback
callback(client);
});
}
UP-TO-DATE SUGGESTIONS THAT I HAVE TRIED:
1 - I have tried using https://www.npmjs.com/package/aws-iot-device-sdk-v2
....but have not found the documentation helpful... I hope I am missing something here.
2 I have tried AWS amplify and followed this tutorial:
https://docs.amplify.aws/start/getting-started/installation/q/integration/angular
...but using AWS amplify to solve this issue would require a re-work of the back-end we built and seems like getting a new transmission for a flat tire (i.e. just need to subscribe to an IOT topic).
OLDER WORKAROUNDS THAT I HAVE TRIED:
3 I tried adding this to package.json:
"browser": {
"fs": false,
"path": false,
"os": false
}
...that did not work.
4 I tried adding this to package.json:
"dependencies": {
...other packages
"mqtt": "2.15.1",
"minimist": "1.2.0",
"websocket-stream": "^5.0.1",
"crypto-js": "3.1.6"
}
...that did not work.
5 I tried the patch.js approach detailed here:
https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d
...that did not work.
6 I tried adding this to webpack.config.js :
resolve: {
fallback: {
fs: false
}
}
...that did not work.
7 I tried adding this to webpack.config.js :
node: {
fs: 'empty'
}
...that did not work (only works in older WebPack.)
Our package.json (just dependencies & devDependencies):
"dependencies": {
"#angular/animations": "^11.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "^11.0.3",
"#angular/core": "^11.0.3",
"#angular/forms": "^11.0.3",
"#angular/platform-browser": "^11.0.3",
"#angular/platform-browser-dynamic": "^11.0.3",
"#angular/router": "^11.0.3",
"#mapbox/mapbox-gl-draw": "^1.2.0",
"#mapbox/mapbox-gl-geocoder": "^2.2.0",
"#ng-bootstrap/ng-bootstrap": "^8.0.0",
"#turf/helpers": "^6.0.0",
"#turf/inside": "^5.0.0",
"#turf/turf": "^5.1.6",
"#types/lodash": "^4.14.165",
"#types/unist": "^2.0.0",
"angular-calendar": "^0.28.22",
"aws-iot-device-sdk": "^2.2.6",
"core-js": "^3.6.4",
"date-fns": "^2.16.1",
"intl": "^1.2.4",
"jquery": "^3.1.1",
"lodash": "^4.17.20",
"mapbox-gl": "^2.0.0",
"moment": "^2.12.0",
"moment-timezone": "^0.5.27",
"ng2-datepicker": "^3.1.1",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.6.3",
"selenium-webdriver": "^3.6.0",
"tslib": "^2.0.0",
"zone.js": "^0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.3",
"#angular/cli": "^11.0.3",
"#angular/compiler": "^11.0.3",
"#angular/compiler-cli": "^11.0.3",
"#ngtools/webpack": "^11.0.3",
"#types/jasmine": "^3.6.2",
"#types/jquery": "^2.0.34",
"#types/node": "^14.14.10",
"#webpack-cli/serve": "^1.1.0",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"codelyzer": "^6.0.0",
"copy-webpack-plugin": "^6.3.2",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"exports-loader": "^1.1.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"jasmine-core": "^3.6.0",
"jasmine-spec-reporter": "^5.0.0",
"karma": "^5.2.3",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"karma-mocha-reporter": "^2.2.5",
"mini-css-extract-plugin": "^1.0.0",
"postcss": "^8.1.13",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-nested": "^5.0.2",
"protractor": "^7.0.0",
"raw-loader": "^1.0.0",
"rimraf": "^3.0.2",
"retyped-stripe-tsd-ambient": "^0.0.0-0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"script-ext-html-webpack-plugin": "^2.1.5",
"style-loader": "^2.0.0",
"to-string-loader": "^1.1.6",
"ts-loader": "^8.0.11",
"ts-node": "^8.3.0",
"tslint": "^6.1.0",
"typescript": "4.0.3",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
Does this help? The author seemed to have/avoid the same trouble as you. He mentions:
"browser": {
"fs": false,
"tls": false,
"path": false
},
I'm using the following environment:
Angular CLI: 12.2.13
Node: 16.13.0 (Unsupported)
Package Manager: npm 8.1.0
OS: linux x64
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1202.13
#angular-devkit/build-angular 12.2.13
#angular-devkit/core 12.2.13
#angular-devkit/schematics 12.2.13
#angular/cdk 12.2.12
#schematics/angular 12.2.13
ng-packagr 12.2.5
rxjs 6.6.7
typescript 4.3.5
And in order to complement the approach of #kackle123, the following worked for me in package.json:
"browser": {
"http": false,
"https": false,
"net": false,
"path": false,
"stream": false,
"tls": false,
"fs": false
}
But it only mute the error outputs, and the package will not work anyways.
This is the part in my gulpfile:
gulp.task('compile-js', function () {
// app.js is your main JS file with all your module inclusions
return browserify({
extensions: ['.js', '.jsx'],
entries: 'javascripts/app.js',
debug: true
})
.transform('babelify', { presets: ['es2015', 'react'] })
.bundle()
.pipe(source('bundle.min.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
.pipe(livereload())
})
in my javascripts/app.js:
I have, for an example:
async function write () {
var txt = await read();
console.log(txt);
}
I get this error:
GulpUglifyError: unable to minify JavaScript
This is part of my package.json:
"dependencies": {
"animate.css": "^3.5.2",
"aos": "^2.2.0",
"autosize": "^4.0.0",
"axios": "^0.16.2",
"es6-docready": "^1.0.0",
"foundation-icon-fonts": "^0.1.1",
"foundation-sites": "^6.4.3",
"gulp-clean-css": "^3.9.0",
"gulp-cssimport": "^5.1.1",
"jquery": "^3.1.1",
"jquery-ui-bundle": "^1.12.1",
"material-design-icons": "^3.0.1",
"swiper": "^3.4.2",
"vue": "^2.4.4"
},
"repository": {
"type": "git",
"url": "[git-url-of-your-project]"
},
"devDependencies": {
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^14.3.0",
"browserify-shim": "^3.8.12",
"gulp": "^3.9.1",
"gulp-clean-css": "^3.0.4",
"gulp-clone": "^1.0.0",
"gulp-concat": "^2.6.0",
"gulp-concat-css": "^2.3.0",
"gulp-cssimport": "^5.0.0",
"gulp-foreach": "^0.1.0",
"gulp-htmlmin": "^3.0.0",
"gulp-less": "^3.3.2",
"gulp-livereload": "^3.8.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^2.1.2",
"streamqueue": "^1.1.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
What else should I add to my gulp process for ES6?
EDIT:
so following the babel doc for es2017:
I have installed:
npm install --save-dev babel-preset-es2017
And changed my gulpfile:
...
.transform('babelify', {
presets: ['es2015', 'es2017', 'react'],
I don't get any error during the compilation, but I get this error on the browser console when I run my code on my browser:
Uncaught ReferenceError: regeneratorRuntime is not defined
Had similar issue with gulp-uglify, and as I've found out it seems that minifying async/await is not supported with base gulp-uglify, so I switched to babel-minify, and it worked for me.
EDIT: For regeneratorRuntime is not defined error, I think that regenerator-runtime could be helpful.
I've solved the problem replacing:
.pipe(uglify()) by .pipe(minify())
https://www.npmjs.com/package/gulp-minify
I'm trying to stop using bower dependencies in my Ember project. I updated ember-cli to 2.15.1 and moved bower dependencies to package.json. Maybe it will be helpfull to know which dependencies:
"font-awesome": "~4.7.0",
"jquery.inputmask": "
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
We also used bootstrap-datepicker as a bower dependency, but due to the error message I swapped it for ember-bootstrap-datetimepicker hoping that it would solve my issue. I reinstalled node_modules, removed bower_components, cleared tmp and dist folders and run npm cache clean && bower cache clean. From the project, I removed bower.json and .bowerrc. I also explicitly defined in package.json bowerDirectory: null so that in ember-cli-build.js broccoli won't be looking for any bower components.
in my ember-cli-build.js :
const isProductionLikeBuild = ['production', 'staging', 'review', 'e2e-testing'].indexOf(env) > -1;
const app = new EmberApp(defaults, {
fingerprint: {
enabled: isProductionLikeBuild,
prepend: envConf.assetsPrefix
},
sourcemaps: {
enabled: !isProductionLikeBuild
},
minifyCSS: { enabled: isProductionLikeBuild },
minifyJS: { enabled: isProductionLikeBuild },
'ember-cli-babel': {
includePolyfill: true
},
'ember-bootstrap-datetimepicker': {
"importBootstrapCSS": true,
"importBootstrapJS": true,
"importBootstrapTheme": true
},
'ember-font-awesome': { fontsOutput: '/assets/fonts' },
exportConfig: {
environments: [
'production',
'staging',
'review',
'e2e-testing'
]
}
});
When I turn off sourcemaps, app is building correctly.
When I don't however, this is what I get after typing ember s:
The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/martagajowczyk/Desktop/Project/project-frontend/tmp/source_map_concat-input_base_path-S2ZmmRR0.tmp/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at SourceMap.addFile (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:200:16
at Array.forEach (native)
at Concat.<anonymous> (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:198:24)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:419:12
at initializePromise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:567:5)
at new Promise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:1039:33)
The broccoli plugin was instantiated at:
at BroccoliMergeTrees.Plugin (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-plugin/index.js:7:31)
at new BroccoliMergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:16:10)
at Function.BroccoliMergeTrees [as _upstreamMergeTrees] (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:10:53)
at mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/merge-trees.js:85:33)
at EmberApp._mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1832:12)
at EmberApp.javascript (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1307:17)
at EmberApp.toArray (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1689:12)
at EmberApp.toTree (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1711:38)
at module.exports (/Users/martagajowczyk/Desktop/Project/project-frontend/ember-cli-build.js:46:14)
at Builder.setupBroccoliBuilder (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/models/builder.js:56:19)
What can be the reason of linking to bower_components?
Thanks
Output from ember version --verbose && npm --version && yarn --version:
ember-cli: 2.15.1
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k
os: darwin x64
3.10.10
0.24.6
Here's part of my package.json with dependencies and dev-dependencies listed:
"devDependencies": {
"broccoli-asset-rev": "^2.5.0",
"ember-ajax": "^3.0.0",
"ember-bootstrap-datetimepicker": "^1.1.0",
"ember-buffered-proxy": "^0.7.0",
"ember-can": "^0.8.4",
"ember-cli": "^2.15.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-autoprefixer": "0.8.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-bootstrap-datepicker": "^0.5.6",
"ember-cli-code-coverage": "^0.4.1",
"ember-cli-content-security-policy": "1.0.0",
"ember-cli-dependency-checker": "^2.0.1",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.6.1",
"ember-cli-mirage": "^0.3.1",
"ember-cli-moment-shim": "^3.5.0",
"ember-cli-page-object": "1.11.0",
"ember-cli-polyfill-io": "^1.2.2",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-uglify": "^1.2.0",
"ember-cli-yuidoc": "0.8.8",
"ember-cp-validations": "^3.3.0",
"ember-data": "^2.13.1",
"ember-deep-set": "^0.1.2",
"ember-exex": "^0.1.12",
"ember-export-application-global": "^2.0.0",
"ember-feature-flags": "3.0.0",
"ember-font-awesome": "4.0.0-alpha.3",
"ember-inflector": "^2.0.0",
"ember-inputmask": "0.4.0-beta.5",
"ember-intercom-io": "^0.1.3",
"ember-intl": "^2.23.1",
"ember-intl-cp-validations": "^3.0.1",
"ember-load-initializers": "^1.0.0",
"ember-math-helpers": "^2.0.5",
"ember-modal-dialog": "^2.3.0",
"ember-moment": "7.4.1",
"ember-multiselect-checkboxes": "^0.10.3",
"ember-power-select": "^1.8.2",
"ember-promise-helpers": "^1.0.3",
"ember-radio-button": "1.1.1",
"ember-resolver": "^4.1.0",
"ember-responsive": "2.0.4",
"ember-rl-dropdown": "^0.10.1",
"ember-route-action-helper": "^2.0.3",
"ember-simple-auth": "1.4.0",
"ember-sinon": "1.0.1",
"ember-sinon-qunit": "2.0.0",
"ember-sliding-sticky": "^1.0.0",
"ember-source": "^2.13.0",
"ember-svg-jar": "^0.11.1",
"ember-test-selectors": "0.3.7",
"ember-truth-helpers": "1.3.0",
"ember-uploader": "^1.2.2",
"ember-watson": "^0.9.1",
"eonasdan-bootstrap-datetimepicker": "~4.17.42",
"loader.js": "^4.4.0",
"modal-dialog": "1.6.3",
"yuidoc-ember-theme": "^1.3.0"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"broccoli-funnel": "^2.0.1",
"font-awesome": "~4.7.0",
"jquery.inputmask": "3.3.4",
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
}
I strongly assume your problem is ember-cli-bootstrap-datepicker. This addon does add the bootstrap-datepicker bower package during installation and probably should not be used without it.
Personally if you're looking for an ember DatePicker I recommend ember-pikaday.
If you need recommendations about addons I recommend ember observer, or ask in the slack channel references on the community page..
I'm using the default source mapping built into Brunch. I see the files fine, but I cannot hit breakpoints within the source mapped files. Using the Javascript access to the debugger via debugger; works, which leads me to believe it's something wrong with the Brunch side of things.
Here is my brunch-config.js:
module.exports = {
files: {
javascripts: {
joinTo: {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
entryPoints: {
'source/scripts/app.jsx': 'js/app.js'
},
order: {
before: /^(?!source)/
}
},
stylesheets: {joinTo: 'css/core.css'},
},
paths: {
watched: ['source']
},
modules: {
autoRequire: {
'js/app.js': ['source/scripts/app']
}
},
plugins: {
babel: {presets: ['latest', 'react']},
assetsmanager: {
copyTo: {
'assets': ['source/resources/*']
}
},
static: {
processors: [
require('html-brunch-static')({
processors: [
require('pug-brunch-static')({
fileMatch: 'source/views/home.pug',
fileTransform: (filename) => {
filename = filename.replace(/\.pug$/, '.html');
filename = filename.replace('views/', '');
return filename;
}
})
]
})
]
}
},
server: {
run: true,
port: 9005
}
};
I have tried setting the sourceMaps property of config to 'old' and 'absoluteUrl' and 'inline' (see Brunch config documentation) but still I do not hit breakpoints.
I run the command brunch watch --server and I am using Chrome. Same behavior in Chrome Canary. I hit the breakpoints in Firefox, no problem there.
It's interesting to note that the sourced map files have a base 64 string seemingly for their definition, something like:
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpb...
The mapping appears to be working, but why can't I hit breakpoints in Chrome devtools?
MVCE available. Follow these instructions:
Clone this example repository
npm install
brunch build (make sure it is installed globally with npm install brunch -g)
Open in Chrome devtools and set a breakpoint
Reload the app in attempt to hit the breakpoint
For additional information, here's my package.json:
{
"version": "0.0.1",
"devDependencies": {
"assetsmanager-brunch": "^1.8.1",
"babel-brunch": "^6.1.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-rewire": "^1.0.0-rc-5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.11.6",
"browser-sync-brunch": "^0.0.9",
"brunch": "^2.10.9",
"brunch-static": "^1.2.1",
"chai": "^3.5.0",
"es6-promise": "^3.2.1",
"eslint-plugin-react": "^5.1.1",
"expect": "^1.20.2",
"html-brunch-static": "^1.3.2",
"jquery": "~2.1.4",
"jquery-mousewheel": "^3.1.13",
"mocha": "^3.0.0",
"nib": "^1.1.0",
"nock": "^8.0.0",
"oboe": "~2.1.2",
"paper": "0.9.25",
"path": "^0.12.7",
"pug": "^2.0.0-beta10",
"pug-brunch-static": "^2.0.1",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-mock-store": "^1.1.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.3",
"spectrum-colorpicker": "~1.8.0",
"stylus-brunch": "^2.10.0",
"uglify-js-brunch": "^2.10.0",
"unibabel": "~2.1.0",
"when": "~3.4.5"
},
"dependencies": {
"jwt-decode": "^2.1.0",
"lodash": "^4.17.4",
"postal": "^2.0.5",
"rc-tree": "^1.3.9"
},
"scripts": {
"test": "mocha --compilers js:babel-register"
}
}
Issue created on brunch's Github.
UPDATE
Solved by fixing my brunch config as specified in the #JohannesFilter's answer to this question.
This was a byproduct of a valid but conflicting Brunch configuration. See the answer to this question from #JohannesFilter.
In essence, it seems that files.joinTo and files.entryPoints are mutually exclusive in that files.entryPoints will override the output of files.joinTo if they overlap. The solution is to choose one or the other, or make sure that they do not overlap on the files they are dealing with. For example, both of these are working configurations:
entryPoints: {
'source/scripts/app.jsx': {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
}
or
joinTo: {
'js/lib.js': /^(?!source\/)/
},
entryPoints: {
'source/scripts/app.jsx': {
'js/app.js': /^source\//
},
}
gulp-load-plugins is not loading any plugins. Can anyone suggest why this might be?
Node: v0.12.0
NPM: v2.7.3
My package.json:
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0"
}
}
My gulpfile.js:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
console.log(JSON.stringify(plugins)); // {}
gulp.task('default');
Install other gulp plugins.
tl;dr
If that is your complete package.json, looks like you have no other gulp plugins installed.
Lets say the following is your package.json:
package.json
{
"name": "foo",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-load-plugins": "^0.9.0",
"gulp-rename": "^1.2.0",
"gulp-concat": "^2.5.2"
}
}
You $ npm install everything, then...
gulpfile.js
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
// `plugins.rename` should exist
// `plugins.concat` should exist
console.log(JSON.stringify(plugins));
gulp.task('default');
Try setting lazy loading to false.
var gulp = require('gulp');
var plugins= require('gulp-load-plugins')({lazy:false});
console.log(JSON.stringify(plugins));
gulp.task('default');
And as others mentioned, install some plugins.
Let me show you what i have and how i do it , maybe that will help.
My package.json :
{
"dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-html-validator": "0.0.5",
"gulp-image-optimization": "^0.1.3",
"gulp-plumber": "*",
"gulp-rev-collector": "^0.1.4",
"gulp-rev-manifest-replace": "0.0.5",
"gulp-ruby-sass": "*",
"gulp-sass": "*",
"gulp-scss-lint": "^0.1.10",
"gulp-sourcemaps": "*",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"vinyl-paths": "^1.0.0"
},
"devDependencies": {
"del": "^1.1.1",
"gulp-cached": "^1.0.4",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.6",
"gulp-filesize": "0.0.6",
"gulp-gzip": "^1.0.0",
"gulp-htmlhint": "0.0.9",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^0.8.0",
"gulp-rename": "^1.2.0",
"gulp-rev": "^3.0.1",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.1",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.2"
}
}
How i run gulp-load-plugins :
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
}),
And this is an example of a plugin:
// html optimization
gulp.task('htmloptimize', function () {
return gulp.src(dev.html)
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist.dist))
});
As you can see all my pipes are called .pipe($.plugin()) meaning $ stands for gulp- . If you have a plugin named gulp-name-secondname you call it like this: .pipe($.nameSecondname()) .
Top were i require gulp-load-plugins i have camelize set to true . Lazy loading loads only the plugins you use not all of them .
Careful with gulp-load-plugins because it slows your tasks , for example i run gulp-webserver , when i use it with gulp-load-plugins the task finishes after 200ms versus 20ms if i use it normally. So don't use with everything, play with it see how much performance you lose on each task and prioritize.