Gulp.js automate workflow with Pug/Jade and SASS. CSS & JS code are embed into HTML.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
README.md
gulpfile.js
package.json

README.md

staro-webkit

Just another automate workflow with Gulp.js? Maybe. :p
The main goal is to set a final static webpage with minified code in HTML files (final output doesn't have .css or .js files, it's all inside .html without unnecessary requests to server).

This repository is for personal projects, but feel free to use it, fork it and/or give me suggestions/feedback.

This workflow use Pug (old Jade) for HTML, SASS/SCSS for CSS, just an uglify for JS and TinyPNG API for images compression. It's not mandatory to use these modules and you need to insert a TinyPNG API key to use it.

You'll need...

  • Node.js
  • NPM
  • and, of course, Pug and SASS.

Follow this steps:

Download this repository to your empty project and open a terminal there:
npm install

Run:
gulp

How it works

SASS/SCSS files are compiled into CSS. Both CSS and JS are minified to a partial folder before are included into PUG files (base code already started) and, finally, everything is compiled in HTML to a production and final folder.

Images are compressed to a partial folder before its send to production folder. You can add other static files as HTML, PDFs, videos or images too with gulp statics.