gulp-lasso
v0.0.9
Published
gulp plugin for lasso
Downloads
69
Readme
gulp-lasso
Gulp plugin for Lasso.js. Replaces references to scripts or stylesheets into a set of HTML files.
Usage
First, install gulp-lasso as a development dependency:
npm install --save-dev gulp-lassoThen, add it to your gulpfile.js:
var lasso = require('gulp-lasso');
gulp.task('lasso', function(){
gulp.src(['src/**/*.html'])
.pipe(lasso({
"configFile": "./lasso-config.json", //Path to a JSON lasso 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": [
"lasso-less",
"lasso-jsx"
],
"mode": 'production'
}))
.pipe(gulp.dest('build'));
});
Create the lasso config file:
lasso-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>Lasso.js Demo</title>
</head>
<body>
<h1 id="header">Lasso.js 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 lassoThis should generate the html file in build/
build/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lasso.js Demo</title>
<!-- <lasso-head> --><link rel="stylesheet" type="text/css" href="static/default.css"><!-- </lasso-head> --></head>
<body>
<h1 id="header">Lasso.js Demo</h1>
<div id="main"></div>
<!-- <lasso-body> --><script type="text/javascript" src="static/default.js"></script>
<script type="text/javascript">$rmod.ready();</script><!-- </lasso-body> --></body>
</html>