How do I get Object.assign to work with 6to5 polyfill? - ecmascript-6

I am trying to use Object.assign from ES6, but it is always undefined. Here is the file where I am using it:
var Dispatcher = require('./dispatcher.js');
export default Object.assign(Dispatcher.prototype, {
handleViewAction(action) {
this.dispatch({
source: 'VIEW_ACTION',
action: action
});
}
});
And here is the gulp task I am using to transpile the code:
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream')
var to5 = require('6to5ify');
module.exports = function(gulp, config) {
gulp.task('browserify', function() {
browserify(config.app.entry, {debug: true})
.add(require.resolve('6to5/polyfill'))
.transform(to5)
.transform(reactify)
.bundle()
.pipe(source(config.app.bundleName))
.pipe(gulp.dest(config.app.bundle));
});
};
My Object is valid, but assign is undefined. What am I doing wrong?

Babeljs (formerly 6to5) does not transform or polyfill Object.assign.
You will need to use another polyfill library. 2 popular libraries are core-js or object-assign.
With core-js you would do it like this:
require('core-js');
Object.assign({}, {a:1});
or
var core = require('core-js/library');
var result = core.Object.assign({}, {a:1});
With object-assign:
var _assign = require('object-assign');
var result = _assign({}, {a:1});
But there are of course a lot of other libraries which do the same.

Related

Using lastmod as a function within gulp-sitemap with cheerio

I'm attempting to use the lastmod function in conjunction with cheerio (or gulp-cheerio) to pull a value from a meta tag from each file in the stream to populate this lastmod entry.
var gulp = require('gulp');
var cheerio = require('cheerio');
var sitemap = require('gulp-sitemap');
gulp.task('sitemap', function() {
return gulp.src(['/prod/**/*.html',])
.pipe(sitemap({
siteUrl: 'https://www.somewhere.com',
lastmod: function(file) {
var $ = cheerio.load(body);
var lastmodValue = $('head > meta[name="dc.date"]').attr('content');
return lastmodValue.toString().trim();
}
}))
.pipe(gulp.dest('/prod'));
});
This works fine if I hardcode a var before the return and comment out the cheerio statements. Gulp-sitemap lastmod instructions here: https://github.com/pgilad/gulp-sitemap#lastmod
Found my issue - Here's the code that works:
.pipe(sitemap({
siteUrl: 'https://www.somewhere.com',
lastmod: function(file) {
var $ = cheerio.load(file.contents);
var lastmodValue = $('head > meta[name="dc.date"]').attr('content');
return lastmodValue.toString().trim();
}
}))

elixir.queueTask is undefined

I am fairly new to Laravel 5.2 and Elixir/gulp but I have an issue with queueTask being undefined when I run gulp from the command line.
What I want to do is to extend elixir to delete some files (according to all the documentation I can find, that's what I need to do), so I have this:
var gulp = require('gulp');
var elixir = require("laravel-elixir");
var del = require('del');
elixir.extend("remove", function(path) {
gulp.task("removeFiles", function() {
return del(path);
});
return this.queueTask("removeFiles");
});
and then in my mix I have:
.remove([
"path/to/file1/filename1",
"path/to/file2/filename2"
])
When I run gulp in the command line, I get:
return this.queueTask("removeFiles");
^
TypeError: undefined is not a function
can anyone throw some light on what I am doing wrong please?
API has changed again since Elixir v3.0.0. So for v4.0.0 you must do this:
var elixir = require('laravel-elixir');
var del = require('del');
var Task = elixir.Task;
elixir.extend('remove', function (path) {
new Task('remove', function () {
return del(path);
});
});
And then you can call it within your pipeline like this:
mix.remove([
"path/to/file1/filename1",
"path/to/file2/filename2"
]);
The difference seems to be calling elixir.extend as opposed to elixir.Task.extend. And then returning a new elixir.Task.
API was changed in Elixir v3.0.0.
You no longer need to call Gulp.task(). Elixir will handle that, instead you have to create a new Task.
var Elixir = require('laravel-elixir');
var del = require('del');
Elixir.Task.extend('remove', function (path) {
new Task('remove', function () {
return del(path);
});
});

Browserify is not replacing the class token

I am using the following gulpfile to compile my javascript code from ES6 to ES5.
var gulp = require('gulp');
var gutil = require('gulp-util');
var cssnano = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('gulp-babel');
var babelify = require('babelify');
var uglify = require('gulp-uglify');
//...
gulp.task('js', function () {
return buildScript('index.js', false);
});
function buildScript(file, watch) {
var props = {
entries: [folder_source + '/javascript/' + file],
debug : true,
transform: [babelify]
};
// watchify() if watch requested, otherwise run browserify() once
var bundler = watch ? watchify(browserify(props)) : browserify(props);
function rebundle() {
var stream = bundler.bundle();
return stream
.on('error', handleErrors)
.pipe(source(file))
.pipe(gulp.dest(folder_dest + '/javascript/build/'));
}
// listen for an update and run rebundle
bundler.on('update', function() {
rebundle();
gutil.log('Rebundle...');
});
// run it once the first time buildScript is called
return rebundle();
}
function handleErrors() {
var args = Array.prototype.slice.call(arguments);
notify.onError({
title: 'Compile Error',
message: '<%= error.message %>'
}).apply(this, args);
this.emit('end'); // Keep gulp from hanging on this task
}
Everything works fine until Im starting to actually use ES6.
Example Source (index.js):
class Car{
}
Example Compiled (app.js):
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
class Car {}
},{}]},{},[1])
As you can see there is still ES6 code in the compiled file.
It seems like babelify is not doing its jop. I already tried several other gulp files from around the web, but I always got the same result.
Thank you!
Thanks to loganfsmyth I was able to solve the problem by adding the following to the props array:
transform: [[babelify, {presets: ["es2015"]}]]

