GithubHelp home page GithubHelp logo

ninbryan / felt Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cognitom/felt

0.0 2.0 0.0 198 KB

On-demand bundler for ES6 / CSS Next

Home Page: https://cognitom.github.io/felt/

License: MIT License

JavaScript 98.41% HTML 1.59%

felt's Introduction

Felt

Build Status

On-demand bundler for ES6 / CSS Next.

See also its options, plugins and recipes.

Note: Felt runs on Node 6.x or above.

CLI usages

In short, install Felt globally:

$ npm install -g felt felt-recipe-minimal

Note: felt-recipe-minimal is a recipe for Felt. You may install other recipes, too.

And run Felt:

$ cd path/to/project/
$ felt

Then, open your site in browser: http://localhost:3000.

Note: type Ctrl + C to stop the server

Run Felt

Assume that you have a project like this:

  • project/
    • public/
      • index.html
      • main.js
      • style.css
    • cache/
    • package.json

Then run Felt:

$ cd path/to/project/
$ felt --recipe minimal --src public

There're some official recipes. Check them, too.

Use config files

Assume that you have a project like this:

  • project/
    • public/
      • index.html
      • main.js
      • style.css
    • cache/
    • package.json
    • felt.config.js

Or choose your own config file:

$ felt --config felt.config.js

The default name of config is felt.config.js, so it's also fine:

$ felt --config

The config file could be like this:

'use strict'
const
  rollup = require('felt-rollup'),
  buble = require('rollup-plugin-buble'),
  resolve = require('rollup-plugin-node-resolve'),
  commonjs = require('rollup-plugin-commonjs')

module.exports = {
  src: 'public',
  handlers: {
    '.js': rollup({
      plugins: [
        resolve({ jsnext: true,  main: true, browser: true }),
        commonjs(),
        buble()
      ],
      sourceMap: true
    })
  }
}

See more detail about options

Change port

The default port is 3000. If you want to change it, use --port option:

$ felt --port 3333

Note: you can set the port option in your config file, too.

Watch changes

$ felt --src public --watch

Export static files

This is handy to upload the contents to amazon S3 or GitHub Pages. Felt exports not only compiled files but also other assets like HTML, PNG, ...etc, too.

$ felt --src public --export dist

Note: with export option, Felt is not run as a server. It works as just a bundler.

With Express

Install Felt and use it as an express middleware.

$ npm install --save felt

Add server.js to the project:

const
  express = require('express'),
  felt = require('felt'),
  recipe = require('felt-recipe-minimal')

const app = express()

app.use(felt(recipe, { src: 'public' }))
app.use(express.static('public'))
app.listen(3000)

Separated config files

It's a good idea to separate the config from server.js:

const
  express = require('express'),
  felt = require('felt')
  config = require('./felt.config.js')

app.use(felt(config))
app.use(express.static('public'))
app.listen(3000)

felt.config.js could be like this:

const
  rollup = require('felt-rollup'),
  buble = require('rollup-plugin-buble'),
  resolve = require('rollup-plugin-node-resolve'),
  commonjs = require('rollup-plugin-commonjs')

module.exports = {/* options */}

Options

property default descriptions
opts.src . the document directory to serve
opts.cache 'cache' if it's located inside src, ignored on requests
opts.root process.cwd() usually no need to set it
opts.handlers {} see the section below
opts.patterns [] see the section below
opts.excludes [] see the section below
opts.external {} see the section below
opts.update 'once' 'never' or 'always'
opts.refresh true set false to skip refreshing on starting
opts.watch false set true to detect changes
opts.debug false set true to show debug comments on the terminal

opts.handlers

Default handlers for each extension.

{
  handlers: {
    '*.js': rollup({
      plugins: [
        resolve({ jsnext: true }),
        commonjs(),
        buble()
      ],
      sourceMap: true
    })
  }
}

opts.patterns

This option limits the target which Felt works with. This is handy when you want to use Felt for only a few files like this:

{
  patterns: ['index.js', 'components/*.js']
}

Which handler will be used is depends on the extension. If no handler for the extension, Felt will throw exceptions.

You can also specify the custom handler for the pattern:

{
  patterns: [
    'index.js',
    {
      pattern: 'components/*.js',
      handler: rollup({
        plugins: [babel()],
        sourceMap: true
      })
    }
  ]
}

opts.excludes

This option excludes the files from compiling and copying (when exporting). Cache directory and 'node_modules/**' are always excluded. For example:

{
  excludes: ['no-compile/**']
}

opts.external

This option makes copies from deeper files typically in node_modules. For example, if you need to access node_modules/pouchdb/dist/pouchdb.min.js, you may write like this:

{
  external: {
    'pouchdb.js': 'node_modules/pouchdb/dist/pouchdb.min.js'
    // 'where/to/expose': 'path/from/opts.root'
  }
}

Then you can access it by http://localhost:3000/pouchdb.js. This option is convenient to directly expose a JavaScript or CSS file which comes from npm or bower.

Note: The files will not be processed by opts.handlers. This means that the file will skip compiling by rollup and so on.

Plugins

Plugins are the interface to compilers like Rollup or PostCSS. Actually, these are the thin wrapper of these libraries:

Recipes

Recipes are pre-made configurations. You can use these recipes with some overwrite with ease.

Note: the repository name of the recipe supposed to have prefix felt-recipe-.

License

MIT © Tsutomu Kawamura

felt's People

Contributors

azu avatar cognitom avatar geckotang avatar ninbryan avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.