Gulp将多个js文件缩小到一个

我是Gulp的新手，我想知道如何缩小（合并）单个文件而不是每个文件的集合。

例

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

如您所见，我正在尝试缩小3个javascript文件，然后将它们输出为一个client.min.js。可能吗？

javascript gulp

— 斯坦
source

Answers:

104

这个插件将帮助gulp-concat。

用法：

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

— 用户名
source

所以uglify默认会缩小js吗？

— George Pligoropoulos，2015年

这对于串联和缩小CSS和HTML文件也有用吗？

— CSS

@ IamC.SS是的，相同的方法应该起作用，但是要避免丑陋，您需要例如。gulp-minify-css。

— tuomassalo 2015年

最好先进行丑化处理（所有文件将一个接一个地进行缩小），然后进行合并。这样可以避免在生成的脚本中出现一些问题。变体2-与某些胶水结合在一起变体3-使用Google闭包编译器完成这两项任务。

— SynCap

如果我有一个require从file1.js到file3.js的文件，它将不起作用，对吗？（在file1.js中require("./file3")）

— peni4142

建议您不要经历很多棘手的事情，而要开始学习laravel-elixir。它正在编译sass，更少，babel，coffescript，甚至通过JavaScript和CSS添加您想要的东西。您将需要的所有代码将是：

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

— 阿迪亚·吉里（Aditya Giri）
source

过度杀伤，特别是对刚入门的人。

— mkvlrn '16

为什么要大刀阔斧？这是您本地PC上的一次性工作。您不必担心客户端性能。

— Cas Bloem

Elexir仅生活在Laravel的媒体中！它需要用于大多数任务的确切基础结构。

— SynCap

以及最小化的性能如何。与

— gulp

让我们尝试使用gulp-concat-util加入脚本。它类似于concat，但是有一些帮助粘贴文件的助手。有专门的助手来简化脚本。

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

— SynCap
source