How to concat multiple jQuery files into one using Gulp?

I'm wanting to only load one JS file which uses jQuery code, but am confused about how to best do it. The thing I'm worried about is doing something sloppy like the below to solve the issue of loading all the scripts under $(document).ready(function(){});
gulp.task('compile-js', function() {
gulp.src(['./js/initialization.js', './stuff.js'./js/end.js'])
.pipe(concat('script.js'))
.pipe(gulp.dest('./public/javascripts/'));
});
where initialization.js and end.js are for the wrapping of the document.ready function (I know lol, hence asking)
Is there a better way of doing it?
Write a gulp file, lets call it 'jquery-noconflict.js'
var through = require('through2');
var gutil = require('gulp-util');
var fs = require('fs');
module.exports = function(){
var stream = through.obj(function(file, enc, cb) {
if (file.isStream()) {
this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
return cb();
}
if (file.isBuffer()) {
var contents = file.contents.toString();
file.contents = Buffer.concat([new Buffer('jQuery(document).ready(function(){'), file.contents, new Buffer('})')]);
}
cb(null, file);
}, function(){
})
return stream;
};
You might need to 'npm install through2'
now in your gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var jquery = require('./jquery-noconflict');
gulp.task('compile-js', function(){
gulp.src('./stuff.js')
.pipe(concat('script.js'))
.pipe(jquery())
.pipe(gulp.dest('./public/javascripts/'))
})

Run gulp plugin on single file

I'm trying to write a minify function that can be used to minifiy html, css, and js depending on file type. I would like to use the existing gulp plugins for these 3 minification processes to do the actual minification. The problem I'm having is I don't know how to call a plugin on a single vinyl file. Here is what I have so far:
var cssmin = require('gulp-cssmin');
var htmlmin = require('gulp-minify-html');
var uglify = require('gulp-uglify');
var minifiers = {
js: uglify,
css: cssmin,
html: htmlmin
};
function minify(options) {
var options = options || {};
return tap(function(file){
var fileType = file.path.split('.').pop();
options = options[fileType] || options
var minifier = minifiers[fileType];
if(!minifier)
console.error("No minifier for " + fileType + " - " + file.path);
// WHAT DO I DO HERE? This doesn't work but I want to do something similar
file.pipe(minifier(options));
});
}
I would like to be able to call the minify function like this:
gulp.src(['test.html', 'test.css', 'test.js'])
.pipe(minify());
Use gulp-filter.
var gulpFilter = require('gulp-filter');
var jsFilter = gulpFilter('**/*.js');
var cssFilter = gulpFilter('**/*.css');
var htmlFilter = gulpFilter('**/*.html');
gulp.task('default', function () {
gulp.src('assets/**')
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(cssmin())
.pipe(cssFilter.restore())
.pipe(htmlFilter)
.pipe(htmlmin())
.pipe(htmlFilter.restore())
.pipe(gulp.dest('out/'));
});
Will work for single files too but globs are more futureproof :)
SOLUTION:
I ended up using gulp-filter to solve the issue, but it was fairly tricky to get it working in a reusable way. Here is my final code:
var cssmin = require('gulp-cssmin');
var htmlmin = require('gulp-htmlmin');
var uglify = require('gulp-uglify');
var lazypipe = require('lazypipe');
function getFilter(type) {
// create a filter for the specified file type
return filter('**/*.' + type);
}
var minify = function() {
var jsFilter = getFilter('js'),
cssFilter = getFilter('css'),
htmlFilter = getFilter('html');
var min = lazypipe()
.pipe(function(){return jsFilter;})
.pipe(uglify)
.pipe(jsFilter.restore)
.pipe(function(){return cssFilter;})
.pipe(cssmin)
.pipe(cssFilter.restore)
.pipe(function(){return htmlFilter;})
.pipe(htmlmin)
.pipe(htmlFilter.restore);
return min();
};
To run gulp plugin on a single file you need to do the following:
var stream = minifier(options);
stream.once('data', function(newFile) {
file.contents = newFile.contents;
})
stream.write(file);