Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-pack with all npm packages installed. Try it out:

var gulpPack = require("gulp-pack")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-pack v0.0.15

a tools to make front-end development easier

Gulp-pack

Gulp-pack is a plugin which combines some common gulp plugins to make front-end development easier.

Gulp-pack can do these:

  • simple webserver(webserver)
  • auto-refresh page in browser(livereload)
  • css auto prefix(autoprefixer)
  • css pretreatment(stylus)

More plugins will be combined in the futrue.

Install

Run terminal, and type code as below:

npm install -g gulp-pack

If your network is protected by the GFW, you may wanna try another command:

npm --registry https://registry.npm.taobao.org install -g gulp-pack

Gulp-pack will be installed in global environment, which means, there won't be annoying node_modules folder in your project.

Run

Run terminal, go to your project path, and type code as below:

pack ./

Then you will see comments like these:

D:\Git\test>pack
[10:28:49] Webserver started at http://localhost:3001
watch .js .html
watch .css
507 ms to complete

It means gulp-pack is working.

Optional Parameters

usage: gulp-pack [path] [options]
options:
  -p               Port to use [3001]
  -l --livereload  Livereload Port to use [4001]
  -h --help        Print this list and exit.
  -v --version     Print version.

Extented package.json

You can add properties is package.json to enable/disable some functions.

PropertyEffectOptional ConfigDefault
httpweb server porttrue/falsetrue
livereloadauto refresh page in browsertrue/falsetrue
autoprefixercss auto prefixtrue/falsetrue
openopen browser when server startstrue/falsefalse
stylusmonitor .styl filestrue/falsetrue
watchfile path to be monitoredsee samples as below

If you don't modify package.json, gulp-pack works under default configs.

Here is a sample of package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "author": "",


  "pack": {
    "root": "./",
    "http": 3001,
    "livereload": {
      "port": 4001,
      "enable": true
    },
    "autoprefixer": false,
    "open": false,
    "watch": {
      "js": [
        "./client/**/*.js"
      ],
      "css": [
        "./client/**/*.css"
      ],
      "stylus": [
        "./client/**/*.styl"
      ],
      "html": [
        "./client/**/*.html"
      ]
    }
  }


}

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free