nimbu-toolbelt
Tools for Nimbu projects
Last updated 2 months ago by wouterh .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install nimbu-toolbelt 
SYNC missed versions from official npm registry.

nimbu-toolbelt

Toolbelt for Nimbu projects

oclif Version Downloads/week License

Usage

Prerequisites

You need a recent node and yarn. On Mac OS X:

brew install node yarn

You still need what was needed to use the old toolchain (ruby, bundler, ...)

Getting started

Add this package to your project:

yarn add --dev nimbu-toolbelt

This will also execute bundle install to install the old toolchain it uses.

Development server

To start developing on your project that uses this toolbelt, just run:

yarn nimbu server

This will start a webpack-dev-server (and the old nimbu server that it proxies to). Your browser should automatically open a connection to it at http://localhost:4567/.

Pushing to nimbu

  1. Stop your development server
  2. Make a production build with yarn nimbu build
  3. Push to nimbu with yarn nimbu themes:push (this calls the ruby-based toolchain -> all arguments you know are supported)

NOTE: Both the development and production webpack configuration generate snippets/webpack.liquid that gives access to the information about which files webpack generated. This should be included and used in the layout of your theme. Make sure that include is there and that you push the snippet to nimbu!

Commands

nimbu apps:config

Add an app to the local configuration

USAGE
  $ nimbu apps:config

See code: src/commands/apps/config.ts

nimbu apps:list

List the applications registered in Nimbu

USAGE
  $ nimbu apps:list

See code: src/commands/apps/list.ts

nimbu apps:push [FILES]

Push your cloud code files to nimbu

USAGE
  $ nimbu apps:push [FILES]

ARGUMENTS
  FILES  The files to push.

OPTIONS
  -a, --app=app  The (local) name of the application to push to (see apps:list and apps:config).

See code: src/commands/apps/push.ts

nimbu apps:transpile SOURCE TARGET

Transpile a file from ES6 to ES5 for compatiblity with Nimbu Cloud applications

USAGE
  $ nimbu apps:transpile SOURCE TARGET

See code: src/commands/apps/transpile.ts

nimbu auth:login

log in with your nimbu credentials

USAGE
  $ nimbu auth:login

See code: src/commands/auth/login.ts

nimbu auth:logout

clear local authentication credentials

USAGE
  $ nimbu auth:logout

See code: src/commands/auth/logout.ts

nimbu auth:token

display your api token

USAGE
  $ nimbu auth:token

See code: src/commands/auth/token.ts

nimbu browse:admin

open the admin area for your current site

USAGE
  $ nimbu browse:admin

See code: src/commands/browse/admin.ts

nimbu browse:simulator

open the simulator for your current site

USAGE
  $ nimbu browse:simulator

See code: src/commands/browse/simulator.ts

nimbu build

build a production version of your javascript and CSS

USAGE
  $ nimbu build

See code: src/commands/build.ts

nimbu config

Show resolved configuration

USAGE
  $ nimbu config

See code: src/commands/config.ts

nimbu help [COMMAND]

display help for nimbu

USAGE
  $ nimbu help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

See code: @oclif/plugin-help

nimbu init

initialize your working directory to code a selected theme

USAGE
  $ nimbu init

See code: src/commands/init/index.ts

nimbu server

run the development server

USAGE
  $ nimbu server

OPTIONS
  --host=host              [default: 0.0.0.0] The hostname/ip-address to bind on.
  --nimbu-port=nimbu-port  [default: 4568] The port for the ruby nimbu server to listen on.
  --nocookies              Leave cookies untouched i.s.o. clearing them.
  --port=port              [default: 4567] The port to listen on.

See code: src/commands/server.ts

nimbu sites:list

list sites you can edit

USAGE
  $ nimbu sites:list

See code: src/commands/sites/list.ts

nimbu themes:diff [THEME]

describe the command here

USAGE
  $ nimbu themes:diff [THEME]

ARGUMENTS
  THEME  The name of the theme to list

