grunt-multiply-layouts
Automatic css and js minifying for multiply Jade layouts using Grunt
Why do I need this plugin?
In my Node.js apps I use several jade templates with different css and js files included. It can be, say, public and private parts of one site. You don't need javascripts from private part to be loaded in public part and vice versa. If you use standard module, it will pick all files in your css/js directory, combine and compress them.
This plugin do it other way: you setup task with one of available modes: prod
or dev
. In prod
task minifies css and js for every layout separately and creates modified layouts, linked to them, in dev
just copying layouts and js/css files from development directories to those, your application will use.
Getting Started
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-multiply-layouts --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-multiply-layouts');
The "multiply_layouts" task
Overview
In your project's Gruntfile, add a section named multiply_layouts
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
multiply_layouts: {
options: {
staticSrc: 'public-dev',
staticDst: 'public',
cssDir: 'css',
jsDir: 'js'
},
layouts: {[{
src: 'views/layouts-dev',
dst: 'views/layouts',
mode: 'dev'
}]},
},
});
Options
options.staticSrc
Type: String
Default value: None
Directory from which css and js files will be copied. You should develop them in it.
options.staticDst
Type: String
Default value: None
Directory to which css and js files will be copied. It's static directory in your app.
options.cssDir
Type: String
Default value: None
Directory used for storing css files. Task will proceed only css files in staticSrc/cssDir.
options.jsDir
Type: String
Default value: None
Directory used for storing js files. Task will proceed only js files in staticSrc/jsDir.
Layouts
layouts.src
Type: String
Default value: None
Relative path to your jade layouts development directory.
layouts.dst
Type: String
Default value: None
Relative path to your jade layouts destination directory. You should use them from this location in your jade templates.
layouts.mode
Type: String
Default value: None
Possible values: prod
or dev
Production prod
or development dev
mode is used. You should use one of it.
In dev
mode task will copy layouts from layouts.src to layouts.dst, plus copy all css and js files used in layouts, located in layouts.src from options.staticSrc to options.staticDst.
In prod
mode task will read layouts from layouts.src, replace all css links to one with minifed css and all js sources to one with minified js. All css and js files will be minified for each layout separately.
Usage Examples
Default Options
No default options setup available at this time.
Custom Options
In this example, there are 2 layout tasks:
- Multiply Layouts will read Jade layouts from
views/layouts-dev
, extract information about all css and js files used in them, copy css files frompublic-dev/css
topublic/css
and js files frompublic-dev/js
topublic/js
, but only those linked in Jade layouts. Plus it will copy this Jade layout fromviews/layouts-dev
toviews/layouts
. - Multiply Layouts will read Jade layouts from
views/layouts-prod
, replace all css links and js sources to/css/<%layout-filename%>.min.css
and/js/<%layout-filename%>.min.js
respectively, plus minify css and js files for each layout separately.
grunt.initConfig({
multiply_layouts: {
options: {
staticSrc: 'public-dev',
staticDst: 'public',
cssDir: 'css',
jsDir: 'js'
},
layouts: {[{
src: 'views/layouts-dev',
dst: 'views/layouts',
mode: 'dev'
}, {
src: 'views/layouts-prod',
dst: 'views/layouts',
mode: 'prod'
}]},
},
});
prod
mode modifies layouts?
How Here's simple example. Taking one template from above example, task will replace only css and js files that are in cssDir and jsDir respectively
Source views/layouts-prod/main-layout.jade
doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width')
link(href='img/mainicon.png', rel='icon')
link(rel='stylesheet', href='css/main.css')
link(rel='stylesheet', href='css/fonts.css')
link(rel='stylesheet', href='css/text.css')
link(rel='stylesheet', href='css/graduates.css')
script(src='js/jquery-1.10.2.js')
script(src='/js/lib/twitter_flight.js')
script(src='js/component/preview-story-component.js')
script(src='js/component/show-full-story-component.js')
script(src='js/component/move-footer.js')
script(src='js/init-graduates.js')
link(href='http://fonts.googleapis.com/css?family=Roboto:300,500,400&subset=latin,cyrillic-ext,cyrillic', rel='stylesheet', type='text/css')
block head
body
block content
Destination views/layouts/main-layout.jade
doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width')
link(href='img/mainicon.png', rel='icon')
link(href='/css/main-layout.min.css', rel='stylesheet')
script(src='/js/main-layout.min.js', type='text/javascript')
link(href='http://fonts.googleapis.com/css?family=Roboto:300,500,400&subset=latin,cyrillic-ext,cyrillic', rel='stylesheet', type='text/css')
block head
body
block content
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
0.1.1 - Minor validation added, plus texts and links were fixed
0.1.0 - First version, everything works fine but it's written like sh!t