Как использовать Gulp для объединения разных js с разным набором js, а затем pipe minify/uglify для разных пакетов?

То, что я хочу архивировать с Gulp это:

  1. Например я сейчас редактирую editing.js
  2. Если он был изменен / сохранен, то принять base1.js,base2.js,base3.js конкать их с моим editing.js в порядке как base1.js,base2.js,base3.js,editing.js
  3. Минимизировать и унигифицировать их
  4. Наконец, переименуйте этот файл с расширением, например, "edit.min.js".

    gulp.task('minify-js', function(){
        gulp.src('static/src/*.js')
            .pipe(concat('static/src/base.js'))
            .pipe(uglify())
            .pipe(gulp.dest('static/dist'));
    });
    

И в моем случае у меня есть несколько исходных файлов для объединения в несколько связанных файлов.

Что мне не удается заархивировать, так это переименовать имя файла, которое я сейчас редактирую, например ex1.js в ex1.min.js, он всегда упакован в один единственный файл.

Новичок в Gulp, надеюсь, поможет, спасибо!

1 ответ

Если я правильно понимаю, что-то вроде этого должно сделать это:

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

gulp.task('minify-js', function() {
  return gulp.src([ 'static/src/*.js', 'editing.js' ])
             .pipe(concat('editing.min.js'))
             .pipe(uglify())
             .pipe(gulp.dest('static/dist/'));
});

Как видите, переименовывать не нужно, потому что gulp-concat уже требует от вас указать имя выходного файла.

РЕДАКТИРОВАТЬ: вот еще один дубль. Он следит за изменениями любого .js файлы (с некоторыми исключениями; вместо использования **/*.js Вы можете указать конкретный каталог, в котором находятся ваши исходные файлы, чтобы ограничить количество возможных совпадений). Когда файл изменяется, он объединяет base*.js файлы и файл, который был изменен, и использовать имя файла измененного файла в качестве основы для минимизированного имени файла (foo.jsfoo.min.js):

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

gulp.task('minify-js', function() {
  // Watch for changes on JS files, but exclude some of them.
  return gulp.watch([ 
    '**/*.js', 
    '!static/src/base*.js',
    '!node_modules/',
  ], function(ev) {
    // Watch for changes to the files.
    if (ev.type !== 'changed') return;

    // Determine 'minified' filename.
    var basename = path.basename(ev.path);
    var extname  = path.extname(basename);
    var minname  = basename.replace(extname, '.min' + extname);

    // Run the uglify chain.
    return gulp.src([ 'static/src/base*.js', ev.path ])
        .pipe(concat(minname))
        .pipe(uglify())
        .pipe(gulp.dest('static/dist/'));
  });
});
Другие вопросы по тегам