component plugin for gulp
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.travis.yml
README.md
index.js
package.json

README.md

WARNING

This plugin only works with the old 0.10.x version of Component builder, and is no longer actively maintained. Personally I have leaned towards Browserify for simple setups and custom build scripts with component-watcher instead of Gulp. To use Component 1.x with Gulp check out gulp-component-builder or js-gulp-component-build.


gulp-component NPM version Build Status

Component builder plugin for gulp

Usage

Example usage using a Stylus build plugin and watching script and style changes separately:

var gulp      = require('gulp'),
    component = require('gulp-component'),
    stylus    = require('component-stylus-plugin')

gulp.task('scripts', function () {
    gulp.src('component.json')
        .pipe(component.scripts({
            standalone: true
        }))
        .pipe(gulp.dest('build/js'))
})

gulp.task('styles', function () {
    gulp.src('component.json')
        .pipe(component.styles({
            configure: function (builder) {
                builder.use(stylus)
            }
        }))
        .pipe(gulp.dest('build/css'))
})

gulp.task('watch', function () {
    gulp.watch(['component.json', 'src/**/*.js'], ['scripts'])
    gulp.watch(['component.json', 'src/**/*.styl'], ['styles'])
})

gulp.task('default', ['scripts', 'styles'])

API

component([options])

  • options.name

    Type: String
    Default: 'build'

    The filename for built files.

  • options.only

    Type: String or Array
    Default: undefined

    Build only certain types of assets. Available asset types are: 'scripts', 'styles', 'images', 'fonts', 'files', 'templates', 'json'. Each of these types has an alias to create a stream that builds that type only, e.g. component.scripts([options])

  • options.configure(builder)

    Type: Function
    Default: undefined

    A function to add custom configurations to the builder.

  • options.standalone

    Type: Boolean or String
    Default: false

    Wrap the built js code with a UMD wrapper. If it's a string, it will be used to expose the component on the this context.

  • options.out

    Type: String
    Default: 'build'

    The directory to link/copy assets (images, fonts and files) to.

  • options.copy

    Type: Boolean
    Default: false

    Copy assets instead of linking.

  • options.use

    Type: Array
    Default: undefined

    An array of plugins/functions to be used by the builder.

  • options.ignore

    Type: Array
    Default: undefined

    An array of component dependencies to ignore.

  • options.dev

    Type: Boolean
    Default: false

    Include dev dependencies and add source urls.

  • options.prefix

    Type: String
    Default: undefined

    Prefix css asset urls.

  • options.noRequire

    Type: Boolean
    Default: false

    Exclude require from build. Ignored when options.standalone is truthy.

License

MIT