Browserify, Gulp and Buttons - buttons.html5.js not included

Misiu

Hi all,
I'm new to npm, gulp and all that stuff.
I'm trying to create simple page that will use browserify and gulp to create release build.
I've installed node, and using npm init I've created below package.json file:

{
  "name": "datatables_template",
  "version": "0.0.4",
  "description": "Just tests",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Misiu",
  "license": "MIT",
  "devDependencies": {
    "browserify": "latest",
    "gulp": "latest",
    "gulp-concat-css": "^2.2.0",
    "gulp-header": "^1.7.1",
    "gulp-html-replace": "^1.5.5",
    "gulp-sourcemaps": "latest",
    "gulp-uglify": "latest",
    "gulp-util": "latest",
    "lodash.assign": "latest",
    "vinyl-buffer": "latest",
    "vinyl-source-stream": "latest",
    "watchify": "latest"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "datatables.net-bs": "^1.10.10",
    "datatables.net-buttons": "^1.1.0",
    "datatables.net-buttons-bs": "^1.1.0",
    "jquery": "^2.1.4",
    "underscore": "^1.8.3"
  }
}

and this is my main.js:

var $ = require('jquery');
var dt = require('datatables.net-bs')();
var dt_buttons_bs = require( 'datatables.net-buttons-bs' )();
$('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );

and my gulpfile.js

'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
var header = require('gulp-header');
var htmlreplace = require('gulp-html-replace');
var concatCss = require('gulp-concat-css');

// add custom browserify options here
var customOpts = {
  entries: ['./main.js'],
  debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts)); 


var pkg = require('./package.json');
var banner = ['/**',
  ' * <%= pkg.name %> - <%= pkg.description %>',
  ' **/',
  ''].join('\n');
  
  var version = pkg.version;
  var fileName = 'bundle.'+version+'.min.js';
  
// add transformations here
// i.e. b.transform(coffeeify);

gulp.task('js', 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

gulp.task('html', function() {
      gulp.src('./index.html')
        .pipe(htmlreplace({
            'js': 'js/'+fileName
        }))
        .pipe(gulp.dest('./dist'));
    });

gulp.task('css', function() {
      gulp.src([
      './node_modules/bootstrap/dist/css/bootstrap.css',
      './node_modules/datatables.net-bs/css/dataTables.bootstrap.css',
      './node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css'
      ])
      .pipe(concatCss("bundle.css"))
      .pipe(gulp.dest('./dist/css'));
});

gulp.task('all', ['html', 'css', 'js']);

function getVersion(){
    var pkg1 = require('./package.json');
    version = pkg1.version;
    fileName = 'bundle.'+version+'.min.js';
}

function bundle() {
  getVersion()
  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source(fileName))
    // optional, remove if you don't need to buffer file contents
    .pipe(buffer())
    // optional, remove if you dont want sourcemaps
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
       // Add transformation tasks to the pipeline here.
    //.pipe(uglify())
    //.on('error', gutil.log)
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(header(banner, { pkg : pkg } ))
    .pipe(gulp.dest('./dist/js'));
}

When I call gulp all browserify and gulp are creating all files in dist folder, but unfortunately bundled js file don't contains buttons.colVis.js, buttons.flash.js, butttons.html5.js and buttons.print.js.

As I wrote at the beginning all this is quite new for me so I have some questions:

1. What packages I must install with npm to get DataTables and Buttons extension running - I need html5 copy and export, so how can I require additionals files that are needed - jszip, pdfmake
2. Do I must require all packages in main.js or will browserify get all dependencies?

I find idea behind packages (npm and bower) very interesting, not including all files by hand is awesome.
Any tips on how to build js, html and css better are welcome.

allan

You need to include the button definition files you want since they aren't included as part of the main file for Buttons - so you might use something like the following to add them:

require( 'datatables.net-buttons/js/buttons.colVis.js' );
// etc

There appear to be packages available on NPM for JSZip and pdfmake if you want to include them.

Allan

Misiu

@allan thanks for answer.
I've tried that, but I can't get Buttons to work with Browserify.
I'll create second project from scratch and maybe this will fix my errors.

I'll write my solution if I finally manage to get this working.