See code: src/commands/themes/diff.ts

nimbu themes:list [THEME]

list all layouts, templates and assets

USAGE
  $ nimbu themes:list [THEME]

ARGUMENTS
  THEME  The name of the theme to list

See code: src/commands/themes/list.ts

nimbu themes:push [FILES]

describe the command here

USAGE
  $ nimbu themes:push [FILES]

ARGUMENTS
  FILES  The files to push with --only

OPTIONS
  --css-only     only push css
  --fonts-only   only push fonts
  --force        skip the usage check and upload anyway
  --images-only  only push new images
  --js-only      only push javascript
  --liquid-only  only push template code
  --only         only push the files given on the command line

See code: src/commands/themes/push.ts

Features

Webpack is configured to support the features below.

Coffeescript/Javascript

The javascripts pipeline supports:

There is one entrypoint src/index.js that gets compiled into javascripts/app.js and javascripts/vendor.js (split automatically).

(S)CSS

The CSS pipeline supports:

  • SCSS using sass-loader
  • Minification and autoprefixing using postcss-loader and autoprefixer

The entrypoint is src/index.scss, but any (S)CSS you import in your javascript or coffeescript will also be included in the output.

To import scss files from node_modules, use a ~ prefix. For example, to import bourbon that was added with yarn add bourbon:

@import '~bourbon/core/bourbon';

In development mode, the CSS is injected dynamically into the DOM using style-loader to support Hot Module Reloading. In production, the CSS is extracted into stylesheets/app.css.

Sometimes the dynamic injecting of CSS breaks stuff. For example, if you use javascript plugins that measure certain widths/heights when the document is ready. These might execute before the styles get injected. To test these kind of things, you can tell webpack to extract the CSS into stylesheets/app.css in development too. Start the development server with the following command to do that:

EXTRACT_CSS=true yarn start

Using the webpack output in your layout

Webpack generates snippets/webpack.liquid. If you include that snippet, you get access to:

  • webpack_build_timestamp: timestamp of the moment that webpack generated the snippet. Useful in a cache key.
  • webpack_chunks: an array of the names of the chunks that webpack generated.
  • webpack_js: a map of chunkname to javascript filename for that chunk.
  • webpack_css: a map of chunkname to array of css filenames for that chunk.

For example, you can use this snippet of liquid in your layout:

{% include 'webpack' %}
{% for chunk in webpack_chunks, cache: webpack_build_timestamp %}
{% for file in webpack_css[chunk] %}
{{ file | stylesheet_tag }}
{% endfor %}
{% endfor %}

{% for chunk in webpack_chunks, cache: webpack_build_timestamp %}
{{ webpack_js[chunk] | javascript_tag }}
{% endfor %}

Current Tags

  • 1.4.2                                ...           latest (2 months ago)

22 Versions

  • 1.4.2                                ...           2 months ago
  • 1.4.1                                ...           2 months ago
  • 1.4.0                                ...           2 months ago
  • 1.3.0                                ...           3 months ago
  • 1.2.6                                ...           4 months ago
  • 1.2.5                                ...           4 months ago
  • 1.2.4                                ...           4 months ago
  • 1.2.3                                ...           5 months ago
  • 1.2.2                                ...           7 months ago
  • 1.2.1                                ...           7 months ago
  • 1.2.0                                ...           8 months ago
  • 1.1.2                                ...           9 months ago
  • 1.1.1                                ...           9 months ago
  • 1.1.0                                ...           9 months ago
  • 1.0.3                                ...           9 months ago
  • 1.0.2                                ...           9 months ago
  • 1.0.0-rc.1                                ...           9 months ago
  • 1.0.0-beta6                                ...           9 months ago
  • 1.0.0-beta5                                ...           9 months ago
  • 1.0.0-beta3                                ...           9 months ago
  • 1.0.0-beta2                                ...           9 months ago
  • 1.0.0-beta                                ...           9 months ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 23
Last Day 0
Last Week 1
Last Month 36
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |