README
Estrad
Estrad is a collection of Gulp tasks, and a tool to make building modular HTML/CSS/JS websites easier.
The goal is to have a build process fast enough that you do not have to wait whenever a file is saved. Because of the possible complexity of HTML templates Estrad will not compile them on file save. Instead a server is included that compiles HTML pages on request.
Install
Estrad requires node.js and Gulp, install them if you have not already.
Install gulp:
$ npm install gulp -g
To install Estrad in your project run:
$ npm install estrad --save-dev
Include Estrad in your Gulpfile.js
and pass it gulp:
var
gulp = require('gulp'),
estrad = require('estrad')(gulp, options);
gulp.task('default', ['estrad']);
Options
Estrad includes a lot of tasks, all are disabled by default. The default options are:
{
"dir": {
"src": "/",
"partials": "/",
"build": "/"
},
"css": {
"watch": false,
"build": false,
"preprocessor": false,
"settings": {},
"minify": false,
"paths": {
"listen": [
],
"src": [
"!./node_modules/"
],
"dest": ""
}
},
"html": {
"build": false,
"prettify": {
"indent_size": 1,
"indent_char": "\t",
"preserve_newlines": false
},
"paths": {
"src": [
"!./node_modules"
],
"dest": ""
}
},
"images": {
"watch": false,
"build": false,
"svgToPng": false,
"paths": {
"listen": [
],
"dest": ""
}
},
"js": {
"watch": false,
"build": false,
"uglify": {},
"paths": {
"require": "",
"listen": [
],
"src": [
"!./node_modules"
],
"dest": ""
}
},
"server": {
"start": false,
"proxy": false,
"port": 8080,
"templateSettings": {}
},
"static": {
"build": false,
"paths": {
"src": [
"!./node_modules"
],
"dest": ""
}
}
}
dir
src
Directory of source files.
partials
Directory of html partials.
build
Directory to output the built project to.
css
preprocessor
Can be:
false
for no preprocessor.
"sass"
to use SASS with Compass. Requires that you add config.rb
.
"stylus"
to use Stylus with Nib.
settings
Stylus settings object. Values here will be passed to gulp-stylus.
Example:
{
"compress": true,
"linenos": true,
"url": "url"
}
The url
option will base64 images and inline them in the css file.
images
Smushes svg
, png
, jpg
and gif
files. Will also create a png
from any svg
.
js
watch
At the moment all this does is lint your files with JSHint. Estrad comes with a basic setup of rules. To change the ruleset add a .jshintrc
file.
build
Require.js optimization tool r.js.
server
template
templateSettings
doT.templateSettings
Set these to avoid running your client templates on the server.
Watching files
$ gulp estrad
Build files
To build the project files type:
$ gulp estrad-build
This will build any css
, js
and html
files.
The idea is that this process will compile a "deliverable" of all front end code. This is a goal for the future.
Write a module
First you need a page, see index.html
for an example. It looks like this:
{=part.header}
{=part.example}
{=part.footer}
The structure of a module can look like this:
/example/example.html
/example/example.json
/example/alternative.json
/example/example.css
/example/example.js
To use the alternative.json
file include the module as {=part.example.alternative}
.
To create header
and footer
modules, add the files /modules/header/header.html
and /modules/footer/footer.html
.
doT
Estrad uses doT to for including mock data. Use the it
namespace to access properties set in the json
files. The mock data is self-contained and will only affect that module.
Reverse proxy
Estrad includes a reverse proxy. To set up a path add it to routes.json
. This can be a local resourse or cross domain.
Get queries can be overridden in routes.json
.