static site boilerplate with gulp server/build/ftp

NPM, Gulp, and dependencies

Load up depdencies with npm install. Type gulp init to set up symlinks from build to deploy for static assets. gulp to start browsersync which will update on any saved change.

npm install
gulp init
gulp

Deploy created minified version of everything and smushes images.

gulp deploy

If you want to take a look at deploy to make sure everything is kosher run:

gulp serve-deploy

If you want to FTP the deploy folder somewhere, update the data/secret.json and remove that from git and add it to .gitignore. You also need to update data/gulp-config.json to specify where on your server you want the files to go in FTP_DEST.

gulp upload

Use jade templates for HTML, modify Gulpfile.js to pass in relevant variables, it is watched for changes and browsersync will update when a template is saved.

Browserify will bundle components in src/js and lint. Put vendor scripts in deploy/js/vendor, it will be symlinked from build/.

SCSS will be parsed into src/css, normalize appended, autoprefixed, then concat into build/main.css then minified to deploy/main.min.css when you run deploy. Browsersync will update when file is saved.

Almost all your work goes in src/, except static accepts such as third party Javascript which goes in deploy/js/vendor and font faces which go in /deploy/fonts. You can also put images in deploy/img/ if you don't need them to be minimized. The server runs from build/ which symlinks font and img assets in deploy/.

build/
--- js/
------ base.js
------ *vendor/
--- css/
------ main.css
--- *img/
--- *fonts/

deploy/
--- js/
------ base.min.js
------ vendor/
--- css/
------ main.min.css
--- img/
--- fonts/

src/
--- js/
------ base.js
------ component1.js
------ component2.js
--- sass/
------ base.scss
------ partials
--------- _var.scss
--------- _font.scss
--------- _sprite.scss
--- css/
------ main.css
--- img/

data/
--- secret.json
--- gconfig.json

Gulpfile.js
.gitignore