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/