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

我是Gulp的新手，想知道如何将我的集合简化（concatinate）为单个文件，而不是单独的每个文件。

例

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 。 可能吗？

Answer 1

这个插件将帮助吞咽连接 。

用法：

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

Answer 2

我不推荐很多棘手的东西，而是推荐你使用laravel-elixir 。 它正在编译sass，less，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') }); 

Answer 3

让我们试试gulp-concat-util来join脚本 。 它与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/')) });