Gulp는 여러 js 파일을 하나로 축소

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 개의 자바 스크립트 파일을 축소 한 다음 하나의 client.min.js. 가능합니까?

---

이 플러그인은 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/'))
});

---

많은 까다로운 일을 거치지 않고 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')
});

---

스크립트 를 결합하기 위해 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/'))
});

참고 URL : https://stackoverflow.com/questions/26719884/gulp-minify-multiple-js-files-to-one