I have an angular application built in Visual Studio 2017. I'm using npm, gulp, and browserify to help me manage dependencies, bundling, and minification. Everything had been going along well until I tried to pull in moment, moment-timezone, and angular-moment, when I started having trouble getting these libraries to play nice.
I'm assuming that the issue is related to the way these libraries are being included in my application due to some mistake or bug with the way I'm using npm, gulp, browserify, or the require('...') statements. So, it seems like it'd be helpful for me to explain how I'm doing that.
First, in VS, I added a node configuration file to the project (package.json) and it contains a list of all of my dependencies that will be installed through npm. So, for example, my package.json looks something like this:
{
"property": value,
"otherProperty": otherValue,
"dependencies": {
"angular": "1.5.8",
"angular-ui-router": "1.0.3",
"jquery": "3.1.0",
"moment": "2.18.1",
"moment-timezone": "0.5.13",
"angular-moment": "1.0.1"
}
}
Now, that makes npm go ahead and download everything and stick it in my node_modules folder, but it doesn't actually include anything in my application. So there's a gulp task similar to the following:
var dependencies = Object.keys(packageJson && packageJson.dependencies || {});
browserify({cache: {}, packageCache: {} }})
.require(dependencies)
.bundle()
.pipe(source(js/siteLibs.js))
.pipe(buffer())
.pipe(gulp.dest("."));
Ok, so if that gulp task works correctly, I'll have a file called siteLibs.js that contains all of the js from my npm dependencies, and then I can just make a single script tag to reference siteLibs.js.
The next part, I'm a little hazy on, but do I still have to have an actual require('...') statement in my app for moment, angular-moment, and moment-timezone? If it is required, why? What is it doing?
Now, once at this point, I should be able to go ahead and let my angular app take a dependency on moment, moment-timezone, or angular-moment, and, indeed I can. The issue is that when I call moment.locales(), which is supposed to return a list of all loaded locales, it has naught but 'en-US'. Ok, that's expected because I never loaded any locales. So if I go in my app and say:
require('moment/locales/en-gb');
require('moment/locales/en-au');
require('moment/locales/fr-ca');
It makes no difference. The only loaded locale is en-US. What is the right way to go about getting those additional locales loaded given that I'm using npm, gulp, and browserify?
Refer to this in moment's documentation
https://momentjs.com/docs/#/use-it/browserify/
Related
I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:
resources > assets > vendor
This is a screenshot:
Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.
I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.
This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY
You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.
If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:
Gulp/Elixer installation and setup
In your gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'app.less',
'normalize.less',
'some-other-less.less',
'and-another.less'
]);
mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');
});
While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.
If you don't want to listen, you can just run the gulp command for a single once-off task run.
The docs are pretty straight forward and can be found here:
Gulp/Elixer docs
I try to wrap a javascript library with a meteor package.
When i fork the library it has no built javascript file inside the repository. Normally someone would run grunt dist to build the dist/library.js file.
Meteor Package description:
Package.onUse(function(api) {
api.addFiles([
'dist/library.js',
])
})M
this can't work because the file does not exist yet.
How can i create a package from that library? is coping the library.js file the only way?
If you want to do this, you're going to have to require Grunt, run Grunt through the JavaScript API (not the CLI) to compile dist/library.js, and then require it.
It would be much easier to just compile it outside of Meteor and place it in the folder, but if you want to do things The Right Way™ that's how you'd do it. Let me know if you have any implementation-specific questions!
Here's what I want to do:
Create a node package that features the following:
gulpfile.js
All gulp plugins, tasks, configs.
Install this node package (referred to as "my-gulp" from here on) within an Angular app (referred to as "myApp" from here on) via package.json dependencies.
gulpfile.js is copied into app root.
All Gulp tasks can be run from app.
We currently have something similar setup with Grunt (although without the Gruntfile.js copy stuff). It works pretty well to have a common setup for each of our apps, but also several custom Bower components. Just have to bring it in as a dependency and it magically works.
The main issue I've run into so far is when I add my-gulp to myApp's dependencies, run the install, my-gulp comes in just fine, however the individual plugins (my-gulp dependencies) aren't seen. They're installed, but running something like gulp default or whatever shows them missing.
I've tried to setup Gulp dependencies (in my-gulp) under "dependencies" as opposed to "devDependencies", yet still not quite working.
Does anyone have any experience doing something like this?
Am I doing something blatantly stupid here?
Any help is awesome!
Thanks, everyone :)
The problem is the way npm handles nested dependencies. When you install your "my-gulp" package, the directory tree looks like this:
| myApp
|-- node_modules
|-- my-gulp
|-- node_modules
|-- gulp_dependency
As you can see, the dependencies of "my-gulp" are buried inside its own node_modules directory. myApp cannot access them.
You could use something like npm-flatten to move those to the top directory. Otherwise you'll be forced to add each dependency to myApp's package.json.
Edit:
As indicated in your gist, you can load the dependencies by path instead of package name. Instead of copying your gulpfile, simply require it from myApp, then load its dependencies with a relative path:
// myApp/gulpfile.js
require('my-gulp/gulpfile.js');
// my-gulp/gulpfile.js
var gulpDep = require('./node_modules/gulp-dependency');
Note: This won't work if you use npm dedupe.
I'm evaluating task runners, Grunt and Gulp in particular, but there's one thing I dislike about both of them: the fact that they require a package.json file for your project. This is even though your project might not even be an npm project in the first place. In my case, I'm already using composer.json, which basically does the exact same thing.
I ended up creating my package.json like this:
{
"name": "myproject",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-phpcs": "~0.2.3",
"grunt-phplint": "0.0.5",
"grunt-phpdocumentor": "~0.4.1"
}
}
Note that I'm not maintaining the version number, as that is unnecessary overhead. This works though, in the sense that I can run my grunt tasks after executing npm install. I feel that I should be able to do without this file though. I read that it's possible to use Grunt without a package.json, but my take is that you'd then have to install the node modules manually, which is more overhead. Gulp is no different, or at least I found no evidence to the contrary.
So the question is, are there any task runners that don't require you to define your project's metadata twice, need only a single file, and are not too bleeding edge?
Answering myself, the only thing I could find that seems to fit my requirements is bldr. It is PHP based, uses composer as package management backend, and does it without hijacking the composer.json you might already be using, as it uses bldr.json instead. It also does not require you to add metadata to the file that describes your bldr dependencies. Here's an example dependencies file (taken from http://docs.bldr.io/en/latest/blocks.html):
{
"require": {
"acme/demo-block": "#stable"
}
}
Then, when you run bldr install, your dependencies are installed and you can run your bldr tasks.
In my meteor project I want to use gulp for tasks meteor doesn't support.
Anyway, the problem is that gulp uses a file called gulpfile.js which is loaded by meteor too and gives errors. So my question is, is there a way to tell meteor to ignore some files ?
UPDATE: One solution I can think of is to put gulpfile.js in the folder packages or public and run gulp as follows
$> gulp --gulpfile packages/gulpfile.js
UPDATE: Just noticed that meteor also seems to load node_modules files :(
Unfortunately, in the current release there's no way to tell Meteor to leave certain files alone, so you cannot have gulpfile.js in your main app folder.
You can, however, leave it in an ignored subfolder. Meteor ignores files and directories that ends with tilde ~, the /tests directory and all private files (those beginning with a dot .). So you can create a folder named for example gulp~ and use it for your gulp-related stuff.
The same holds for node_modules folder, you cannot have it in your application, and you shouldn't. If you want to use a node package in your Meteor application, you can do this with npm package.
Add it to your project with mrt add npm command.
Then create packages.json file with a list of all required packages, for example:
{
"something": "1.5.0",
"something-else": "0.9.11"
}
Afterwards, include your package with Meteor.require:
var something = Meteor.require('something');
If you want to use a node package in your gulp tasks, install it inside the ignored directory.