Loading
Ric McLaughlin
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Session 3
Getting Projects on Github using Node, Yeoman & Gulp.js
Browser
Command Line
Editor
copy this.json that.json
//this is a comment
function (param) {
return foo;
}
Browser
And I am loving my new github Jekyll website!!
He's gonna hire me for sure!
I'm gonna send it to that dev manager Morris!!
And I am loving Anne's new portfolio... She is showing me she can
And she has a project in her portfolio... but that is kinda weak - she needs more projects to really SHOW me she can code
She can collaborate with others because
she's on github
communicate ideas because
her blog Rocks!
And man, that is one ugly website...
HTML Website
Address: user.github.io
LOCATION: not on gh-pages branch! -> unknown!
*.md
*.html
*.yml
Only your personal github website works like this
Browser
https://github.com/ricmclaughlin/first_one
Browser
If the project is here:
https://github.com/ricmclaughlin/first_one/tree/gh-pages
The project's website is on the gh-pages branch:
I totally remember that Github stores your project website in the gh-pages branch!
The process of putting your "built" website on the gh-pages branch is manual
# go to your first_one project directory
cd first_one
# make your gh-pages branch & checkout (in one step!)
git checkout -b gh-pages
# confirm we did it right
git status
# push the branch to git hub
git push origin gh-pages
This process is error prone and annoying and I keep having to do it.
a website template I can:
compiles sass automatically
will deploy to gh-pages on github
has live reload so I can see my changes
make over and over again
compiles sass javascript
runs tests
But back the real world... I wish there was a way...
I know a way!
I'm Yeoman and I help you create project scaffolding and my friend gulp helps you automate tasks in JavaScript!
Tasks like copying files, deploying code to github & tons of other stuff.
JavaScript?
We need node.js!
And we are gonna need a JavaScript tool chain!
How do I run JavaScript tasks?
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
Node.js is what makes the deal enables JavaScript on the server! It makes Universal JavaScript possible!
and what do we do with the tools?
Control Source Code
We need to:
Tool Type:
Version Control
JS Tool (ruby tool):
git
Run Code
Language Runtime
node (ruby)
Manage Code Runner
Version Manager
nvm (rvm)
Manage Dependencies
Package Manager
npm (gem)
Run Tasks
Task Runner
gulp (rake)
That was totally familiar!
Now that I want to install the JavaScript toolchain, I'm glad that grumpy rvm guy won't show up.
What? Someone call? I'm the nvm guy too! Let's get going installing nvm to manage all our versions of node!
ok, ok - how do you install nvm?
You don't have to install it - nvm is included on c9!
Sweet! I'm loving c9!
Don't I need a new c9 workspace? and a new github repo??
That would be advisable, yes.
Create a new repository called gulpapp
(on setup page copy repo URL)
http://github.com/[github user name]
Create a new workspace called gulpapp and clone your repo
cool. So I'm thinking nvm doesn't come with node does it but c9 has node installed?
nvm ls # lists the node.js versions installed on c9 already
Yes, like rvm for ruby, nvm simply manages different versions of node.js and does NOT include node.
Checkout all the versions you *could* install:
nvm ls-remote # lists the node.js versions you could install
Yes, c9 has installed nodejs already; see versions installed
So which version should I choose?
nvm install v4.2.6 # tells nvm to install node.js version 4.2.6
nvm alias default v4.2.6 # tell nvm to default to 4.2.6
nvm list # confirm we are defaulting to v4.2.6
The latest v4.2.6 version is a great choice. Here is the install command:
What about gemsets and all that jazz??
Nope, no gemsets concept in nodejs. Each version of node has it's modules called global modules - and the package manager for nodesjs is called npm.
Manage Dependencies
Package Manager
npm (gem)
Group Global Dependencies
We need to:
Tool Type:
Version Manager
JS Tool (ruby tool):
none (gemset)
Alright, let's install some packages!
npm install yo --global # tells npm to install yeoman to work anywhere (global)
## see the error? we need to update npm! let's do that:
npm update npm -g # tell npm to install update npm
npm install yo --global # install yo again to confirm we fixed npm!
npm install bower -g # tells npm to install bower to work anywhere (global)
npm install gulp -g # tells npm to install gulp to work anywhere (global)
Ok, let's install yeomen, bower and gulp!
Great! I'm installed perfectly... lets install a generator so we can scaffold a solution...
npm install generator-webapp # tells npm to install webapp generator
yo # this starts yeoman
# select Gulp Webapp from the list
# press enter to include Sass, Bootstrap & Modernizer
# overwrite package.json
# watch the magic happen!
But what is a scaffold?
A scaffold is a starting spot for a project - it includes html, css & all the other goodies!
Using the webapp generator I setup a project for you!
The project uses gulp and many gulp plug ins to:
gulp serve # tells gulp to build and serve your new website!
Super Cool!
Are there lots of different generators? They would save lots of time and effort!
Yes, almost all front end and backend projects use yo, gulp, bower/npm to scaffold their projects!!
Let's preview the website!
ctrl-c # stop gulp!
Where is the toast??? I can't find my toast. I can't find my website!
Stop gulp first.
The port: is set to 9000 - it must be 8082 to work with c9!
Let's look at the gulpfile.babel.js
Yeah, we got a problem...
How can we best fix this problem?
Change 9000 => 8082 in 3 different places: line 100, line 125 & line 135?
Problem? Hard coded value port => I am repeating myself!
Change 9000 => PORT in 3 different places: line 100, line 125 & line 135?
Problem? None=> I am not repeating myself - Don't Repeat Yourself! Be DRY!
Now let's preview the site we just built:
gulp serve # tells gulp to build and serve your new website!
http://gulpapp-ricmclaughlin.c9users.io:8082
Browser
Yes, let's install a gulp plugin specifically for this task called gulp-gh-pages.
npm install gulp-gh-pages --save-dev # tells npm to install the gulp-gh-pages plugin
# into our package.json file
How do we do that? Could we use gulp to deploy our new website?
open the package.json and search for gulp-gh-pages
in package.json search for gulp-gh-pages
ctrl-c # kill gulp
Now use your editor to add a deploy task to your gulpfile.babel.js
Editor
##### After ########
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
import ghPages from 'gulp-gh-pages';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
var PORT = 8082;
gulp.task('deploy', function() {
return gulp.src('./dist/**/*')
.pipe(ghPages());
});
##### before ########
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
var PORT = 8082;
Now let's run our deploy task and get our new website hosted live on github!
gulp build # tells gulp to build our website,
gulp deploy # then run our deploy task to
# copy our app to the gh-pages branch on origin
Now, how do I access the new website?
Browser
https://[your github url]/gulpapp
master is for production only
Create new post
Notice how similar these are!
Create new page
update page/post? git development play
master is for production only
You:
Can use git & github
Can manage the ruby and node.js tool chain
Can scaffold and host projects
Have a blog and project portfolio on github!