Gulp minify multiple js files to one

JavascriptGulp

Javascript Problem Overview


I am new to Gulp and wondering how can I minify (concatinate) my collection to single file instead of every file separately.

Example
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src([
		'content/plugins/jquery/jquery-2.1.1.js',
		'content/plugins/jquery/jquery-ui.js',
		'content/js/client.js'])
      .pipe(uglify())
      .pipe(gulp.dest('content/js/client.min.js')) // It will create folder client.min.js
});

gulp.task('default', ['minify']);

As you can see I'm trying to minify 3 javascript files and then output them into one client.min.js. Is it possible?

Javascript Solutions


Solution 1 - Javascript

This plugin will help gulp-concat.

Usage:

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))
});

Solution 2 - Javascript

Instead of going through a lots of tricky things, I recommend you getting laravel-elixir. It is compiling sass, less, babel, coffescript and even adding something that you want with not just JavaScript but also with css. All the code that you will need will be:

var gulp = require('gulp');
var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js', 'sweetalert.js'], 'public/js/all.js');
    mix.styles(['normalize.css', 'app.css', 'sweetalert.css'], 'public/css/all.css')
});

Solution 3 - Javascript

Lets try gulp-concat-util for joining scripts. It's similar to concat, but have some helpers to glue files. There is special helper to concatinate scripts.

var concat = require('gulp-concat-util');

gulp.task('scripts', function() {
  gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat.scripts('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStanView Question on Stackoverflow
Solution 1 - Javascriptuser3995789View Answer on Stackoverflow
Solution 2 - JavascriptAditya GiriView Answer on Stackoverflow
Solution 3 - JavascriptSynCapView Answer on Stackoverflow