dbox / gulpfast

A Gulp Build Tool To Help You Gulp Fast (Jade, Stylus, PostCss, Webpack, Babel, Karma, BrowserSync)

#Gulp Fast - A Gulp Build Tool ####Jade, Stylus(with the all the goods), PostCss, Webpack, Babel, Karma, BrowserSync

###Description This is a tailored build tool for front end development designed for speed and efficiency. I am still working on these docs, so hold on a minute if that is what you are looking for.

####Install Dependencies

npm install

####Commands Development

gulp

Test

gulp test

Production

gulp build

Deployment to Github Pages

gulp deploy

Check It Out

Note

• When using this option any folders/files in subPages will be automatically converted to use a hyphenated naming convention and put in the root directory.
  • For example if the file path is: subPages/magic/show.html it will be converted to magic-show.html and placed in the root. So for your link you would need to use the following convention ./magic-show

Includes the following

• HTML5 Boilerplate
• Modernizr
• Conditionally loaded Selectivizr for IE6-8 CSS3 selectors
• Conditionally loaded Respond for IE6-8 media queries
• Conditionally loaded calc() Polyfill for IE8 calc() usage
• Conditionally loaded Googleapis CDN for jQuery
• Conditional browsehappy
• Jade
• Stylus
  • Lost-grid
  • Rupture
  • Typographic
  • Kouto-swiss
  • Buttron
    • Those mystical button styles in the shared_Buttons.styl that created the magical buttons used in this project. Well don't you fret soon you too will be able to wield the unworldly power of Buttron. Wrighting the docs are next up on the docket. Stay tuned.
  • Various Custom Mixin's
• PostCss
  • cssnext
  • cssnano (for minification)
  • Easings
  • Focus
  • Size
  • autoprefixer
• WebPack
• Babel
• Karma
  • Mocha
  • Sinon-chai
• BrowserSync (live reloading)
• Minification
  • Images
  • Sourcemaps (on production for js and css)
  • Html (on production)
• IconFont (Create a SVG/TTF/EOT/WOFF font from several SVG icons)
  • With auto generation of styl classes
• Static asset revisioning
• Error handling and Desktop Notifications
• Automatic Asset Injection
• Automatic Deployment to github
  • Via gulp deploy
• Automatic root asset deployment on production
• If you think I should add something else just drop me a pull.

####Notes #####Folder Structure Not set in stone yet, but will be soon.

• Views (All jade files and components are located here.)
  • _components
    • Various reusable components.
  • _includes
    • Header, footer, ect.
  • _layouts
  • subPages
    • Any sub-directory pages go here.
    • Note: This directory is automatically removed on development, production, and deploy.
      • Example: In your app directory you have a file in subPages/magic/show.html in the dist directory it would be magic/show.html
• Assets
  • _root
    • All root assets go in this folder which will automatically be injected into the projects root directory on deploy or build commands.
    • Useful for putting 404, favicon, ect assets so they don't get in the way during development.
  • fonts
  • icons
    • Any svg files in this folder will be automatically compiled and converted to a fonts. Additionally, it will generate css class's for you based on the file name. The folder in which you can locate these class's is in assets\styles\_generated Note: this file will be regenerated every time your run a gulp command
    • For optimal results use a unicode prefix for the file name. For example uE001-facbook.svg the following generated class you could then use in your html via .icon.-facebook
  • images
    • Any image put in this folder will automatically be compressed
  • js
    • This is where your javascript files will be located. And as of right now I still have not decided on a finial structure, although, everything should be self explanatory.
  • stlyes
    • This is where your stylus files will be located. And as of right now I still have not decided on a finial structure, although, everything should be self explanatory.

#####Underscore folders/files Any file of folder with an underscore prefix (_) will be ignored and not compiled directly into your project. For example, lets consider the .styl files, there is no reason to have these files and or folders compiled into your project considering we have a shared.styl file in which we define all our imports imports. Nevertheless, there are times when you want or need to have various .styl file compiled separately, and this methodology give you a convenient and easy way to do so.

#####Asset Injection Any css or js file with shared at the beginning of its name will be automatically injected into your project. Although, upon a build or delpoy command any css file with the an underscore (_) in its name will not be injected into your project but rather concatenated with your main shared.styl file. For example: the file shared_Buttons.styl during development will be injected into your project as a seperate file, although, it will be concatenated durring production. However, a file such as sharedColors.styl will not be concatenated during production and injected as a seperate asset.

##Thanks

• gulp
• gulp-starter for the jump start.
• @corysimmons lots of love, for all your work with girds.
• And thanks to all the developers whos packages made this possible.

##TODO Queue

• Update packages
• Refine PostCss integration
• gulp-strip-comments
• Finalize project folder structure