diff --git a/README.md b/README.md index fc3ae0d..931fd0d 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,9 @@ Start talking: [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://git UnderStrap WordPress Theme Framework === -Website: http://understrap.com +Website: [http://understrap.com](http://understrap.com) -Child Theme Project: https://github.com/holger1411/understrap-child +Child Theme Project: [https://github.com/holger1411/understrap-child](https://github.com/holger1411/understrap-child) Changelog = @@ -75,8 +75,8 @@ Basic Features - Combines the _s WordPress Starter Theme PHP/JS files and Bootstrap´s HTML/CSS/JS - Comes with Bootstrap (3.3.6) SASS source files and additional scss files. Nicely sorted and ready to add your own variables/customize the Bootstrap variables. - Uses a single and minified CSS file for all the basic stuff -- Font Awesome Icon Font integrated (V 4.5.0): http://fortawesome.github.io/Font-Awesome/ -- Comes with extra slider script - By owl.carousel (V 2.0.0-beta.2.4): http://www.owlcarousel.owlgraphic.com/ +- Font Awesome Icon Font integrated (V 4.5.0): [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) +- Comes with extra slider script - By owl.carousel (V 2.0.0-beta.2.4): [http://www.owlcarousel.owlgraphic.com/](http://www.owlcarousel.owlgraphic.com/) - Simple RTL file - Jetpack ready - WooCommerce support @@ -113,20 +113,28 @@ Installation - Go to Appearance -> Themes - Activate the UnderStrap theme -Developing with NPM, Bower, Gulp and SASS +Developing with NPM, Bower, Gulp and SASS and [Browser Sync][1] = -- Make sure you have installed Node.js and Bower on your computer globally +### Installing dependencies +- Make sure you have installed Node.js, Bower and Browser-Sync on your computer globally - Then open your terminal and browse to the location of your UnderStrap copy -- Run: - $ npm install -than: - $ bower install -and finally: - $ gulp copy-assets +- Run: `$ npm install` then: `$ bower install` and finally: `$ gulp copy-assets` +### Running To work and compile your SASS files on the fly start: - $ gulp watch +- `$ gulp watch` + +Or, to run with Browser-Sync: + +- First change the browser-sync options to reflect your environment in the file `gulpfile.js` in the beginning of the file: +```javascript +var browserSyncOptions = { + proxy: "localhost/theme_test/", // <----- CHANGE HERE + notify: false +}; +``` +- then run: `$ gulp watch-bs` How to use the build-in Widget Slider? = @@ -134,3 +142,5 @@ The frontpage slider is widget driven. Simply add more than one widget to widget - Click on Appearance -> Widgets - Add two or more widgets of any kind to widget area "Hero" - Thats it + +[1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index d5dcbc0..8d68df4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,6 +4,20 @@ var basePaths = { dev: './src/' }; +// browser-sync watched files +// automatically reloads the page when files changed +var browserSyncWatchFiles = [ + './css/*.min.css', + './js/*.min.js', + './*.php' +]; +// browser-sync options +// see: https://www.browsersync.io/docs/options/ +var browserSyncOptions = { + proxy: "localhost/theme_test/", + notify: false +}; + // Defining requirements var gulp = require('gulp'); var plumber = require('gulp-plumber'); @@ -16,6 +30,7 @@ var uglify = require('gulp-uglify'); var merge2 = require('merge2'); var ignore = require('gulp-ignore'); var rimraf = require('gulp-rimraf'); +var browserSync = require('browser-sync').create(); // Run: // gulp sass @@ -43,7 +58,8 @@ gulp.task('cssnano', ['cleancss'], function(){ .pipe(plumber()) .pipe(rename({suffix: '.min'})) .pipe(cssnano({discardComments: {removeAll: true}})) - .pipe(gulp.dest('./css/')); + .pipe(gulp.dest('./css/')) + .pipe(browserSync.stream()); }); gulp.task('cleancss', function() { @@ -52,6 +68,18 @@ gulp.task('cleancss', function() { .pipe(rimraf()); }); +// Run: +// gulp browser-sync +// Starts browser-sync task for starting the server. +gulp.task('browser-sync', function() { + browserSync.init(browserSyncWatchFiles, browserSyncOptions); +}); + +// Run: +// gulp watch-bs +// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser +gulp.task('watch-bs', ['browser-sync', 'watch', 'cssnano'], function () { }); + // Run: // gulp scripts. // Uglifies and concat all JS files into one @@ -63,7 +91,7 @@ gulp.task('scripts', function() { ]) .pipe(concat('theme.min.js')) .pipe(uglify()) - .pipe(gulp.dest('./js/')) + .pipe(gulp.dest('./js/')); }); // Run: diff --git a/package.json b/package.json index 1b6aa50..94b80cb 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,10 @@ "gulp-rename": "^1.2.2", "gulp-rimraf": "^0.2.0", "gulp-sass": "^2.2.0", - "gulp-uglify": "^1.5.2", + "gulp-uglify": "^1.5.3", "gulp-watch": "^4.3.5", "gulp-cssnano": "^2.1.1", "merge2": "^1.0.1", - "gulp-uglify": "^1.5.3" + "browser-sync": "^2.12.3" } }