This package has been deprecated
rtsn is no longer in active development and will only receive occasional fixes when stuff breaks. If you're looking for something similar, check out https://github.com/mserajnik/websn, its spiritual successor.
A simple front-end development boilerplate/toolkit
Deprecated: rtsn is no longer in active development and will only receive occasional fixes when stuff breaks. If you're looking for something similar, check out websn, its spiritual successor.
rtsn (/ˌɑː(r)tɪˈzæn/) is a boilerplate/toolkit for front-end development using gulp. Its most important features are:
- Pug as template engine or plain HTML – whatever you prefer
- Sass/SCSS or Less as CSS
preprocessor, complete with autoprefixing, importing from
bower_components(including required assets!) and minifying
- Critical inline CSS for optimized above-the-fold rendering
- Automatic image optimization for JPGs, PNGs, GIFs and SVGs via imagemin
- Automatic copying of everything that doesn't need to be transformed (e.g., fonts)
- Automatic browser refreshing via Browsersync with optional ngrok tunneling for sharing the preview online
- Browserslist support for easy browser version targeting when using Babel and Autoprefixer
- Project bootstrapping with useful (dot)files
- Several configuration options to adjust input/output files/directories etc.
Table of Contents
First, make sure you have Node.js installed. Using the latest version of Node.js and npm is recommended.
Next, if you don't already have Gulp installed, run the following command:
user@local:~$ npm i -g gulp-cli
Create a new directory for your project and install rtsn:
user@local:~$ mkdir <project-name>user@local:~$ cd <project-name>user@local:<project-name>$ npm init -yuser@local:<project-name>$ npm i rtsn
The installer will prompt you to choose how to handle HTML and CSS in your project.
After the installation, add your project details to
<project-name>/package.json and make configuration adjustments if needed.
To update from
4.x you will need to adjust your
the current example configuration. Generally speaking, rtsn will add missing
properties when installing, but double-check manually if you run into problems.
2.x is not recommended!
Please make a fresh installation, copy your sources over and go from there if
you have been using an older version. Depending on the project, this might also
be the easier/faster way when updating from
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 be in your project's directory for them to work):
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
Making configuration adjustments
To change rtsn's configuration, please take a look at the section
package.json. Most of it should be self-explanatory, with one
If you don't use CSS and/or JS in your project and therefore want to remove
those source files from the build process, please set empty strings as values
jsSource in the
files section. You can
jsBuild as they are.
Using packages from npm or Bower
To use packages installed via npm or Bower, you can just include them in your source files. E.g., to load the popular lightGallery, you first need to install it:
user@local:<project-name>$ npm i lightgallery
Now you can import the styles in your source file (assuming you are using
Sass/SCSS, if you are using Less you will need to import
lightgallery/src/css/lightgallery.css instead – this will vary depending
on what preprocessor the package you want to import uses):
rtsn automatically looks into
bower_components so you
don't need to add the full path.
As a last step, many packages (including lightGallery) come with resources
(images, fonts etc.) that you need to copy over to your project in order for
everything to work correctly. To automate this, you can add rules to the
vendorCopy array in your
package.json that will tell rtsn what to copy from
where to where:
In this example, we copy all the files from
fonts in your source folder. You
need to add one object per source and can add as many as you want.
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.
If you like rtsn and want to buy me a coffee, feel free to donate via PayPal:
Alternatively, you can also send me BTC:
Donations are unnecessary, but very much appreciated. :)
You are welcome to help out!
Open an issue or submit a pull request.
MIT © Michael Serajnik