INSTALAR PREPROS EM WINDOWS 10 HOW TO
INSTALAR PREPROS EM WINDOWS 10 INSTALL

INSTALAR PREPROS EM WINDOWS 10 INSTALL

All we need to do is tell it where to put our compiled files, as well as which folders we actually want it to ignore.ĭownload and install Prepros. Run Prepros, then drag your static_site_project folder onto the interface to add it as a new project.Ĭlick the little gear icon, the one second from the left at the bottom right corner of the Prepros interface, to go into the project settings.Ĭlick CSS Options, then change Output Path Type to 'Relative to Source File Directory' and enter. Out of the box Prepros will automatically watch and compile all your files for you. When you're done, your project structure should look like this: Install & Configure Prepros In the stylus folder create a file named style.styl In the scripts folder create a file named site.js and another subfolder named js. In the source folder create a file named index.jade and an additional four subfolders content, scripts, stylus and templates. Inside your project folder create two subfolders site and source. By having all your output files in their own folder it's easy to grab the whole thing and upload it to your live site when you're done.Ĭreate a project folder named anything you like, e.g. I always find it's easier to keep the preprocessor source files you work on separate from the actual site files they'll compile into.

We'll begin by getting you setup with a project folder organized to best work with Prepros. Check out the live demo to see what you'll be making. Just install and run Prepros, add your project and it will handle all your compiling, combining and minifying for you.Īs part of our site creation we'll also be including some smooth scrolling effects to take visitors from one section of the site to the next, plus some CSS based animation effects for extra punch.

With Prepros there's no need to install Node.js, Ruby or any modules and gems, and you never have to touch command line. So as we put together our static site we'll be playing with three preprocessors for these languages Stylus, Jade and (a tiny bit of) CoffeeScript respectively. Prepros is an interface tool which handles preprocessing, and other front-end tasks. Prepros' greatest strength is the incredible ease with which it allows you to use preprocessors of various kinds, be they for CSS, HTML or JavaScript.

INSTALAR PREPROS EM WINDOWS 10 HOW TO

Today we'll be learning how to create a static one page 'About Me' website using the awesome free app Prepros from Alpha Pixels.

Instalar prepros em windows 10