thechutrain / gulp-boilerplate-workflow

Gulp Boilerplate Workflow

Fun front-end development with a GULP workflow

Making it fun to development on the front-end 😝 🎉

Sass? ES6 syntax? Go for it!

Features

• CSS - vendor prefixing, concatenating, and minifying
• SCSS - pre-processing,
• ES6 Javascript - transpiling, and bundling into browser-friendly JS
• Easy live deployment to github pages, heroku etc.

Up & Running

Development:

Start local web server that reloads with every save you make.

• $ gulp watch
• edit the files in the src/ directory

Production:

Build your production ready website in one command!

• $ gulp build

In order to get up and running with this project, you will need to have git, node, and gulp-cli (npm) installed.

Installing

There are two versions of this project: 1) uses CSS only and 2) that uses SASS.

First clone this repo && checkout the remote version that you'd like to use

// For CSS version:
$ git clone [email protected]:thechutrain/gulp-boilerplate-workflow.git
$ npm install
$ git checkout origin/CSS
$ rm -rf .git

// For SASS verion:
$ git clone [email protected]:thechutrain/gulp-boilerplate-workflow.git
$ git checkout origin/SASS
$ npm install
$ rm -rf .git

// For SASS verion with Bootstrap 4:
$ git clone [email protected]:thechutrain/gulp-boilerplate-workflow.git
$ git checkout remotes/origin/SASS_BS3
$ npm install
$ rm -rf .git

Deployment

Before deploying your production build, make sure to $ gulp build to get your latest build.

Deploy to GitHub pages

3 commands to deploy on github

$ gulp build
$ git add build && git commit -m "init commit of subtree"
$ git subtree push --prefix build origin gh-pages

Authors

• Alan Chu - github

gulp-boilerplate-workflow's Issues

fix readme

extra "git checkout" in the installation code. Also add a npm install too.

SASS branch

• need to install gulp-sass && gulp-rename?
• change the dev command in the readme to gulp dev, instead of gulp watch

README file structure tree

make a tree structure for the project in the Readme

fix require.resolve() name for es2015 name

Add a gif of the usage for the README