Gulp, browserify, and babel(ify?) questions

[maxxd]

Hi, y'all.

 

So, I've recently decided  to drag myself (kicking and screaming, apparently) into 2010 where JavaScript development is concerned and I'm running into some ... confusion. I've decided to try exploring a gulp-driven development workflow with babel and browserify so I can use some of the lovely looking new JS features and transpile them into a form that obsolete browsers (read IE.anything) can understand.

 

Code will follow, so if you're bored with this already please feel free to scroll down.

 

Basically, I've got a decent boilerplate (package.json, gruntfile.js, and .babelrc) that covers most of my bases, but I want to be able to use require() in my files so I can modularize my JS classes and port them where and when necessary, and I'm running into trouble when it comes to using browserify. At this point, I'm not terribly concerned with sourcemaps or automating my browser refresh, so I'm skipping that until I get a decent groundwork that actually does what I want. In the meantime, my development system structure is like this:

Clients
 |_Web Dev
   |_ClientA
     |_pkg
       |_js
         |_script.min.js
       |_css
         |_style.css
     |_src
       |_js
         |_script.js
       |_less
         |_style.less
           variables.less
     |_package.json
       gruntfile.js
       .babelrc
   |_ClientB
       |_pkg
         |_js
           |_script.min.js
         |_css
           |_style.css
       |_src
         |_js
           |_script.js
         |_less
           |_style.less
             variables.less
             somethingElse.less
     |_package.json
       gruntfile.js
       .babelrc
   |_...
   |_node_modules

Hopefully the idea is clear - I'm relying on node's tendency to bubble up directories until it finds the 'node_modules' directory to load any dependencies - the way I figure it, this doesn't clutter my drive with a bunch of duplicate files and I've only really got one global package.json file to maintain across each of the three or four systems I use to develop. What I've gotten to so far is a nice little setup where `gulp Develop` will watch my development directories, process and concatenate the .less files, minify the .css files, and move the .css and .js to the deployment directory. `gulp Deploy` processes and concatenates the .less files, minifies the .css and .js files, moves them into the deployment directory, copies the .php files into the deployment directory, then zips the entire thing into a package appropriate for the deployment style I use. Working like a charm. Except that I can only use 'require()' in the gulpfile, which started today to drive me a little nuts and sent me down this particular rabbit hole.

 

Full disclosure, it's been a long couple weeks where work load has been high, I've attended a work-related conference outside of work hours, and spent 9 days doing server admin tasks on live client servers. I'm a screaming introvert and not exactly an expert with the command line, so as a result I'm a bit tired right now and may be looking the answer directly in the face, but I can't see it.

 

TL;DR - code!

 

package.json:

{
  "name": "Testing",
  "version": "0.0.1",
  "main": "gulpfile.js",
  "author": "maxxd",
  "license": "UNLICENSED",
  "private": true,
  "existingDevDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-less": "^3.3.2",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "gulp-zip": "^4.0.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-babel": "^7.0.0",
    "gulp-babel-preset-es2015": "latest",
    "gulp-babel-preset-env": "latest"
  },
  "devDependencies": {
    
  }
}

.babelrc:

{
	"presets" : [
		"es2015",
		["env", {
			"targets": {
				"browsers": "last 2 versions"
			}
		}]
	],
	"plugins" : ["transform-es2015-arrow-functions"],
}

gulpfile.js:

/* jshint esversion: 6 */
/* globals require */
const aw = require('gulp-load-plugins')({
	pattern: ['*'],
	scope: ['existingDevDependencies']
});
const pkg = require('./package.json');
const pluginName = pkg.name.replace(new RegExp(' ', 'g'), '_');

aw.gulp.task('Develop', ['developJS', 'compileCSS', 'watch']);
aw.gulp.task('Package', ['prodJS', 'compileCSS']);
aw.gulp.task('Deploy', ['Package', 'zipFiles']);

var paths = {
	srcJS : 'src/js/**/*.js',
	srcCSS : 'src/less/**/*.less',
	srcStyle : ['!src/less/variables.less', 'src/less/style.less', 'src/less/**/*.less'],
	destJS : 'pkg/js',
	destCSS : 'pkg/css',
};

aw.gulp.task('developJS', () => {
	"use strict";
	return aw.gulp.src(paths.srcJS)
		.pipe(aw.babel({"compact": false}))
		.pipe(aw.rename({
			suffix: '.min'
		}))
		.pipe(aw.gulp.dest(paths.destJS));
});

aw.gulp.task('watch', () => {
	"use strict";
	aw.gulp.watch(paths.srcCSS,['compileCSS']);
	aw.gulp.watch(paths.srcJS,['developJS']);
});

aw.gulp.task('prodJS', () => {
	"use strict";
	return aw.gulp.src(paths.srcJS)
		.pipe(aw.babel({"compact": true}))
		.pipe(aw.uglify())
		.pipe(aw.rename({
			suffix: '.min'
		}))
		.pipe(aw.gulp.dest(paths.destJS));
});

aw.gulp.task('compileCSS', () => {
	"use strict";
	return aw.gulp
		.src(paths.srcStyle)
		.pipe(aw.less({
			strictMath : 'on',
			strictUnits : 'on',
		}))
		.pipe(aw.concat('all.css'))
		.pipe(aw.cssmin())
		.pipe(aw.rename({
			extname : '.css',
			basename : 'style'
		}))
		.pipe(aw.gulp.dest(paths.destCSS));
});

aw.gulp.task('zipFiles', () => {
	"use strict";
	return aw.gulp
		.src(['!pkg/**/_notes/**', '!pkg/**/_notes', '!pkg/_notes', '!pkg/_notes/*', './pkg/**/*', './' + pluginName + '.php'])
		.pipe(aw.zip(pluginName + '.zip'))
		.pipe(aw.gulp.dest('./'));
});

Now, the problem. Trying to incorporate browserify into the above has proved particularly problematic. I found several tutorials and boilerplates online that used gulp-browserify and tried those. Apparently gulp-browserify has been deprecated and is no longer being maintained. Crap. OK, so I found a couple that apparently had great success using the plain-jane browserify npm module and babel as such:

browserify(/*...*/).transform('babelify', {/*...*/}).pipe(//on to other things....

So I tried that. According to my console, browserify().transform() is not a function. And I did find one way that worked, but it wouldn't allow me the option to minify and uglify the JS on `gulp Package` but not on `gulp Develop` (it's a long story why I need that, but I do at the moment so please bear with it). Also, I forgot to commit when it started working so when I trashed the file and tried to go back to when it was working it wasn't there. My bad.

 

So long story short (too late, I know), if anyone knows of a good and modern gulp-browserify-babel(ify) tutorial I'd appreciate it. Honestly, I'm more than willing to do the research if someone knows of a good boilerplate gruntfile.js, pacakge.json, and .babelrc to point me towards. I've just need a starting point beyond the sea of code above, and I've finally gotten tired of banging my head against this wall for the time being. Right now, I really miss jQuery and the limits of JavaScript I've always known and gotten used to.

[maxxd]

I should probably explain - when I say I "found one way that worked", I mean it didn't throw an error saying something along the lines of "'include' and 'require' can only be used at the top level" - apparently at one point my browserify() pipe was in exactly the right spot to avoid that error, but I couldn't find the proper way to pass the run-time parameters controlling the minification and uglification to the babelify() call that was next.