Creating New Projects With Google’s Web Starter Kit [Guide]

Google have only expelled a boilerplate named Google Web Starter Kit. Web Starter Kit is directed to assistance web developers to start a new web growth plan quickly.

Google Web Starter Kit features

It contains absolute collection such as BrowserSync, LiveReload, HTTP Server, PageSpeed, ImageMin, Sass Compiler, JSHint, and a integrate of templates that we can use to rise web applications that works in mixed devices. Let’s take a demeanour to see how we can start regulating a Web Starter Kit.

Getting Started

Google Web Starter Kit can be downloaded from Google Web Starter Page and we can use it right away. But to make use of a collection that comes with it we will have to implement a following tools.

First, ensure that we have commissioned NodeJS, that is compulsory to run a series of Gulp tasks including PageSpeed, ImageMin and JSHint.

Since Web Starter Kit uses Sass to harmonise a CSS, you’ll also need to implement Ruby and Sass.

Lastly, we will also need to implement Gulp. Web Starter Kit also comes with a series of Gulp plugins that automates growth tasks. All Gulp plugins are pre-configured within gulpfile.js that can be found in a Web Starter Kit base directory.

To implement Gulp, use a authority below.

npm implement gulp

Once all these collection are set, we can start regulating a Web Starter Kit.

Using Web Starter Kit

As mentioned, we can download Web Starter Kit from Google Web Starter Page and remove it to your preferred folder. Another approach we can get a pack is to use git authority to download it from a Github Repository. Run:

git counterpart https://github.com/google/web-starter-kit.git

This authority will duplicate all Web Starter Kit to your computer. This will also move a new folder named “web-starter-kit” containing a series of folders including an app folder, Gulpfile.js, package.json and others. Next, we will implement Web Starter Kit dependencies (files and libraries that are compulsory for development). Simply run this authority to implement a dependencies:

npm install

Once a dependecies are installed, we are all set and can start building a web application. At this point, all a files and folders are in a plan directory.

Build Web Starter Kit with Gulp

Web Starter Kit is versed with Gulp plugins to revoke a weight of a growth tasks. The following are some useful commands that we can keep in mind. Run them in Terminal or Command Prompt.

gulp serve. This authority serves a app in a browser with a localhost residence as good as runs a LiveReload that refreshes a page in a browser whenever you’ve done a change in a files. The authority will also run BrowserSync. As we have discussed in a prior tutorial, BrowserSync will synchronize user communication like clicks, scrolls, and reloads a pages opposite mixed inclination as we revise a files.

Web Starter Kit noticed in Chrome mobile emulation.

gulp pagespeed is another useful command. This authority will uncover a pages opening scores of your focus as per a Google-owned PageSpeed API. It’s a accessible apparatus to get discernment to your pages bucket perfomance.

The gulp command, in turn, generates a new folder named dist folder, that contains a distribution-ready files. Files such as HTML, JS, CSS, and images in this folder are optimized and compressed.

A few caveats

Web Starter Kit is built with slicing corner web technology. The Web Starter Kit only works with a latest chronicle of browsers such as Internet Explorer 10, Firefox 30, Chrome 34, Opera 23, and Safari 23. Furthermore, formed on my test, there are a few glitches that start in Internet Explorer 9 and any progressing chronicle of a above mentioned browsers. So, if we are thankful to make your web focus to work in comparison browsers, we competence need a bit some-more work to fill a record gaps of those browsers.

Conclusion

Using a Google Web Starter Kit will assistance in a growth of a absolute and well-performing multi-device web application. The pack contains templates for a styling beam and is a absolute apparatus that’s pre-configured, so that we can rise a web focus plan quickly.

Creating New Projects With Google’s Web Starter Kit [Guide]