chisel-sample's Introduction

Chisel Sample Project

Features

Browsersync
Twig templating
SCSS with ITCSS structure
Browserify with Watchify
jQuery
gulp-rev support
ESLint

Workflow

Get started

git clone [email protected]:xfiveco/chisel-sample.git
npm install

Development

Run gulp to run dev server and watch tasks for styles, scripts and templates.

During development main.css (unminified) and bundle.js are linked in HTML. This is achieved by custom Twig function assetPath which updates assets path depending on whether the watch or build tasks are running.

Build with files revisions

Run gulp build to build all files and create new revisions of styles and scripts using gulp-rev.

When gulp build is run, first the dist folder is cleaned and then build tasks are run in particular order:

styles-build builds prefixed and minified styles and creates a stylesheet revision by appending content hash to the filename. Then it creates rev-manifest.json with original and revisioned file names
lint runs EsLint
scripts-build runs Browserify bundler and creates bundle.js revision by appending content hash to the filename. Then it updates existing rev-manifest.json with the original and revisioned filename.
Finally, templates-build reads the newly created rev-manifest.json and builds HTML files from Twig templates, while linking revisioned files using the assetPath function.

Recommend Projects