A premade Grunt environment to build optimized static websites, utilizing Grunt Source.
- Development and Production builds with
- Compile your [Java|Coffee]Script, Jade and Stylus
- Watch source each directory and compile only what is required
- Add a
configobject to have it merged into the grunt config
- Grunt source config available as the
sourcevariable in Jade and Stylus files
- Easily embed images in CSS as Data-URIs
- Add an
angularflag to run
ng-minover your files before minification
- Generate an Application Cache manifest file with the
Install Grunt Source
When we run:
It will create the following directory structure:
src/ scripts/app.coffee styles/app.styl views/index.jade
And compile these files to:
js/app.js css/app.css index.html
And we're ready to host on Github Pages
dev (defaults to
prod will minify all JS, CSS, HTML
dev will leave the JS intact, create annotated CSS, prettify your HTML
Grunt Source Config
true, will run
Below is the output from
default task will build everthing then watch everything
for changes. In an effort to reduce the asset count, the build step
aims to construct 1 output file. So after build you should have 1 JS,
1 CSS, 1 HTML file.
You can use any number of
as they will all be joined and wrapped in an IEFF. To attan a specific execution
.coffee files will be concatenated as follows:
"src/scripts/init.coffee" "src/scripts/**/*.coffee" "src/scripts/run.coffee"
This way you can place all initialising code in
src/scripts/init.coffee to be
run first and then all "boot" your code by creating a
to be run last.
You can use more
.styl files by using the built-in
include syntax, and similarly,
you can use the built-in
include to split out your HTML into a
logical file structure of
.styl files, you can swap out
embedurl(...) to embed those
images in place using data-URIs. Project root and
src/styles/embed/ have been set
as embed paths.
.jade files, for your convenience, the following variables have been set
JSON: JSON showFile: (file) -> grunt.read.file path.join base, file source: grunt.source env: env min: if env is 'prod' then '.min' else '' dev: dev date: new Date() manifest: "<%= manifest.generate.dest %>"
See this src folder as an example set of files utilising this grunt source.
See this projects Gruntfile.coffee for more information.
- Sourcemaps in development builds
- Fork this repo
- Edit your
repoto be the new Git URL
- Edit your
sourceto reference a new directory
- Push your changes
- Pull-request for others to enjoy