Front End Starter(1)Web Starter Kit

Front End Starter(1)Web Starter Kit

Web Starter Kit
1. Prepare the Env
relies on NodeJS, NPM, Ruby & Sass.

gulp.js is next generation of grunt.
http://segmentfault.com/blog/nightire/1190000000435599

NodeJS and NPM
First of all, check if we already have NodeJS and NPM. Actually we need all these for gulp.js.
>node —version && npm —version
v0.10.33
v1.4.28

Sass and Ruby

Sass
http://www.ruanyifeng.com/blog/2012/06/sass.html
CSS preprocessor, SASS is based on Ruby.

I need to Install Ruby first, My old days, I used to try ruby for a while in old times.
http://sillycat.iteye.com/blog/1154358

I compile and Install the latest version myself
>wget http://cache.ruby-lang.org/pub/ruby/2.1/ruby-2.1.4.tar.gz
>./configure --prefix=/home/carl/tool/ruby-2.1.4
>make
>make install

Config the path
>ruby -v
ruby 2.1.4p265 (2014-10-27 revision 48166) [x86_64-linux]

gem version
>gem -v
2.2.2

Install sass
>gem install sass
Fetching: sass-3.4.6.gem (100%)
Successfully installed sass-3.4.6
Parsing documentation for sass-3.4.6
Installing ri documentation for sass-3.4.6
Done installing documentation for sass after 3 seconds
1 gem installed

2. Set Up Web Starter Kit Project
Download and get the file web-starter-kit-0.5.1.zip.

Unzip the file and place in a right directory.

prepare the dependencies
>npm install

Install gulp
>sudo npm install -g gulp
http://segmentfault.com/blog/nightire/1190000000435599

>gulp --version
[13:07:23] CLI version 3.8.9
[13:07:23] Local version 3.8.9

Start the build-in server
>gulp serve 

3. Prepare the Edit Tool
I am using sublime text 3, and follow this document to make sure we have Package Control there
https://sublime.wbond.net/installation#st3

View —> Show Console
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

How to use the Package Control
https://sublime.wbond.net/docs/usage
ctrl + shift + P (Linux), cmd + shift + P (OS X)

Install the right Plugins
…snip…

4. Development Phases
Start the HTTP server and develop from there
>gulp serve

Start the Prod Mod
>gulp serve:dist

Build the Prod Dist Directory
>gulp

Live Reload, just use ctrl+R in the browser and wait if you are in gulp serve command.
Testing Across Devices, if all our different browsers are visiting this server, any actions on the first browser, the other browsers will automatically follow.

Automate Prefixing
It will automatically add the CSS support for different size of browsers.

JSHint

A lot of Example will be in there
http://localhost:3000/styleguide.html

5. Read the Source Code
Prepare the Project with Right name
>npm install

Open the Project in IDE

Read a little things in gulpfile.js

>gulp pagespeed


Tips
Ubuntu NAT Restarting
I am using ubuntu virtual box on MAC pro, sometimes, I need to restart the NAT network.
>sudo service network-manager restart



References:
Web Starter Kit
https://developers.google.com/web/starter-kit/
https://github.com/google/web-starter-kit

Follow the document
https://developers.google.com/web/fundamentals/getting-started/web-starter-kit/setting-up
https://developers.google.com/web/fundamentals/getting-started/web-starter-kit/development-phases
https://developers.google.com/web/fundamentals/getting-started/web-starter-kit/using-styleguide

https://developers.google.com/web/fundamentals/tools/