Devtantra Blog

Tutorials about Android, Angular, ReactJS, PHP, MySQL and Web Development

Build Web with Google Web starter Kit

In that time world massive website developers are trying to switch websites design from static to responsive design by which there users can easily interact with those company websites or blog websites even many CMS are also trying to build responsive and good looking theme for users as like WordPress Twenty Fifteen theme which is totally responsive & blogging theme, Ghost themes etc…

Web Fundamentals

In that way CSS3 media tag is first option of developers, but for that you will need to define your code for each section according to device which is very typical ; So for that Google developed a stranded UI for your different device and its name is Google web starter . Let See how to setup this

Setup

Web Starter Kit relies on NodeJS, NPM, Ruby & Sass to work, once you’ve got these on your machine.

First step to install Nodejs and Gulp  Node is used to run Gulp, the task runner. NPM is used to download the modules needed to perform certain tasks in Gulp.

If you aren’t sure if you have NodeJS and NPM, check by opening a terminal and running node -v. If Node responds, check the version matches the current version on NodeJS.org.

If you don’t get a response or have an old version then go to NodeJS.org and click on the big green Install button. NPM will be installed with NodeJS automatically. After install the current version then install the Gulp in your system by open terminal and type this command

$ npm install -g gulp

The second step is to go to https://developers.google.com/web/starter-kit/ and download and extract the zip.

Next, you need to install the local dependencies for Web Starter Kit. Open a terminal, change directory into your project folder and run the following npm install scripts.

$ cd web-starter-kit
$ npm install
$ npm install gulp -g

That’s it! You now have everything that’s needed to use the Gulp tools in Web Starter Kit.

The next section of this guide covers how to use Gulp, but if you want to see how things look, try running the local server by typing gulp serve.

Then setup your gulp server

$ gulp serve

After that Output on Screen is

server

This kit is also support live editing system…..

0
0

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: