A simple front-end development boilerplate/toolkit
rtsn (/ˌɑː(r)tɪˈzæn/) is a boilerplate/toolkit for front-end development using gulp. It's most important features are:
bower_components(including required assets!) and minifying
npm i -g gulp-cli
cd <project-name>) and install rtsn via
npm i rtsn
<project-name>/package.jsonand make configuration adjustments if needed
By default, your source files will be located in the
directory and your distribution directory will be
automatically adds some example files I personally use as a starting point on
new projects so you can see how it should be structured for rtsn to work
You can use the following commands (you need to switch to your project's directory first):
gulp clean: this cleans the distribution directory
gulp build: this makes a new build for production with minified files (HTML, CSS and JS)
--pretty-html: keeps the HTML unminified (as preparation for integration in other systems like WordPress, TYPO3 or Laravel)
--critical-css: injects critical CSS inline (for optimized above-the-fold rendering)
gulp serve: this makes a new build for development and opens a browser window. It then starts Browsersync: any changes you make in one of the source files will trigger an injection or refresh the browser window
--online: additionally starts an ngrok tunnel for sharing the project online
rtsn is partially based on the awesome Scffld. Since it's very much tailored to my personal needs it probably lacks some options which would be nice to have for some people. Please check out Scffld if you're looking for something that's more general purpose.
You are welcome to help out!
Open an issue or submit a pull request.
If you like rtsn and want to buy me a coffee, feel free to donate via PayPal:
Donations are unnecessary, but very much appreciated. :)
MIT © Michael Serajnik