Check out our Angular Book Series.

Copying Static Files - Building Angular 2 Applications with Gulp - Part 4

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, and Part 3.

This entry will show you how to use Gulp to copy files. We'll copy the Angular libraries from the node_modules directory to the build directory, HTML files from the source directory to the build directory, and JavaScript files from the source/js directory to the build directory. These can be done using Gulp directly, you will not need to install additional plugins.

Copy the Angular Libraries

There are a lot of required Angular libraries and we don't want to write a script for each one. Thankfully, we don't have to, as we can specify an array of glob directories to cover all the relevant libraries:


var angularLibraries = [
'core-js/client/shim.min.js',
'zone.js/dist/**',
'reflect-metadata/Reflect.js',
'systemjs/dist/system.src.js',
'@angular/**/
bundles/**',
'rxjs/**/
*.js',
'angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
]

This covers all the JavaScript libraries required for Angular 2 applications such as zonejs and the shim library. It includes the Angular library bundles and the SystemJS library. The use of globs wildcard match files make it easy to find the relevant files needed.

Next, we'll need a destination path to put the libraries:


var destinationPathForJSLibraries = destinationPath + '/js';

I put all the external libraries in the 'js' directory as an organizational tactic. Now the actual task:


gulp.task('copyAngularLibraries', function () {
gulp.src(angularLibraries, {cwd: "node_modules/**"})
.pipe(gulp.dest(destinationPathForJSLibraries));
});

The task is named copyAngularLibraries. It is simple. It takes the array as a source. The cwd flag with the src specifies the current working directory, meaning all the libraries are located in node_modules. Then the task specifies the destination path. This will copy all the required angular files from the node_modules directory to the build/js directory.

Run this task:


gulp copyAngularLibraries

You should see results like this:

You should see an updated build directory:

This is the first step.

Copy JS Libraries

If we have any JavaScript libraries put in the src/js folder we want to copy those to the build directory. The SystemJS Configuration file is one example. The same approach from above can be used, but is even simpler since there are less directories to deal with.

First, create a glob array to find the JS files:


var javaScriptLibraries = [sourceRoot + 'js/**/*.js'];

Then create the task:


gulp.task('copyJSLibraries', function () {
gulp.src(javaScriptLibraries)
.pipe(gulp.dest(destinationPathForJSLibraries));
});

This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous section.

Run the task:


gulp copyJSLibraries

You'll see this:

Check the build directory and see the final file:

The systemjs.config.js file was successfully copied from the src directory to the build directory.

Copy HTML Files

If you're using my Hello World app, it only has a single HTML file. It is likely that a full app will have more, especially if you use external HTML templates. I want to write a task copy all HTML Files from the src directory to the build directory. First, create a glob array to find the HTML files:


var htmlSource = [sourceRoot + '**/*.html'];

Then create the task:


gulp.task('copyHTML', function () {
return gulp.src(htmlSource)
.pipe(gulp.dest(destinationPath));
});

This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous two sections. It could be easily combined with the copyJSLibraries task, however I prefer to keep them separate for logistical reasons, since HTML files and JS files are different. Run the task:


gulp copyHTML

You'll see this:

Check the build directory and see the final file:

The index.html file was successfully copied from the root of the src folder to the root of the build directory.

If you're using our sample Hello World application, a side effect of finishing this part is that your app will run in the browser:

Not an interesting app, but proof our scripts work.

What's Next?

Even though we have a workable application now; there is still a lot we can do as part of our build scripts. In the next article in this series I'll show you how to create source maps. Later articles will cover JavaScript minificiation, how to compile code on the fly, and various different build techniques. You can get all this information right now by signing up for my newsletter using the form below, so do it and be on your way to become an expert Angular 2 Developer.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.