gulp-optimizer
v0.0.5
Published
gulp plugin for optimizer
Downloads
6
Readme
gulp-optimizer
Gulp plugin for RaptorJS Optimizer. Replaces references to non-optimized scripts or stylesheets into a set of HTML files.
Usage
First, install gulp-optimizer as a development dependency:
npm install --save-dev gulp-optimizerThen, add it to your gulpfile.js:
var optimizer = require('gulp-optimizer');
gulp.task('optimizer', function(){
gulp.src(['src/**/*.html'])
.pipe(optimizer({
"configFile": "./optimizer-config.json", //Path to a JSON optimizer configuration file
"dependencies": [
"./src/css/style.css",
"./src/css/style.less",
"./js/libs/react/react.js",
"./src/jsx/main.jsx",
"require-run: ./src/js/main"
],
"plugins": [
"optimizer-less",
"optimizer-jsx"
],
"mode": 'production'
}))
.pipe(gulp.dest('build'));
});
Create the optimizer config file:
optimizer-config.json:
{
"plugins": [], // plugins can be specified here, or can be overridden in the gulpfile.js
"fileWriter": {
"outputDir": "build/static",
"fingerprintsEnabled": false,
"urlPrefix": "static/"
},
"minify": true,
"resolveCssUrls": true,
"bundlingEnabled": true
}
Create the main Node.js JavaScript module file:
main.js:
var changeCase = require('change-case');
console.log(changeCase.titleCase('hello world')); // Output: 'Hello World'Create a StyleSheet for the page:
style.css
body {
background-color: #5B83AD;
}Sample file under src/ eg: src/index.html
src/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Optimizer Demo</title>
</head>
<body>
<h1 id="header">Optimizer Demo</h1>
</body>
</html>Run the following command to generate the concatenated, minifed css, js files inside static folder and references of those files are added into the html files:
gulp optimizerThis should generate the html file in build/
build/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Optimizer Demo</title>
<!-- <optimizer-head> --><link rel="stylesheet" type="text/css" href="static/default.css"><!-- </optimizer-head> --></head>
<body>
<h1 id="header">Optimizer Demo</h1>
<div id="main"></div>
<!-- <optimizer-body> --><script type="text/javascript" src="static/default.js"></script>
<script type="text/javascript">$rmod.ready();</script><!-- </optimizer-body> --></body>
</html>