agragregra / WinterCMS-Gulp-Starter

Gulp Starter for Winter CMS Theme Development

Winter CMS Gulp Starter

Lightweight optimized Gulp starter for Winter CMS theme development with Gulp, Webpack-stream, Babel, Browsersync, Sass, autoprefixer, rsync and more based on OptimizedHTML 5 practices.

Installation

Run this command in the root directory of you site with remove all unnecessary (one command):

git init .; git remote add -f origin https://github.com/agragregra/WinterCMS-Gulp-Starter; git checkout master; git clone https://github.com/agragregra/WinterCMS-Gulp-Starter .; rm -rf trunk .gitignore readme.md .git

If no result, run the command twice.

Winter CMS Theme Directory structure

Recommends using the following base directory structure for you theme:

themes/
— mytheme/               <= Theme starts here
— — pages/               <= Pages directory
— — — home.htm
— — layouts/             <= Layouts directory
— — — default.htm
— — partials/            <= Partials directory (Optional)
— — — header.htm
— — — footer.htm
— — content/             <= Content directory
— — — intro.htm
— — assets/              <= Assets directory
— — — styles/            <= Styles directory
— — — — sass/            <= Preprocessor directory (sass, less, styl)
— — — — — theme.sass     <= Main theme style src file
— — — — — blocks/        <= Parts of styles (auto include to theme.*)
— — — css/
— — — — theme.min.css    <= Minified styles
— — — js/
— — — — theme.js         <= Main JavaScript src file
— — — — theme.min.js     <= Minified scripts
— — — images/
— — theme.yaml

Features & Variables in gulpfile.js

1. Make proxy for live development with Browsersync - let localhost
2. Simple selection of preprocessor - let preprocessor (sass, less or styl)
3. Simple selection of current theme - let theme
4. Simple selection of file extensions to watch & reload - let fileswatch
5. Better CSS - sass, less, styl, gulp-clean-css, gulp-autoprefixer.
   Importing framework extras CSS into "{theme}/assets/styles/{preprocessor}/theme.*" file
6. Better JS - Webpack+Babel. Best javascript practices.
7. Better deploy with gulp-rsync

Exported Gulp Task

• scripts - Bundling & minify with Webpack + Babel
• styles - Compile and concat CSS with selected preprocessor
• deploy - deploy changes on server with gulp-rsync
• assets - Compile assets (CSS & JS)
• gulp - The default command to start the environment