ee_bootstrap is an ExpressionEngine starter project based on HTML5 Boilerplate, gulp, Bower, and Bootstrap Sass to help make your ExpressionEngine builds more productive.
Prerequisite | How to check | How to install |
---|---|---|
Node.js 0.12.x | node -v |
nodejs.org |
gulp >= 3.8.10 | gulp -v |
npm install -g gulp |
Bower >= 1.3.12 | bower -v |
npm install -g bower |
For more installation notes, refer to the Install gulp and Bower section in this document.
- gulp build script that compiles both Sass and Less, checks for JavaScript errors, optimizes images, and concatenates and minifies files
- BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
- Bower for front-end package management
- asset-builder for the JSON file based asset pipeline
- Bootstrap
There are many ways to do this, two of which we will cover here.
cd
into your projects root directory and issue git clone https://github.com/sparkison/ee_bootstrap.git
. Done!
Simply use the Download ZIP button at the top of this repo to download the source and copy into your projects root.
Download your copy of ExpressionEngine and copy the contents of the images and themes folders into the app directory. Next, copy the system/ee folder into system. Finally, copy the contents of the system/user folder into system/user (making sure not to overwrite the config file as it contains bootstrapping to allow for deployment across multiple environments).
Build requirements: node.js. We recommend you update to the latest version of npm: npm install -g npm@latest
.
From the command line:
- Install gulp and Bower globally with
npm install -g gulp bower
- Navigate to the app directory, then run
npm install
- Run
bower install
You now have all the necessary dependencies to run the build process.
gulp
— Compile and optimize the files in the assets directorygulp watch
— Compile assets when file changes are madegulp --production
— Compile assets for production (no source maps).
To use BrowserSync during gulp watch
you need to update devUrl
at the bottom of assets/manifest.json
to reflect your local development hostname.
For example, if your local development URL is http://myEEproject.dev
you would update the file to read:
...
"config": {
"devUrl": "http://myEEproject.dev"
}
...
If your local development URL looks like http://localhost:8888/myEEproject/
you would update the file to read:
...
"config": {
"devUrl": "http://localhost:8888/myEEproject/"
}
...
Contributions are welcome from everyone!