How can I uglify my bundle files for React with gulp? - javascript

I have a gulp file set up and I have properly minified all of my scripts and css files with the exception of my bundle.jsand my homeBundle.js. I have the uglify() function running in each one of my tasks, but receive the following error when I try to gulp.
events.js:141
throw er; // Unhandled 'error' event
^ Error: /Users/Documents/RTVS360/bundle.js: Streaming not supported
Is there an issue when gulp tries to uglify because it recreates the file every time gulp is ran?
Below you can see my gulpfile. Any help would be gladly appreciated.
var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
var glob = require('glob');
var streamify = require('gulp-streamify');
gulp.task('watchify', function () {
var bundler = browserify({
entries: ['./client/main.jsx'],
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
watcher.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dest/'));
})
.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dest/'));
});
gulp.task('browserify', function () {
var testFiles = glob.sync('./client/main.jsx');
var bundler = browserify({
entries: testFiles,
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function rebundle() {
bundler
.bundle()
.on('error', function(err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/'));
}
return rebundle();
});
gulp.task('home', function () {
var testFiles = glob.sync('./client/homepage.jsx');
var bundler = browserify({
entries: testFiles,
transform: [reactify],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function rebundle() {
bundler
.bundle()
.on('error', function(err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('homeBundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/'));
}
return rebundle();
});
// Uglify Scripts
gulp.task('scripts', function() {
gulp.src('assets/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
// Minify Styles
gulp.task('styles', function() {
gulp.src('./assets/css/**/*.css')
.pipe(uglifycss({
"max-line-len": 80
}))
.pipe(gulp.dest('./dist/css'));
});
gulp.task('default', ['browserify', 'home','scripts', 'styles']);

You need to use streamify together with gulp-uglify.
It seems you are importing the streamify plugin, but you are not using it.
You should wrap your uglify calls with a streamify function. Example:
var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');
gulp.task('watchify', function () {
var bundler = browserify({
entries: ['main.jsx'],
transform: [reactify],
// You probably would like to change these two flags to false for
// production since they increase the size of your output file
debug: true,
fullPaths: true,
cache: {},
packageCache: {}
});
var watcher = watchify(bundler);
return watcher
.on('update', function () {
watcher.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify()))
.pipe(gulp.dest('./dest/'));
})
.bundle()
.on('error', function (err) {
console.log('There was an error compiling the components.', err.message);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify())) // wrap uglify with the streamify plugin
.pipe(gulp.dest('./dest/'));
});
gulp.task('default', ['watchify']);
Gulp-uglify does not support streaming vinyl file objects by itself so you need to use the streamify plugin to make it support streams.

Related

ReferenceError in gulpfile

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', done => {
gulp.src('./css/**/*.sass')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('.'));
done()
});
gulp.task('sass:watch', done => {
gulp.watch('./css/**/*.sass', gulp.series('sass'));
done()
});
gulp.task('compressed-js', done => {
gulp.src('js/src/*.js')
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('js'));
done()
});
gulp.task('compressed-js:watch', done => {
gulp.watch('./js/src/*.js', gulp.series('compressed-js'));
done()
});
In the phpstorm getting this error: "ReferenceError: sourcemaps is not defined"
The error is pretty self-explanatory: you're referring to the sourcemaps variable while it doesn't exist.
Normally, you would need to declare it at the top of your gulpfile, like so:
var sourcemaps = require('gulp-sourcemaps');
However, Gulp 4 has sourcemap functionality built-in, so you can rewrite your sass task like this:
gulp.task('sass', () =>
gulp.src('./css/**/*.sass', { sourcemaps: true })
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(gulp.dest('.', { sourcemaps: '.' }))
);
Note that I removed the done callback, which isn't needed if you just return the stream.
Note that you will run into the same problem when running the compressed-js task. You'll need to define uglify and rename:
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
And make sure the packages you require are installed.

Uncaught ReferenceError: require is not defined with babel + browserify

I get this error:
Uncaught ReferenceError: require is not defined
I know that in the browser you can not use require API, just trying to make it possible with browserify or requirejs or whatelse but it doesn't work in any way.
This is my gulpfile
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/'));
});
gulp.task('styles', function(){
gulp.src(['src/styles/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('dist/styles/'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('scripts', function(){
return gulp.src('src/scripts/**/*.js')
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(concat('main.js'))
.pipe(babel())
.pipe(browserify())
.pipe(gulp.dest('dist/scripts/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch("src/styles/**/*.scss", ['styles']);
gulp.watch("src/scripts/**/*.js", ['scripts']);
gulp.watch("*.html", ['bs-reload']);
});
and this is my main.js, just an import of a plugin anime.js
import anime from 'animejs'
Also tried with requireJs but it seems a bit hard to integrate it in my gulpfile, also webpack seems to be hard code for me.

serving dist folder doesn't work

When i run a server in the root of the application and browse to /dist, my app works.
When i run the webserver in the Dist folder, I only see the index.html, but react won't render the page.
my gulp file is this:
var gulp = require('gulp');
var plug = require('gulp-load-plugins')({lazy: true});
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var del = require('del');
var sass = require('gulp-sass');
gulp.task('build', ['sass'], function () {
return browserify({
extensions: ['.jsx', '.js'],
entries: './src/app.jsx',
})
.transform(babelify.configure({ignore: /(node_modules)/}))
.bundle()
.on("error", function (err) {
console.log("Error : " + err.message);
})
.pipe(source('app.js'))
.pipe(buffer())
.pipe(plug.uglify())
.pipe(gulp.dest('./dist/'));
});
gulp.task('clean', function () {
return del('dist/**', {force: true});
});
gulp.task('copy-files', ['clean'], function () {
return gulp.src(['./src/index.html', './favicon.ico','./src/contact.html'])
.pipe(gulp.dest('./dist/'));
});
gulp.task('copy-images', ['copy-files'], function () {
return gulp.src(['./src/img/**/*'])
.pipe(gulp.dest('./dist/img'));
});
gulp.task('sass', ['copy-images'], function () {
return gulp.src('./src/css/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
Am I doing something wrong in my gulp file, or is there an other cause?

How to bundle a non-minified and minified js files with browserify

I get a minified bundle file, i want to get a non-minified bundle with it in the same dist.
gulpfile.js
'use strict';
var gulp = require('gulp'),
gulpLoad = require('gulp-load-plugins'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
del = require('del'),
pkg = require('./package.json'),
$ = gulpLoad(),
DIST = './dist',
SRC = './src/index.js';
gulp.task('clean', function(fn) {
return del(DIST, fn);
})
gulp.task('lint', function() {
return gulp.src(SRC)
.pipe($.jshint())
.pipe($.jshint.reporter('default'))
});
gulp.task('bundle', ['lint', 'clean'], function() {
var b = browserify();
return b.bundle()
.pipe(source('./ar-string.min.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.uglify())
.on('error', $.util.log)
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(DIST));
});
gulp.task('default', function() {
gulp.watch([SRC, './gulpfile.js'], ['bundle']);
});
EDIT: Actually, I don't think this can be done in one pipe, we could have two, one which doesn't minify, and one which minifies and source maps:
b.bundle()
.pipe(source('./ar-string.js'))
.pipe(gulp.dest(DIST));
return b.bundle()
.pipe(source('./ar-string.min.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.uglify())
.on('error', $.util.log)
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(DIST));

TypeError while running gulp. But can not find any TypeError is there any version issue of Node and npm?

My Gulp file was running Good but when I update the Node 6 to 8 it was throwing an error. To solve that error I revert back to Node 6. But after that, It showing "TypeError dest.on is not a function" but I can't find any TypeError. Can anyone advise me what I've done wrong?
Node version: 6.11.4
npm version: 3.10.10
My gulpfile.js is given below
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('autoprefixer');
var gulpAutoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var wait = require('gulp-wait');
var imagemin = require('gulp-imagemin');
var imagePngquant = require('imagemin-pngquant');
var imageRecompress = require('imagemin-jpeg-recompress');
var B_SCSS_PATH = 'node_modules/bootstrap/scss';
var B_JS_PATH = 'node_modules/bootstrap/dist/js';
var STYLE_PATH = 'public/css';
var JS_PATH = 'public/js';
var IMG_PATH = 'public/images';
var FONT_PATH = 'public/fonts';
gulp.task('styles', function(){
console.log('Starting style task');
return gulp.src('resources/scss/style.scss')
.pipe(wait(500))
.pipe(plumber(function(err){
console.log('Styles Task Error');
console.log(err);
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(sourcemaps.write('.'))
.pipe(postcss([autoprefixer()])
//.pipe(minifycss())
.pipe(gulp.dest(STYLE_PATH))
.pipe(livereload());
});
gulp.task('scripts', function(){
console.log('Starting Script task');
return gulp.src('resources/js/**/*.js')
.pipe(plumber(function(err){
console.log('Styles Task Error');
console.log(err);
this.emit('end');
}))
.pipe(concat('main.js'))
//.pipe(uglify())
.pipe(gulp.dest(JS_PATH))
.pipe(livereload());
});
gulp.task('BootstrapStyle', function(){
console.log('Starting Bootstrap Style task');
return gulp.src(B_SCSS_PATH + '/bootstrap.scss')
.pipe(plumber(function(err){
console.log('Bootstrap Styles Task Error');
console.log(err);
this.emit('end');
}))
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(postcss([autoprefixer()])
.pipe(gulp.dest(STYLE_PATH))
.pipe(livereload());
});
gulp.task('BootstrapScripts', function(){
console.log('Starting Booststrap Script task');
return gulp.src(B_JS_PATH + '/bootstrap.js')
.pipe(plumber(function(err){
console.log('Styles Task Error');
console.log(err);
this.emit('end');
}))
.pipe(concat('bootstrap.js'))
//.pipe(uglify())
.pipe(gulp.dest(JS_PATH))
.pipe(livereload());
});
gulp.task('images',function(){
console.log('Starting Image compression task');
return gulp.src('resources/images/**/*.{png,jpg,jpeg,svg,gif}')
.pipe(imagemin(
[
imagemin.gifsicle(),
imagemin.jpegtran(),
imagemin.optipng(),
imagemin.svgo(),
imagePngquant(),
imageRecompress()
]
))
.pipe(gulp.dest(IMG_PATH))
});
gulp.task('default',
['styles','scripts','BootstrapStyle','BootstrapScripts','images'],
function(){
console.log('Default task running');
});
gulp.task('watch', ['default'], function(){
console.log('Watch task running');
require('./server.js');
livereload.listen();
gulp.watch('resources/scss/**/*.scss', ['styles']).on('change',
livereload.changed);
gulp.watch('resources/js/**/*.js', ['scripts']).on('change',
livereload.changed);
gulp.watch(B_SCSS_PATH + '/**/*.scss', ['BootstrapStyle']).on('change',
livereload.changed);
gulp.watch(B_JS_PATH + '/**/*.js', ['BootstrapScripts']).on('change',
livereload.changed);
gulp.watch(IMG_PATH, ['images']).on('change', livereload.changed);
gulp.watch('public/*.html').on('change', livereload.changed);
});
Gulp Error
I do not know why anyone did not answer my question. But I solved my own problem. Hope it will help someone else. I've uninstalled and installed the node and reordered Gulp Style task as follows.
gulp.task('styles', function(){
console.log('Starting style task');
return gulp.src('resources/scss/style.scss')
.pipe(wait(500))
.pipe(plumber(function(err){
console.log('Styles Task Error');
console.log(err);
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe( postcss([ autoprefixer()]) )
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(STYLE_PATH))
.pipe(livereload());
});

Categories

Resources