• Stars
    star
    118
  • Rank 292,913 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

On-demand bundler for ES6 / CSS Next

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

More Repositories

1

paper-css

Paper CSS for happy printing
CSS
2,443
star
2

symbols-for-sketch

Symbol font templates for Sketch.app
JavaScript
680
star
3

gulp-sketch

A SketchTool plugin for gulp
CoffeeScript
300
star
4

riot-bootstrap

Bootstrap-like Components for Riot.js
JavaScript
136
star
5

keiyaku-css

Crazy Style Formatter for Japanese Contract Document
CSS
107
star
6

momy

MongoDB to MySQL replication
JavaScript
98
star
7

tokoro

住所緯度経度変換ライブラリ (ジオコーディング)
CoffeeScript
93
star
8

webdriverio-examples

JavaScript
64
star
9

ikki

An extention toolkit for Riot.js
JavaScript
53
star
10

symbols

The Template of Symbol Fonts for Web
CSS
48
star
11

symbol-font-in-web

CoffeeScript
48
star
12

gulp-slim

Slim plugin for gulp
CoffeeScript
44
star
13

ModernAqua-Theme-for-SugarCRM

MacOSX-like theme by CogniTom
CSS
20
star
14

gulp-straw

Gulp Task Manager: The command-line tool for managing your gulpfile.
CoffeeScript
17
star
15

Qiita

Articles on Qiita
14
star
16

shinkan.today

「新刊トゥデイ」
JavaScript
14
star
17

riot-mixin-pack

JavaScript
12
star
18

sankaku

三角かな配列 ― USキーボードでカナ入力
12
star
19

sometime-riot

Timepicker for Riot.js
JavaScript
12
star
20

coder2-docker

Dockerfile
10
star
21

west-or-east

郵便番号から、西日本か東日本を判定
JavaScript
9
star
22

wdio-phantomjs-service

WebdriverIO service to start & stop PhantomJS
JavaScript
8
star
23

riot-fa

Font Awesome icons for Riot.js
JavaScript
8
star
24

fafgag

Creates an Observable from FAFGAG (Function / Async Function / Generator / Async Generator)
JavaScript
8
star
25

es-http-error

HttpError class for browsers (without Node.js dependencies)
JavaScript
7
star
26

gulp-handbook

gulp.js Handbook
CoffeeScript
7
star
27

electron-starter

Electron Sample Application
CoffeeScript
7
star
28

gulpfiles

gulpfiles for gulp.js
CoffeeScript
6
star
29

gulp-phantom

PhantomJS plugin for gulp
CoffeeScript
6
star
30

comic-viewer

A comic viewer built on Riot.js
JavaScript
6
star
31

dominiq

A happy medium between classic DOMs and upcoming new ES features
JavaScript
5
star
32

riot-action

JavaScript
5
star
33

mornin

Check-in! Mornin'!
JavaScript
5
star
34

CAPITALS

CAPITALS illustrates how to attach source map to the code during compilation.
JavaScript
5
star
35

riotjs-currency-calculator

Riot.js Currency Calculator
CoffeeScript
4
star
36

bookreader.js

JavaScript
4
star
37

EventWall

JavaScript
4
star
38

SugarCE-JLP

Japanese Language Pack for SugarCE
PHP
3
star
39

dotfiles

Dotfiles without dotfiles
Shell
3
star
40

presentation-cmu12

CSS
3
star
41

riot-tutorial

HTML
3
star
42

entry

Sample app with Riot.js
JavaScript
3
star
43

riot-checker

Riot Tag Syntax Checker
HTML
2
star
44

felt-rollup

JavaScript
2
star
45

felt-recipe-minimal

Minimal recipe for Felt
JavaScript
2
star
46

felt-recipe-react

A recipe for Felt with React
JavaScript
2
star
47

felt-recipe-riot

A recipe for Felt with Riot
JavaScript
2
star
48

StaffRoll.net-Libraries-and-Themes

JavaScript
2
star
49

windmill

A keymap for 40% ortholinear keyboards.
C
1
star
50

mb_emulator

PHP
1
star
51

dali-example

JavaScript
1
star
52

CoffeeSugar

Helper functions written in CoffeeScript
1
star
53

Vagrant-LAMP-concrete5

A LAMP stack for Laravel using Vagrant with Chef
Ruby
1
star
54

canvas-lesson

1
star
55

CycleThroughWindows

1
star
56

wagon

Embed images into the CSS on the fly.
PHP
1
star
57

cognitom.github.com

public site
PHP
1
star
58

felt-postcss

JavaScript
1
star
59

devsync

Syncing npm modules while development
JavaScript
1
star