Template page

Installation:


                        
                             git clone https://github.com/Migacz85/web-template.git
                             npm install
                             sudo npm install gulp -g
                             sudo npm i -g gulp-cli

Quick start:


                        
                             gulp - rebuild all project to build folder and start server

                             jasmine-live - to start live reloading jasmine - remember to setup PORT

Main features:

Sass files are:

Auto minifying
Auto prefixing
Sourcemaps included
Auto moved to ./build/min-css folder
...and to ./source/css for your view

Technologies used:

Gulp
Sass
Bootstrap
Babel
Jasmine

Javascript files:

Auto minifying
Auto prefixing
Sourcemaps included
Converted to es5 for browser compatibility
and auto moved to ./build/js folder

While your server is running try in source folder:

Put an image to folder source/img
Write some javascript file
Write scss file
While doing that watch your build folder :-)

If you want a quick look how your sass file is generating in to css, check the folder css in build/ . Please note that they are only for your view. Dont edit them.

Tasks:


                
                    gulp - build all project and start the server
                    gulp server - only run the server
                    gulp jasmine-live - run jasmine test
                    gulp photo - compress photos and put them to build folder

Settings:

You can decide how strongly you want to compress photos on the fly Go the gulpfile.js and change this parameter


                
                    var QUALITY = 40 ;

If you want to change order of your .js files when connecting them together:


                
                    const JS_ORDER = ['source/js/zfirst.js', SCRIPTS_PATH];

Start the jasmine on specified PORT in gulp config you can open it in your browser typing localhost:port_number - in this build you need to refresh the site to see respond from jasmine:


                PORT = 2345

Change only one variable color in source/scss/styles.scss to change whole palete for a project


                   $main-col: rgb(116, 29, 90);