web-dev-qa-db-fra.com

Gulp minify plusieurs fichiers js à un

Je suis nouveau à Gulp et je me demande comment puis-je minifier (concatiner) ma collection dans un fichier unique au lieu de chaque fichier séparément.

Exemple

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']);

Comme vous pouvez le constater, j'essaie de réduire au minimum 3 fichiers javascript, puis de les exporter dans un client.min.js. C'est possible?

javascriptgulp
62
sed

Ce plugin aidera 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/'))
});
95
user3995789

Au lieu de passer par beaucoup de choses difficiles, je vous recommande de vous procurer laravel-elixir. C'est compiler sass, less, babel, coffescript et même ajouter quelque chose que vous voulez non seulement avec JavaScript, mais aussi avec css. Tout le code dont vous aurez besoin sera:

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')
});
11
Aditya Giri

Essayons gulp-concat-util pour rejoindre des scripts . C'est semblable à concat, mais il y a des aides pour coller des fichiers. Il y a l'aide spéciale pour concatiner des manuscrits.

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/'))
});
2
SynCap