Install Gulp

npm install --save gulp
npm install -g gulp
npm install --save gulp-concat
npm install --save gulp-uglify
npm install --save gulp-minify-css

What is Gulp?

Gulp is a platform-agnostic task runner that helps automate complex tasks. It can be used to compile LESS/SASS, CoffeeScript, minify/uglify JavaScript and CSS files, and much more.

Here, we're going to use Gulp to concatenate and minify the JavaScript and CSS files in our bower_components folder.

Create a public dir

mkdir public
mkdir public/js
mkdir public/css
mkdir public/fonts

Our view will stay inside the public folder. Earlier, while we were setting up our Express server, we determined public to be the server root (where localhost will point to, not to be mistaken with application root). This means that the view won't be able to see our bower_components folder or its contents.

As our application evolves, it might gain a few more front-end dependencies, which would mean more imports in our HTML (link, script tags). This doesn't scale on any level. To solve the multiple imports problem, we're going to take every .js file and every .css file needed and merge them on a big .js file and a big .css file, respectively, and import only those to our HTML. This way, as we add dependencies, we can just install them with bower install --save, make whatever necessary changes to our Gulp tasks, then run them.

Create Gulp tasks

We're going to have three tasks: one that concatenates and minifies .js files, one that does the same to .css files and a default task that will run both.

Gulp tasks are defined in a file called gulpfile.js.

vi gulpfile.js

Inside gulpfile.js, require all necessary libs.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');

const PATH = 'public/'; // Setting up our front-end root path

Let's start by defining a simple task such as printing something to our console.

gulp.task('print', function() {
  console.log('Hey, I\'m a gulp task!');
});

Save your file, then

gulp print

This should be the output:

[00:46:30] Using gulpfile ~/mean/mean-apz/gulpfile.js
[00:46:30] Starting 'print'...
Hey, I'm a gulp task!
[00:46:30] Finished 'print' after 322 μs

Now for our actual tasks.

gulp.task('js', function() {

  gulp.src([
      ...
      './bower_components/path/to/your/files.js',
      ...
    ])
    .pipe(concat('3rd-party.js'))
    .pipe(uglify())
    .pipe(gulp.dest(PATH + 'js'))

});

gulp.task('css', function() {

  gulp.src([
    './bower_components/**/*.css',
  ])
    .pipe(concat('3rd-party.css'))
    .pipe(minifyCss())
    .pipe(gulp.dest(PATH + 'css'));

  gulp.src('./bower_components/bootstrap/fonts/*.*') // Import Bootstrap Glyphicons
    .pipe(gulp.dest(PATH + 'fonts'));
});

gulp.task('default', ['js', 'css']);

It's important to note on the order of the array in our js task. It should be the same order you're supposed to import the same scripts into your front-end (e.g. jquery.min.js before angular.min.js so AngularJS uses jQuery, and so on). Since CSS does not need to be concatenated in order, we just add a wildcard path to .css files and merge them.

The above tasks will take the files listed in the array provided to gulp.src and concatenate (merge) those files into a single 3rd-party file, minify the generated file, then move it to the supplied destination (in this case, either public/js, public/css or public/fonts). The default task will run both js and css tasks, in this order.

To run the default task, just run

gulp

on your command line.

Add your concatenated files to .gitignore, then commit

Since these new files created by Gulp will constantly change and are redundant to our bower_components, we also don't add them to source control.

echo 'public/js/3rd-party.js' >> .gitignore
echo 'public/css/3rd-party.css' >> .gitignore
echo 'public/fonts/*' >> .gitignore

Now, let's commit our changes.

git add .
git commit -m "Add Gulp tasks"