Grunt Template
Web Development with Grunt, Grunt Templating Task and SCSS.
Set Up
- Clone This
mv /path/to/repo/grunt-project /path/to/repo/{Project Name}
- cd into the project
rm -rf .git
git init
- Add the new repo
git remote add origin {new git repo}
git push -u origin master
- run
npm install
(sudo if you get any access errors) - run
grunt
for all the goodness
Grunt Plugins
- Clean
- Copy
- Sass
- Watch
- Browser Sync
- scss lint
- html hint
- csslint
- git deploy
- Template (From Sorin)
Grunt Tasks
build
compiles SCSS and Template Fileshtmllint
runstemplate
andhtmllint
git_deploy
uploadsbuild
to github pageswatch
watchestemplate/
andscss
and compiles changes
Grunt Default Task
clean
/build/
copy
'img/, js/ and svg/
intobuild
build
browserSync
runs server and pushes changeswatch
... watches.
Deploying to Github Pages
Upload the current /buiild
folder to Github Pages
Change the git_deploy
task options to the url for your repo.
url: 'git@github.com:{YOUR/URL.git}
Editing HTML
Your HTML templates will go in templates/
and you can add your chunks to your template with
<%= include('include/{yourfile}.html') %>
Variables in your includes
Add variables in the files you want to include like this
<%= var %>
Call your variables in your template like this
<%= include('include/{file}', {
var: "content"
}) %>