pretzel-assets-pipeline
Isomorphic asset pipeline for Pretzel apps, it uses webpack, node-sass and Grunt to compile assets. Check out the example project to see this module in action.
The goals are:
- One simple configuration file across development, staging and production environments
- Fast build times in development and CI environment (with "true" lazy loading for webpack entries).
- Being able to require templates, stylesheets, images or other static files from other modules, on Node.js and in client-side code.
Install
$ npm install --save-dev pretzel-assets-pipeline
pretzel_config.js
Options
path
(optional)
src
directory whereentries/
andstylesheets/
can be found.dest
directory where the asset build will go to.public
prefix that defines what the path scope for assets.
publicFileDirecories
(optional)
This will search for public/
directories inside this directories and make all files available in dev server in development and move them to files/
and add digest to filenames in production.
dll
(optional)
First level keys define the names of the DLL libs. Second level keys define the modules names that will go into the DLL lib. Second level value defines the path to that lib or the module name.
loaders
(optional)
plugins
(optional)
(default: ['minify', 'manifest']
). List of plugins used in webpack.
Available options:
'minify'
minifies javascript. Ignored on dev server.'manifest'
creates javascript manifest file. Ignored on dev server.
dev
(optional)
port
(default:4010
) set port for assets dev server.noLog
(default:true
)true
will hide compiler logs, but still show errors traces.lazy
(default:true
)true
compiles entries on http request,false
precompiles all entries to memory on startup.sourceMap
(default:'cheap-module-source-map'
) set type of javascript source maps (Available options).
Example
moduleexports = extensions: '' '.coffee' '.pug' '.js' dll: 'vendor': 'jquery': path 'backbone': path 'underscore': path 'chart_js': 'chart.js': path loaders: test: /\.json$/ loader: 'json' test: /\.pug$/ loader: 'pug?root=' + path test: /\.coffee$/ loader: 'coffee' publicFileDirecories: path path path path: src: path dest: path // must match with `public` value! public: '/build' // must match with `dest` value! ;
pretzel_server.js
example
Use only for development!
;
Gruntfile.js
example
var pretzelConfig = ;grunt; gruntconfig;
node-app.js
example
var express = ; var app = moduleexports = ; var assetsPathConfig = ; var manifests = {};if processenvNODE_ENV !== 'development' manifestsfiles = ; manifestsentriesAndDll = ; manifestsstylesheets = ;applocalsassets = manifestsfiles assetsPathConfig;applocalsserverAssets = manifestsentriesAndDll manifestsstylesheets assetsPathConfig; app; // …
browser-app.js
example
It is not possible to have access to serverAssets
in browser.
var assetPath = ; windowassets = ; // …
template.pug
example
html head link(href=serverAssets.css('test') media="all" rel="stylesheet") script(src=serverAssets.dll('vendor')) script(src=serverAssets.js('app')) body img(src=assets.image('test.jpg')) a(href=assets.file('test.txt'))
scripts
Useful "scripts": "assets:server:dev": "node ./assets/pretzel_server.js" "assets:clean": "grunt clean:pretzel" "assets:build:dll": "grunt webpack:pretzel-dll" "assets:build:all": "grunt pretzel-build-assets --hashedName=true"
Source directory structure
├── assets/
│ ├── pretzel_config.js
│ ├── pretzel_server.js
│ ├── entries/
│ │ ├── app_a.js
│ │ ├── app_b.js
│ ├── stylesheets/
│ │ ├── style_a.sass
│ │ ├── style_b.sass
├── components/
│ ├── component_a/
│ │ ├── public/
│ │ │ ├── stuff.txt
├── Gruntfile.js
Compiled directory structure
├── public/
│ ├── build/
│ │ ├── manifest-entries+dll.json
│ │ ├── manifest-stylesheets.json
│ │ ├── manifest-files.json
│ │ ├── files/
│ │ │ ├── stuff.DIGEST.txt
│ │ ├── dll/
│ │ │ ├── chart_js.DIGEST.js
│ │ │ ├── chart_js.DIGEST.js.map
│ │ │ ├── chart_js.json
│ │ │ ├── vendor.DIGEST.js
│ │ │ ├── vendor.DIGEST.js.map
│ │ │ ├── vendor.json
│ │ ├── entries/
│ │ │ ├── app_a.DIGEST.js
│ │ │ ├── app_a.DIGEST.js.map
│ │ │ ├── app_b.DIGEST.js
│ │ │ ├── app_b.DIGEST.js.map
│ │ ├── stylesheets/
│ │ │ ├── style_a.DIGEST.css
│ │ │ ├── style_a.DIGEST.css.map
│ │ │ ├── style_b.DIGEST.css
│ │ │ ├── style_b.DIGEST.css.map
What is DLL and why to use it
Read about webpack's DLL in this blog post. This module will make using it even simpler.
Gotchas
pug
- Make sure to set
app.locals.basedir = __dirname;
in your express app andloader: 'pug?root=' + path.resolve(__dirname, '../')
in yourpretzel_config.js
to be able to useinclude /node_modules/module_a/template_a
. - You can not have multiple
public/
directories or files with the same name.