How to use watchify - 10 common examples

To help you get started, we’ve selected a few watchify examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github callmecavs / jax.js / gulpfile.babel.js View on Github external
' */',
  ''
].join('\n')

// JS

const browserifyArgs = {
  debug: true,
  entries: 'src/jax.js',
  standalone: 'Jax',
  transform: [
    'babelify'
  ]
}

const watchifyArgs = assign(watchify.args, browserifyArgs)
const bundler = watchify(browserify(watchifyArgs))

const build = () => {
  console.log('Bundling started...')
  console.time('Bundling finished')

  return bundler
    .bundle()
    .on('error', onError)
    .on('end', () => console.timeEnd('Bundling finished'))
    .pipe(source('jax.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify())
    .pipe(header(attribution, { pkg: packageJSON }))
    .pipe(sourcemaps.write('./maps', { addComment: false }))
github onespacemedia / cms / cms / project_template / project_name / assets / gulp / tasks / scripts.js View on Github external
function compile(watch) {
  // Create our browserify instance
  const bundler = watchify(browserify(config.watchify.fileIn, {debug: true}).transform(babelify));

  function rebundle() {
    bundler.bundle()
      .on('error', function (err) {
        console.error(err);
        this.emit('end');
      })
      // Grab our entry file
      .pipe(source(config.watchify.fileOut))

      // Buffer it.. (?)
      .pipe(buffer())

      // Initialise source maps, load the maps from browserify
      .pipe($.sourcemaps.init({loadMaps: true}))
github artsy / browserify-dev-middleware / index.js View on Github external
fs.exists(path, (exists) => {
        if (!exists) return next()

        let w

        // Create a new bundle & watcher if we haven't done so. Then start
        // and initial bundling.
        if (!watchers[path]) {
          const b = browserify(_.extend(_.omit(options,
            'transforms', 'globalTransforms', 'src'
          ), watchify.args))

          b.add(path)

          const transforms = options.transforms || []
          transforms.forEach((t) => {
            b.transform(t)
          })

          const globalTransforms = options.globalTransforms || []
          globalTransforms.forEach((t) => {
            b.transform({ global: true }, t)
          })

          if (options.intercept) options.intercept(b)
          w = watchers[path] = watchify(b)
          bundleAndCache(w, path)
github risq / investigator / gulpfile.js View on Github external
function getBundler() {
  // Our browserify bundle is made up of our unit tests, which
  // should individually load up pieces of our application.
  // We also include the browserify setup file.
  var testFiles = glob.sync('./test/unit/**/*');
  var allFiles = ['./test/setup/browserify.js'].concat(testFiles);

  // Create our bundler, passing in the arguments required for watchify
  var bundler = browserify(allFiles, watchify.args);

  // Watch the bundler, and re-bundle it whenever files change
  bundler = watchify(bundler);
  bundler.on('update', function() {
    bundle(bundler);
  });

  // Set up Babelify so that ES6 works in the tests
  bundler.transform(babelify.configure({
    sourceMapRelative: __dirname + '/src'
  }));

  return bundler;
};
github cdglabs / prolog-viz / gulp / tasks / browserify2.js View on Github external
var source = require('vinyl-source-stream');
// var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
// var sourcemaps = require('gulp-sourcemaps');
var assign = require('object-assign');
var config       = require('../config').browserify;
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');
var streamify = require('gulp-streamify');

// add custom browserify options here
var customOpts = {
  entries: config.bundleConfigs[0].entries,
  debug: config.debug
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));

gulp.task('browserify2', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal

function bundle() {
  var condition = function (file) {
    return !config.debug;
  };

  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source(config.bundleConfigs[0].outputName))
    .pipe(gulpif(condition,
github orizens / echoes / gulp / browserify.js View on Github external
function buildScript(file) {

  let bundler = browserify({
    entries: ['./src/app.js', configuraionFile],
    debug: true, //createSourcemap(),
    cache: {},
    packageCache: {},
    fullPaths: isDevMode // isDevMode
  });

  if ( isDevMode ) {
    bundler = watchify(bundler);

    bundler.on('update', function() {
      rebundle();
      gutil.log('Rebundle...');
    });
  }

  const transforms = [
    { 'name': babelify, 'options': {}},
    // { 'name':debowerify, 'options': {}},
    { 'name': ngAnnotate, 'options': {}},
    { 'name': uglifyify, 'options': { global: true }, production: true }
    // { 'name':'brfs', 'options': {}},
    // { 'name':' bulkify', 'options': {}}
  ];
github yiwenl / Alfrid / examples / ShadowBasic / gulpfile.babel.js View on Github external
const gulp        = require('gulp');
const babel       = require('gulp-babel');
const sourcemaps  = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const browserify  = require('browserify');
const babelify    = require('babelify');
const source      = require('vinyl-source-stream2')
const uglify      = require('gulp-uglify');
const sass        = require('gulp-ruby-sass');
const prefix      = require('gulp-autoprefixer');
const watchify    = require('watchify');
const buffer      = require('vinyl-buffer');
const reload      = browserSync.reload;

var bundler = watchify(browserify('./src/js/app.js', watchify.args));
bundler.transform(babelify);
gulp.task('browserify', bundle);

bundler.on('update', bundle);     

function logError(msg) {
	console.log( msg.toString() );
}

function bundle() {
    var b = bundler.bundle()
	.on('error', logError)
	.pipe(source('bundle.js'))
	.pipe(buffer())
	.pipe(sourcemaps.init({ loadMaps: true }))
	.pipe(sourcemaps.write('./'))
github alexanderGugel / refreshify / bin / cmd.js View on Github external
var notifier      = require('node-notifier');
var refreshServer = require('../lib/refresh-server.js');
var clientSource  = fs.readFileSync(__dirname + '/../lib/client-source.js');

var PORT = 31415;
var REFRESH_SERVER_URL = 'http://localhost:' + PORT;

clientSource = [
    'window.REFRESH_SERVER_URL = "' + REFRESH_SERVER_URL + '";\n',
    clientSource
].join('');


refreshServer.listen(PORT);

var w = fromArgs(process.argv.slice(2));
w.setMaxListeners(Infinity);

var outfile = w.argv.o || w.argv.outfile;
var verbose = w.argv.v || w.argv.verbose;

if (!outfile) {
    console.error('You MUST specify an outfile with -o.');
    process.exit(1);
}

var dotfile = path.join(path.dirname(outfile), '.' + path.basename(outfile));

w.on('update', bundle);
bundle();

function notifyError(errorMessage) {
github mikevercoelen / react-remodal / gulpfile.babel.js View on Github external
runSequence('clean', ['compile'], callback)
})

gulp.task('compile', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'))
})

gulp.task('publish-github-pages', ['compile-example:styles', 'compile-example:scripts'], () => {
  return gulp
    .src('example/**/*')
    .pipe(githubPages())
})

const bundler = watchify(browserify({
  ...watchify.args,
  entries: ['./example/scripts/index.js'],
  debug: true,
  transform: [babelify]
}))

function bundle () {
  return bundler.bundle()
    .on('error', function ({ message }) {
      gutil.log(gutil.colors.red('Error'), message)
    })
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./example'))
github kevinkhill / lavacharts / javascript / gulp-functions / Compile.js View on Github external
export default function compile(prod, watch, sync) {
    if (prod) {
        bundler.transform('stripify');
    }

    if (watch) {
        bundler = watchify(bundler);

        if (sync) {
            browserSync.init({
                proxy: "localhost:" + args.port || 8000
            });
        }

        bundler.on('update', () => {
            const msg = 'Lava.js re-bundling...';

            log(green(msg));

            notifier.notify({
                title: 'Browserify',
                message: msg
            });

watchify

watch mode for browserify builds

MIT
Latest version published 4 years ago

Package Health Score

65 / 100
Full package analysis