Snazzie is an easy to use static site generator that uses the powers of Gulp to allow for live development reloading, asset compilation and minification as well as deployment to github pages. Its pure front end goodness designed by a front end developer, for front end developers.
Getting started with Snazzie is easy to use in just a few simple steps.
mv snazzie [YOUR DIRECTORY NAME HERE]
npm init. When Snazzie initializes, enter in your directory name and use your repository location. The rest is up to you for preferences.
npm run build
npm run deploy
In the app directory. If you like, you can modify the gulp task to watch a page directory, it can be found on line 66 of gulpfile.js. However, you should leave the index page out of there as a point of entry.
There are separate subdirectories for SCSS, LESS and Stylus stylesheets in the app directory. All three subdirectories will be watched, choose whatever preprocessor you feel would work best for your project and compile away!
The default stylesheets are style.scss, style.less and style.styl. Feel free to add any additional files that you need, but be sure to add those files in between the build comments, as shown below. All files will be compressed when building.
In the css subdirectory. You can choose unminified files if you prefer, they will be compressed as your site is built. Please note that if you choose to use vanilla CSS, name the file something else that styles.css if you are planning to use a preprocessor in addition. (If not, feel free to use styles.css) On build, these files will be compressed if they are included in the commented areas as shown below.
<!--build:css css/styles.min.css --> <link rel="stylesheet" href="./css/my-file-name.css"> <link rel="stylesheet" href="./css/styles.css"> <!-- endbuild -->
You sure can. Its up to you where you would like to put that, we suggest outside of the commented tags to be compiled on build, like this:
<link rel="stylesheet" href="https......." crossorigin="anonymous"> <!--build:css css/styles.min.css --> <link rel="stylesheet" href="./css/my-file-name.css"> <link rel="stylesheet" href="./css/styles.css"> <!-- endbuild -->
Yes! On build, all the applicable vendor prefixes to your styles will be applied.
Yes! Please read on below, for notes about where to put and use your JS files.
However, there is a caveat with ES6 and Snazzie. As Snazzie is a client side static site builder, importing js files tends to return errors with require.js. This is a known bug, will be amended in the future.
js directory, whereas being able to see the fruits of your labor will be coming from the
Like the minified CSS, everything placed in the commented build statements will be compiled when the build command is run, as shown below. Please note, the directory that should be compiled is coming from the
compiled_js directory, not the
js directory directly.
<!--build:js js/main.min.js --> <script src="./compiled_js/my-file-name.js"></script> <script src="./compiled_js/my-other-file-name.js"></script> <!-- endbuild -->
Sure! We suggest using installing jQuery as an npm package and imported into the files where you need it, rather than using it as a Google Hosted Library.
Yes! Similar to the CSS section mentioned above, include whatever libraries you need outside of the build tags.