node package manager

rtsn

rtsn npm version Build status

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:

  • Pug as template engine or plain HTML – whatever you prefer
  • Sass/SCSS or Less as CSS preprocessor, complete with autoprefixing, importing from node_modules/bower_components (including required assets!) and minifying
  • Critical inline CSS for optimized above-the-fold rendering
  • ES6 transpiling for JavaScript via Babel and module bundling via Browserify
  • 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 refresh via Browsersync with optional ngrok tunneling for sharing the preview online
  • Several configuration options to adjust input/output files/directories etc.

Install

  1. Make sure you have Node.js installed: https://nodejs.org/en/download/
  2. If you don't already have gulp-cli installed, run the following command: npm i -g gulp-cli
  3. Create a new directory for your project (mkdir <project-name>)
  4. Switch to that directory (cd <project-name>) and install rtsn via npm i rtsn
  5. Choose your preferred CSS preprocessor when the installer prompts you to
  6. Add your project details to <project-name>/package.json and make configuration adjustments if needed

Usage

By default, your source files will be located in the <project-name>/src directory and your distribution directory will be <project-name>/dist. rtsn 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 correctly.

You can use the following commands (you need to switch to your project's directory first):

  • gulp: runs clean and build
  • gulp clean: this cleans the distribution directory
  • gulp build: this makes a new build for production with minified files (HTML, CSS and JS)
    • Optional: --pretty-html: keeps the HTML unminified (as preparation for integration in other systems like WordPress, TYPO3 or Laravel)
    • Optional: --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
    • Optional: --online: additionally starts an ngrok tunnel for sharing the project online

Credits

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.

Maintainer

mserajnik

Contribute

You are welcome to help out!

Open an issue or submit a pull request.

Donate

If you like rtsn and want to buy me a coffee, feel free to donate via PayPal:

Donate via PayPal

Donations are unnecessary, but very much appreciated. :)

License

MIT © Michael Serajnik