Develop Reference

Meteor React External JS Files

I have an HTML template which is bought from Themeforest, index.html of this template has js files included in the following order:
<!-- Scripts -->
<script src="js/vendor/jquery-2.1.0.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/vendor/HeadsUp.js"></script>
<script src="js/vendor/chart.min.js"></script>
<script src="js/vendor/jquery.mixitup.min.js"></script>
<script src="js/vendor/jquery.swipebox.min.js"></script>
<script src="js/vendor/masonry.min.js"></script>
<script src="js/vendor/swiper.min.js"></script>
<script src="js/vendor/materialize.min.js"></script>
<script src="js/main.js"></script>
</body>
How and where should I include these external js files in my Meteor React application?

As mentioned in this meteor documentation, you can create a compatibility folder from on client.
This folder is for compatibility with JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
It is recommended to use npm for 3rd party JavaScript libraries and use import to control when files are loaded.

In AngularJS how do I substitute minified javascript files with non-minified files in my development environment?

What is the best way to handle this in AngularJS?
I have an AngularJS app that includes concatenated/minified javascript files, however in my development environment I want to load the non-concatented/non-minified versions of the file. I want this because it is easier to debug the code with non-minified files.
<!-- production -->
<script src="js/all.min.js"></script> <!-- contains all concatenated/minified code -->
<!-- dev -->
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
I am not sure how to do this since in AngularJS I couldn't find a conditional mechanism that is suitable. I had thought about using a directive on the each script tag?
I am using Gulp to concat and uglify the files, but I couldn't find a method to accomplish this with Gulp.
PHP is the server-side language.
Any help will be greatly appreciated.

You could create a "Source Map" to go along with the minified javascript file. The source map can then be used when debugging so you can see the original code. If you are using for example UglifyJS 2.0 or Closure Compiler there is an option of creating a source map when you create the minified javascript.
Fore more information about source maps and debugging: source maps debugging in Google Chrome

The best way to to do this in Angular might be to use ngInclude to conditionally load an ngTemplate. It would look like this:
<script type="text/ng-template" id="development">
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
script src="js/directives.js"></script>
</script>
<script type="text/ng-template" id="production">
<script src="js/all.min.js"></script>
</script>
<div id="javascripts" ng-include="dev ? 'development' : 'production'"></div>
If you are using $scope in your controller then just set $scope.dev to true to include development JavaScript, or false to use the production file.
Edit: But as others have said you should look into a task runner for this instead. Also, look at environment variables for setting what state the project is in.
Edit 2: As for using Gulp for this you can use the gulp-html-replace package. A task using this package would look like this:
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('replace-js', function(){
if (process.env.NODE_ENV === 'production') {
gulp.src('index.html')
.pipe(htmlreplace({
'js': ['js/services.js', 'js/controllers.js', 'js/directives.js']
}))
}
});
for this html:
<!-- build:js -->
<script src="js/all.min.js"></script>
<!-- endbuild -->
(Edit 3: I noticed you might not use node, the stuff below is node specific so you will have to adjust to your needs)
When you run gulp you will have to set the environment variable, that process.env.NODE_ENV you see in the if statement. Do this by running Gulp like this:
set NODE_ENV=production && gulp replace-js
This is OS specific so google "set environment variable node YOUR_OS" if it doesn't work.
In your package.json add that script to the scripts key, or add the scripts key if it doesn't exist so it might look like this:
"scripts": {
"replace-js": "set NODE_ENV=production && gulp replace-js"
}
Then you can just use this command instead of typing all of that out:
npm run replace-js
I'm just going from memory, and have never used gulp-html-replace so hopefully I didn't make any errors and cause you confusion.

Grunt to minify and reference .min files

I need to:
Copy index.html to index.uncompressed.html
Change some the references in index.html from .js to .min.js (i.e. my_jsfile.js to my_jsfile.min.js)
3) Minify index.html
I am using Grunt.
Number 3 is no problem.
I assume number 1 will be easy.
For number 2, I was planning on using some sort of Grunt editing plugin and changing all .js file references between <!-- Start Here --> and <!-- End here --> from my_jsfile.js to my_jsfile.min.js.
Is this the way this type of thing is done?

The resource I use in this situation is grunt-processhtml, which will do exactly what you're looking for. Check out one of my repos, steady-backbone-boilerplate, where I use this to do exactly what you're describing.
In particular, I find this is a helpful example:
<!-- build:[src] js/source.min.js -->
<script data-main="js/main" src="js/vendor/require.js"></script>
<!-- /build -->
So, in development we're using the requirejs script to load all our dependencies. In our production index.html file, we're loading the source js file, which has been minified with the grunt-requirejs module.

Combine multiple javascript files with bower

I'm looking into using Bower with my project (more specifically, django-bower), and I was curious if bower has the ability to combine multiple javascript files into one file when pushing to production.
In other words it would take:
jquery.min.js
angular.min.js
something_else.js
another_thing.js
and produce one file that the user loads: everything.js
In reality we have upwards of 20-30 js files, which is why this would be incredibly helpful.

Bower is a package manager. I think what you're looking for is Grunt.
See how to minify multiple js files using grunt.

Use Browserify. It takes your Node requires and compiles them into a single JS file that can be included in your HTML. Ex main.js:
var JQuery = require('jquery');
var Angular = require('Angular');
require('./something_else');
require('./another_thing');
Browserify your dependency chain...
browserify main.js > compiled.js
Include in your HTML
<html>
<head>
<script type="text/javascript" src="compiled.js"></script>
</head>
</html>

How do I load third party JavaScript from a CDN when using RequireJS?

I've been using RequireJS for dependency management and must say that I love it - JavaScript has really matured recently.
However, one thing I cannot figure out is this: When using the optimizer to bundle all my JavaScript modules into one file, how can I keep loading some thirt party scripts (such as jquery) from an external CDN URL instead of having to bundle it with my application code?

This will load jQuery from a CDN:
<script src="http://requirejs.org/docs/release/2.1.5/comments/require.js"></script>
<script type="text/javascript">
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min"
},
waitSeconds: 40
});
</script>
<div id="message">hello</div>
<script type="text/javascript">
require( ["jquery"],
function ($) {
alert($.fn.jquery + "\n" + $("#message").text());
}
);
</script>
Fiddle Here.
This page from the requirejs docs shows how to eliminate a path from the optimised build. Basically use the empty: scheme. Excerpt here:
node ../../r.js -o name=main out=main-built.js baseUrl=. paths.jquery=empty: