We Keep Coding

gulp build task - concat and minify modules

What is a good strategy for concatenating and minifying modules?
I want to take this:
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/satellizer/satellizer.min.js"></script>
etc...
And make it this:
<script src="js/all_bower_components.js"></script>
I am running this build process for my other js files, which are concatenated and minified into main.js, but that's easy because my folder structure for my own JS files is relatively predictable. But my bower components is not:
bower_components/
angular/
angular.js
index.js
other random js files which aren't the ones I need
jquery/
dist/
jquery.js
src/
bunch of other crap
I am attempting it as such: Loop through all components and sub folders and simply search for .js files... but again, this could be including things I do not need like index.js in Angular:
gulp.task('modules', function() {
return gulp.src(['bower_components/**/*.js'])
.pipe(concat('modules.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
Any thoughts?

have you tried main-bower-files? this gulp plugin will capture all your base bower .js and .css by looking in your components' bower.json file for which files to grab (those listed as main). you can override the defaults within your call to the plugin for any requirements that don't match their bower.json config. i've found this very useful for bundling a vendor.js and vendor.css for a dependency-heavy app.
good luck!

Gulp: how to use CDN for js lib?

I'm new in AngularJS and Gulp.
In one example, some libs are copied by Gulp from the node_modules folder in a js/lib/angular2 folder:
gulp.task('libs', function() {
return gulp.src([
'node_modules/angular2/bundles/angular2.dev.js'
... // other libs
]).pipe(gulp.dest(src + 'js/lib/angular2'));
});
then added in index.html via script tag
<script src="js/lib/angular2/angular2.dev.js"></script>
What if I would load them via CDN?
During development I can use local js files, copied by Gulp, but in production have I substitute them "by hand" with their corresponding CDN file (if any)? or there is a way to do it directly with Gulp?
EDIT
I found the plugin gulp-cdnizer

There is a plugin for gulp, gulp-processhtml, that can do this. It uses conditional comments that will remove/replace/add to your HTML files based on the gulp task.
https://www.npmjs.com/package/gulp-processhtml

Gulp output to multiple files rather than one big file?

Is it possible to configure the gulpfile to output several files rather than one?
All the examples I came across demonstrate minification and concatenation of all js files into one big bundle js file the index.html would load.
When your apps get bigger and more complex using many libraries, this bundle gets bloated pretty quickly and you come to an understanding that one big bundle file is not a good fit to scale your app.
Is this concatenation a must? or can we simple minify & uglify & browserify each file to a corresponding minified version in the output folder?
Cheers
Ajar

You can definitely configure a gulpfile to output several files rather than one. For instance, I have a gulp task:
gulp.task('styles', function () {
gulp.src('dev/less/*.less')
.pipe(plumber())
.pipe(less())
.pipe(prefix())
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
});
I have 5 .less files in my less folder, and they become 5 .css files with matching names in my distribution folder.
And for JavaScript files as well:
gulp.task('scripts', function () {
gulp.src('dev/landing/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
Four JavaScript files become uglified versions of themselves in my distribution/js folder.
However, this is a different question if you want to address browserify specifically. browserify builds with the intent of including any dependencies stemming from your initially included JavaScript file.
If keeping separate files is more important to you, you can look into browserify-deoptimizer

Using GULP to load Jquery CDN and other external JS sources

I've been trying to find a definitive answer to a problem I'm having using GULP to load the latest jquery CDN or any other Javascript CDN external sources.
What I've got so far is all our JS files being found in a folder, concatenated to a single file and placed in a new folder called min. Ideally I'd like to also link into the concat process the jquery CDN's and other external js files.
Does anyone know what is the best way to do this?
Here is the code I've got so far:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var notify = require('gulp-notify');
gulp.task('js', function () {
return gulp.src('js/**/*.js') //select all javascript files under js/ and any subdirectory
.pipe(concat('mynewfile.min.js')) //the name of the resulting file
.pipe(uglify())
.pipe(gulp.dest('min')) //the destination folder
.pipe(notify({ message: 'Finished minifying JavaScript'}));
});
gulp.task('watch', function() {
gulp.watch('js/**/*.js', ['js']);
});
gulp.task('default', ['js', 'watch']);

As far as I know, Gulp is a helper to manage your project locally, not by connecting to external sources.
A common approach would be to manage current library versions by a package manager like Bower – there is an integration bridge available (didn't test it though, I just update packages manually).

How to handle angular module dependencies in other directories?

Let's say that, I have a main module:
angular.module('myApp', ['myApp.view1']);
And the other module
angular.module('myApp.view1', ['ngRoute'])
the second one is in another directory in the project.The first module cannot find it's dependency, only if I also add
<script src="view1/view1.js"></script> in the index.html
,but it quickly becomes pretty hard to manage by hand, if one has lots of javascript files.
What is the best way to manage dependencies between angular modules, so that they can recognize each other?

You can use a task runner like grunt or gulp and concatenate all the javascript files during the build step and include that one file in your index.html file. I use gulp and here is a sample gulp task that helps you concatenate all the JS files using the gulp-concat plugin.
gulpfile.js
var gulp = require("gulp");
var concat = require("gulp-concat");
//if all your source js files are inside the src directory
var srcJs = ["src/**/*.js"];
gulp.task("js", function() {
return gulp.src(srcJs)
.pipe(concat("app.js") // concat into 1 file called app.js
.pipe(gulp.dest("dist"); //save app.js in dist directory
});
So add this gulpfile.js in your project root folder and every time you make code changes, go to the project root folder in the command line and run the command "gulp js". This will run the js task and concatenate all your JS files and store it in a file called app.js in the dist directory. And in your index.html file you can always point to this one file dist/app.js.

They can only recognize each other, if they are added as script files. A best practice is to minify all of the javascript files within your directory structure into one file before publishing.