Develop Reference

Gulp-minify how to remove duplicate files

Im trying to minify JS files with Gulp, but what is happening is that it copies all the original files im trying to minify to the destination folder /minify whereas I want there to be only the minified files with the extension -min.js.
var gulp = require('gulp');
var minify = require('gulp-minify');
var stripDebug = require('gulp-strip-debug')
var strip = require('gulp-strip-comments')
gulp.task('min-js', function() {
return gulp.src('./**/*.js', '!./node_modules', '!./*-min.js')
.pipe(minify({
ignoreFiles: ['gulpfile.js', './node_modules']
}))
.pipe(stripDebug())
.pipe(gulp.dest('./minify'))
});
gulp.task('watch', function(){
gulp.watch('lib/scripts/*.js', ['min-js']);
});
gulp.task('default', gulp.series('min-js', 'watch'));

How do you configure browserify to work with gulp?

I can't use gulp-browserify. My input file is _/components/js/script.js (this has require('jquery'). I want it to output to _/js/script.js. What's wrong with my configuration? I get a path error.
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
browserify= require('browserify');
gulp.task('watch', function(){
gulp.watch('_/components/sass/*.scss', ['sass']);
});
gulp.task('browserify', function(){
var b = browserify({entries: './_/components/js/script.js', debug: true});
return b.bundle()
.pipe(gulp.dest('./js/'));
});
gulp.task('default', ['sass', 'browserify', 'watch']);

You can't pipe browserify bundle stream like that to a gulp.dest stream. It's expecting a vinyl stream. You could use vinyl-source-stream to transform it. This is very common:
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream');
var files = ['./js/admin.js', './js/login.js', './js/main.js']
gulp.task('browserify', function(){
var b = browserify(files);
b.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('public'))
});

Gulp - concat result of watchify with few JS files

I have a JS application which is used watchify.
So, I want to concat result of watchify command w/ some other javascripts files, which are tends to be global (jQuery and so on). Here is my Javascript watchify command.
var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var reactify = require('reactify');
var watchify = require('watchify');
var notify = require("gulp-notify");
var scriptsDir = './scripts';
var buildDir = './build';
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
}
function buildScript(file, watch) {
var props = {entries: [scriptsDir + '/' + file]};
var bundler = watch ? watchify(props) : browserify(props);
bundler.transform(reactify);
function rebundle() {
var stream = bundler.bundle({debug: true});
return stream.on('error', handleErrors)
.pipe(source(file))
.pipe(gulp.dest(buildDir + '/'));
}
bundler.on('update', function() {
rebundle();
gutil.log('Rebundle...');
});
return rebundle();
}
gulp.task('build', function() {
return buildScript('main.js', false);
});
gulp.task('default', ['build'], function() {
return buildScript('main.js', true);
});
Here is the task I use for appending javascript files.
return gulp.src([
'./bower_components/jquery/dist/jquery.min.js',
'./bower_components/redactor-wysiwyg/redactor/redactor.js',
'./build/main.js' // output of `gulp build`.
]).pipe(concat('application.js'))
.pipe(gulp.dest('./public/'));
How can I concat these javascript files using one function buildScript?

The main key is that nodejs stream has a end event. So,
function rebundle() {
var stream = bundler.bundle({debug: true});
stream.on('end', function() { gulp.start('everything_you_want') });
return stream.on('error', handleErrors)
.pipe(source(file))
.pipe(gulp.dest(buildDir + '/'));
}

Use node.js stream to create a file and pipe to gulp

I am using node.js. I have a Buffer and I need to write it to a file named 'bla.js' and then pipe gulp's uglify. Something like:
var uglify = require('gulp-uglify');
var buffer = ....
var wstream = fs.createWriteStream('bla.js');
wstream.write(buffer);
wstream.pipe(uglify());
What is the correct way to do it?

From what I can tell you should be able to call pipe() on the readable stream more than once and have the contents sent to two different writable streams.
Eg (dry-coded):
var fs = require('fs')
, uglify = require('gulp-uglify');
var rstream = fs.createReadStream('test.log');
rstream.pipe(fs.createWriteStream('bla.js'));
rstream.pipe(uglify());

Looks like the plugin vinyl-source-stream provides a solution for what you want to do:
var source = require('vinyl-source-stream')
var streamify = require('gulp-streamify')
var browserify = require('browserify')
var fs = require('vinyl-fs');
var uglify = require('gulp-uglify');
var bundleStream = browserify('index.js').bundle()
bundleStream
.pipe(source('index.js'))
.pipe(streamify(uglify()))
.pipe(fs.dest('./bla.js'))

Create Gulp tasks to minify/concat files to package sources from multiples directories into files in their respective directory

I'm writing an Angular project with the following the structure:
js/
components/
component1/
component1.directive.js
component1.controller.js
component1.factory.js
component1.rest.service.js
component2/
component2.factory.js
component2.rest.service.js
vendor/
angular/
jquery/
home.js
page2.js
where the components are shared resources and files which reside directly under js/ are packages of required components and vendor libs.
What I want to do with gulp is create a task which will stream the files from each component directory, watch for changes to trigger ngmin() and uglify(), then concat() those files into a '{componentDirectoryName}.package.min.js' file while lives in the component's directory. The result would look something like this:
js/
components/
component1/
component1.directive.js
component1.controller.js
component1.factory.js
component1.rest.service.js
component1.package.min.js
component2/
component2.factory.js
component2.rest.service.js
component2.package.min.js
Current implementation:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({ camelize: true});
var glob = require('glob');
var StreamQueue = require('streamqueue');
var publicDir = './src/main/webapp/public/';
var jsDir = publicDir + 'js/';
var components = jsDir + 'components/';
gulp.task('js', function() {
var componentsDirectories = glob.sync(components + '/*/');
var queue = new StreamQueue();
componentsDirectories.forEach(function(directory) {
var componentName = directory.match(/.+\/(.+)\/$/)[1];
queue.queue(
gulp.src([directory + '*.js', '!' + directory + '*-package.min.js'])
.pipe($.ngmin())
.pipe($.jsmin())
.pipe($.concat(componentName + "-package.min.js"))
.pipe(gulp.dest(directory))
);
});
return queue.done().pipe($.livereload());
});
gulp.task('watch', function() {
gulp.watch([components + '**/*.js', '!' + components + '**/*.min.js'], ['js']);
});
gulp.task('default', ['js', 'watch']);

You can use node-glob to get your components' names.
To register multiple sources as a single task you can compose streams with streamqueue.
Here's my solution:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');
var livereload = require('gulp-livereload');
var glob = require('glob');
var StreamQueue = require('streamqueue');
gulp.task('js', function() {
var componentsFolders = glob.sync('components/*/');
var queue = new StreamQueue();
componentsFolders.forEach(function(folder){
var componentName = folder.match(/.+\/(.+)\/$/)[1];
queue.queue(
gulp.src([folder + '*.js', '!' + folder + '*.package.min.js'])
.pipe(ngmin())
.pipe(uglify())
.pipe(concat(componentName + ".package.min.js"))
.pipe(gulp.dest(folder))
);
});
return queue.pipe(livereload());
});
gulp.task('default', ['js']);