❤
npm
Sign UpSign In

gulp-lasso

0.0.9 • Public • Published

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-lasso

Then, 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 lasso

This 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>

Readme

Keywords

Package Sidebar

Install

npm i gulp-lasso

Repository

github.com/lasso-js/gulp-lasso

Homepage

github.com/lasso-js/gulp-lasso#readme

Weekly Downloads

41

Version

0.0.9

License

MIT

Last publish

Collaborators

  • austinkelleher
  • dylanpiercey
  • mlrawlings
  • philidem
  • pnidem
Try on RunKit
Report malware