Let us look at creating a modern Web front-end project using Yeoman, Bower and Gulp. These tools help you to boost your development productivity by automating tasks such as setting up your project structure, managing dependencies and setting up your development environment. They also aid in routine activities such as building your project, analyzing its code for errors and minifying the code.
In order to leverage Yeoman, Bower and Gulp, we would need node.js installed. These tools come as node packages that we have to acquire using npm (Node Package Manager). npm is part of node.js and is installed when you install node.js.
Creating the project structure with Yeoman
Yeoman helps to create boilerplate project structures with basic code snippets, development and runtime dependencies, and a build tool that can handle Sass & Minification. All of the dependencies and tools are configured at the time of creating the project structure so that the project is ready to go after creation.
Yeoman can generate several types of web apps including Angular, WordPress and Cordova-based applications, by choosing the Yeoman plug-ins or generators. Depending on the generator you have used with Yeoman, the project structure, tools and dependencies may differ.
Steps to Generate the Web App
- Install Yeoman
npm install -g yo - Install the official Yeoman web app generator which sets up Gulp as the build tool
npm install -g generator-gulp-webapp - Create a directory and navigate to the directory from your terminal before issuing the following command.
yo gulp-webapp
You will now be provided with a nice command-line interface where you can use the arrow keys and spacebar to select and deselect the options for installing Sass, bootstrap and modernizr.
Once you select your preferences, hit enter to begin the download of the required tools and dependencies. If there are any front-end dependencies such as jQuery, those will also be installed using Bower in this step.
Finally, Yeoman will generate the following project structure.
Overview of the Project Structure
Root Directory – /
This has all the tool configuration files for npm, jsHint, git, Bower and gulp.
Development Directory – /app
All development is done in this folder, where you keep your custom HTML files, your CSS in the styles directory, your js files in the script directory and images in an uncompiled or non-minified state. All the third-party libraries should go under bower_components dir with a separate directory for each library. We will look at how to manage third-party libraries like jQuery and Bootstrap using Bower in the next section.
Distribution Directory – /dist
This is where all the files that are ready to be deployed to your web server are, once you do a build with Gulp. If you cannot see this on your directory structure, executing gulp without any arguments while in the root directory would create this directory and place HTML, images and concatenated, minified JS & CSS files.
NPM Dependency Directory – /node_modules
Contains the node modules required for various tools such as Bower and Gulp. Contents of this directory are ignored on the .gitignore file, hence it will not be committed to your repo. Developers who use your repo need to explicitly execute the npm install from the root folder to get these node modules before building the app. The required npm modules are listed on package.json. The default package.json that is created by the Yeoman gulp-web app generator looks like this.
[cc escaped=”true” lang=”javascript” file=”2014/06/blog-code-1.js”][/cc]
Unit Test Directory – /test
Any unit tests that we write using any front-end tests frameworks like Mocha or Jasmine should go under this dir. The gulp web app generator for Yeoman comes by default with the mocha test framework. You can switch to Jasmine test framework when executing the gulp-web app generator with yo. For example: yo gulp-webapp –test-framework=jasmine
Committing Code
After you create the project structure, you would need to commit your code to git so that others can start development. If you take a look at your .gitignore file in your root directory, it already has a few directories ignored including node_modules and bower_components; hence these will not go into your repo. This will keep your repo size down, to contain only the code you write for the web app.
Cloning and Building a Project
When one of your team members shares with you a similar project structure, there are a few steps you need to take before building the project. As your team member has already created the structure, you would not need Yeoman in your development environment to build the project. Instead what you will need are node.js, bower and gulp.
Once you have node.js installed you can install bower and gulp with the following commands.
bower – npm install -g bower
gulp – npm install -g gulp
As you know the cloned code base still does not have the required node modules stated in package.json for the tools to work, specially gulp.
To download node modules – npm install
After you install Bower, now you can download the front-end dependencies stated in bower.json.
To download bower components – bower install
That would download bower components and place them in /app/bower_components dir.
Finally, when everything is in place, you can execute gulp to build your cloned project.
Managing front-end dependencies using Bower
Bower is a package manager similar to npm, Maven or NuGet but is specifically built to manage the dependencies of a front-end project. This can include packages containing JavaScript, images and CSS. Twitter and the open-source community maintain Bower and the packages.
The web app dependencies required for the project are stored on the bower.json file similar to the following, which has the package name and required version.
[cc escaped=”true” lang=”javascript” file=”2014/06/blog-code-2.js”][/cc]
Here are a few useful Bower commands.
- Search the Bower registry for a plugin. In this example, it will show all the packages related to angular-ui. [cc]bower search angular-ui[/cc]
- Install the Bower plugin and modify bower.json accordingly. [cc]bower install angular-ui –save[/cc]
- Crosscheck the packages mentioned on bower.json against the
installed bower packages to check their status. This shows whether the packages are installed and whether there are updates to them. [cc]bower list[/cc] - Update a package to the latest version. [cc]bower update angular-ui[/cc]
Building the project with Gulp
Gulp is a build system such as ant, which is built on top of node.js and is especially useful when building web app projects. Gulp depends on a set of gulp plugins that you can install using npm, to carry out a set of housekeeping tasks.
Gulp can automate many parts of your web app build system including the following.
- Compiling SASS files to CSS files.
- Run JSHint to find errors.
- Concatenate and minify JS and CSS files.
- Compress image files.
- Deploy the web app to a built-in webserver and live-reload the browser when a change happens to any of the files in /app directory.
- Deploy your production-ready web app to production servers.
- Run unit tests.
One of the advantages of using a tool like Yeoman to generate your web app is that you would get the build system pre-configured with all the tasks and plugins in place. Gulp plugins are managed as npm modules and can be installed using the npm install command
To install the JSHint gulp plugin manually and add it to package.json as a dev dependency, we can use:
[cc]npm install gulp-jshint –save-dev[/cc]
The following depicts the script task defined by Yeoman in gulp.json.
[cc escaped=”true” lang=”javascript” file=”2014/06/blog-code-3.js”][/cc]
The gulp.json file placed by the Yeoman gulp generator has a few predefined sets of tasks.
- styles – Compile SASS files copy to the styles folder
- scripts – Runs JSHint on all JS files
- HTML – Runs tasks styles, and script as sub-tasks and copies html files to dist directory
- images – Optimizes images and copies them to dist directory
- fonts – Copies font files to dist directory
- clean – Cleans the dist directory
- build – Runs html, images, fonts, extras subtasks
- default – Tasks that runs gulp without any arguments. Consists of running clean and building tasks
- serve – Serves the web app using a built-in web server
- watch – Serves the web app using a built-in webserver and live reloads the browser whenever a change occurs in any of the source codes
I hope the above tips were of use when creating your first front-end project.