Foundation asset pipeline for Expression Engine
Yeoman generator that scaffolds out a Foundation 5 front-end for Expression Engine using Gulp for the build process.
Features
-
Any changes you make to your html, styles, scripts etc. will be automatically shown without you having to refresh the browser or worry about compiling etc. Welcome to awesome-town my friend! :)
-
Built-in preview server with BrowserSync (new)
-
CSS Autoprefixing (new)
-
Automagically compile Sass (via libsass) (new)
-
Automagically lint your scripts
-
Awesome Image Optimization (via OptiPNG, pngquant, jpegtran and gifsicle)
-
Automagically wire-up dependencies installed with Bower (when you run
gulp watch
orgulp wiredep
)
Getting Started
- Install Expression Engine into your project directory
- Set your vhost/server name to
dev.ee.local
in MAMP etc. and point it to your project. - Install:
npm install generator-ee-foundation -g
. - Run:
yo ee-foundation
in your project directory. - Within Expression Engine, set your master template to
master.html
underadmin/templates/default_site/layouts.group/
which was created by this generator (I like to rename the Expression Enginesystem
directory toadmin
). - Run
gulp watch
when developing. This will wire all bower dependencies & watch your styles, scripts and even your Gulpfile for changes and automatically reload the browser. - Default styles are included for
small
,medium
andlarge
breakpoints, so style accordingly. - When ready to deploy, run
gulp build
and this will generate adist
directory (distribution) which will contain your production ready files, ready to be deployed. - If you want to over-ride any of Foundation's settings, please see
_settings.scss
. - Hit me up with questions on Twitter: @niall_obrien
NOTE
Libsass (gulp-sass) does not yet support all of the features of Ruby Sass >= 3.3. At the moment, gulp-sass cannot compile Foundation 5.4.3 out of the box as they're using Sass syntax >= 3.3. Please see this open issue and this forum thread. Remove the !global
statement from the _functions.scss
file and gulp-sass will work. I tried gulp-ruby-sass, which can compile with no problems, but damn it's slow!
Third-Party Dependencies
(HTML/CSS/JS/Images/etc)
To install dependencies, run bower install depName --save
to get the files. When you run gulp watch
again, it will automatically wire your dependencies in your master.html
file.
Options
-
--skip-install
Skips the automatic execution of
bower
andnpm
after scaffolding has finished. -
--test-framework=<framework>
Defaults to
mocha
. Can be switched for another supported testing framework likejasmine
.