Prototype Gulp task runner for use with VVV mainly concerned with SASS, Browser-Sync, VVV, & file minification.
I. Download Studi˚-vvv
Git:
mkdir studio && cd studio && git clone https://github.com/djfrsn/gulp-studio-vvv.git .
Future Option: Slush-Studio
II. Install dependencies
npm install
III. Install VVV. Once installed clone a VVV project into your '/studio/' dir using:
gulp vvv
IV. Install Alison Barrett's VVV Site Wizard. The rest of this guide assumes you installed VVV Site Wizard to run from anywhere, otherwise you will need to define the path in the next step.
V. Create your site using:
gulp createsite
The name chosen will be the url served to the browser
VI. Update the proxy in 'gulp/task/browsersync.js' to your chosen site name
VII. Run Studi˚ once your site is created
gulp
This compiles Studi˚ & launches browser-sync w/ 'yoursite.dev' as the default proxy. Vivy!
Head to '~/vagrant-local/www/yoursite.dev' & start building!
Try running
gulp test
to ensure task are stable.
$ gulp paint
Your app loads at 'http://localhost:3000' by default, & an external address is provided to access your app from multiple devices with features such as scroll & code sync provided by browser-sync.
Compatible with PHP, ASP, Rails and more.
#PHP
- Watch 'yoursite.dev' php for changes & reload w/ Browsersync
- Minify
- H5BP
- SASS
- Inline Critical CSS w/ dedicated SASS lib
- Autoprefixer
- Lint
- Comb CSS
- Minify
- Concat
- Lint
- Compression with image-min
- Use gulp/task/template.js to kickstart your own task
$ gulp studio
Run all task essential to compile optimized 'app/'
$ gulp build-studio
Create distributable application in 'dist/' dir
Run build versions of default task:
- Styles - Compile SASS, prefix, comb('zen'), minify, check for errors & pipe to dest.
- Compile-Critical - Inline Critical CSS
- JS - Minify, Concat & Lint
- Img - Run imgmin default settings
- Scaffold - Compile includes & Minify
- Aux - Grabs misc files parallel to index.html path & provides performance insights w/ pagespeed(Future ver)
Custom WP theme titled 'studio' for use with this tool, change the paths in 'gulp/index.js' for custom themes
app/lib/styles for all your styling needs
app/lib/styles/critical/_modules/_critical.scss - Any css written here will be inlined in app/index.html after running 'gulp crit' or if _critical changes after running 'gulp paint'
Include w/ @@include('included.html')
image-min compress files within 'app/lib/img/**/*' on 'gulp build-studio'
Automatic minification on build Files concat with concat.js and additonal js files can be added @ gulp/index.js under sourced.jslib var
To create a new gulp task, create a newTask.js file and add this to gulp/task/
Task boilerplate:
var gulp = require('gulp');
gulp.task('newTask', function () {
return gulp.src(sourced.app)
// do something here
.pipe(gulp.dest(dist.dir));
});
Test your task with
gulp newTask
'gulp-changed' runs for relevant gulp task.
Will include node_module Bench for benchmarking in the future
Quick commands for your bash_profile:
alias g="gulp"
alias gs="gulp styles"
alias gsb="gulp styles-build"
alias gjs="gulp script"
alias gjsb="gulp script-build"
alias gh="gulp scaffold"
alias ghb="gulp build-scaffold"
alias gb="gulp build"
alias gw="gulp paint"
Run
gulp test
for error checking on 'studio' & 'build-studio' task
# Gulp Studi˚
alias g="gulp"
alias gstu="gulp studio"
alias gp="gulp paint"
alias gs="gulp styles"
alias gsb="gulp build-styles"
alias gj="gulp brush"
alias gsc="gulp scaffold"
alias gscb="gulp build-scaffold"
alias ga="gulp aux"
alias gab="gulp build-aux"
alias gc="gulp compile-critical"
alias gic="gulp inline-critical"
alias gb="gulp build-studio"
alias gbs="gulp browser-sync"
alias gptest="gs; gc; gsc; gic; gj; gstu;"
alias buildtest="gsb; gc; gsc; gab; gic; gscb; gj; gb;"
alias ta="gulp test-app"
alias tb="gulp test-build"
alias t="gulp test"
# http://tinyurl.com/testruntime
# real - start to finish
# user - user mode code
# sys - kernal code
alias test="time runtest"
function runtest {
ta
sleep 10
tb
}
Use 'gptest' after running 'gulp paint' to test task w/ browser sync & server
Run 'test' for thorough testing and time reports
Global paths are set @ gulp/index.js
h5bp is baked into easel/index
jQuery 2.1.1 can be found in node_modules/jquery
Contact me
Remove lib folder & reconfigure source paths in /gulp/task
Studio is inspired by a desire to build a quick web dev platform with modern tooling & best practices baked in, while leaving the door wide open to build anything possible with HTML, CSS, Javascript and other web technologies.
--- Modules tested:
- paint
- brush
- browser-sync
- aux
- img
- scaffold
- studio
- styles
- compile-critical
- inline-critical
- prettify-index
- styles
- watch
- studio
Contributions, questions and comments are all welcome and encouraged.
Google Web Starter Kit Readme template & being the "gold standard"
Greypants gulp-starter Gulp framework & filesystem