This is a fork of Gulp-boilerplate-for-web-designers by tsevdos but I've included gulp-connect
and LESS stylesheet support. The LiveReload just works and there's a built in static server so just start coding. LiveReload browser extension is not needed.
Gulp / LESS / Jade / LiveReload boilerplate for web designers provides directory and file structure to aid web-designers kickstart their next project. It will help you develop and deploy any html-based (and more) templates. Some out of the box features :
- OOCSS and SMACSS (Scalable and Modular Architecture for CSS) ready infrastructure
- Compile LESS files
- Autoprefix styles (you only need to write the web-standard version)
- Compiles and lints Coffee scripts files
- JsLinter
- CSS and JS minification
- Compiles Jade
- Image optimization
- Live-reload just works. Visit http://localhost:8080/. All dev tasks are done before live-reload. All production / minifying / dist tasks are done after reload - valuable seconds when doing heavy development.
- Outputs all production code to
dist
folder. All development inapp
folder.
Follow the Getting Started with Gulp for an in-depth look at setting up Gulp, but basically:
- Boot up terminal
- Make sure to have Node.js installed
- Install gulp globally
npm install -g gulp
cd
to your project folder- Git clone (
[email protected]:tsevdos/Gulp-boilerplate-for-web-designers.git
) or download the zip from https://github.com/tsevdos/Gulp-boilerplate-for-web-designers - Install Gulp and required gulp tasks
npm install
8a. Rungulp
and enjoy 8b. To simply preview the latest production code in the browser, usegulp serve-dist
. You would need to do agulp
or individual build tasks.
Your development environment is in the app directory - you do all the work there. Whenever you are ready you can build the work by running the gulp
task (the default
task). This task will generate a dist directory that will contain all your files (CSS, JS, HTML and images) optimized and ready to distribute/upload/share.
You can run the below tasks.
gulp
(default task) : Creates adist
directory with all the optimized files (read File structure section for more details).gulp serve
: Probably the most usable task. Just run this task and work elegantly with live-reload and all the cool features listed above.gulp serve-dist
: Serves yourdist
production folder. LiveReload works as well, but you probably just want to use this to test the final product before deployment.gulp styles
: This task compiles all the Sass files and autoprefixes. After that it saves the generated CSS files expanded into thedevelopment
directory and the minified version into the public directory.gulp coffee
: This task lints and compiles your coffee script files (you must include them into thejs
directory).gulp lintscripts
: This task lints all javascripts files except from those located under thevendor
directory.gulp scripts
: This task will concatanate all scripts into one using the order you'll specify. Thepublic
version of this file will also be minified.gulp images
: This task will optimize all images (withjpg
,png
andgif
extension) under theimg
folder.gulp jade
: This task will compile your jade templates.gulp markup
: This task will pretify your html files.gulp clean
: This support task cleans (deletes all the contents of) thepublic
directory in order to prepare it for thebuild
(default task).
- ECMAScript6 support. Soon!