Как использовать Gulp для объединения разных js с разным набором js, а затем pipe minify/uglify для разных пакетов?
То, что я хочу архивировать с Gulp это:
- Например я сейчас редактирую
editing.js
- Если он был изменен / сохранен, то принять
base1.js
,base2.js
,base3.js
конкать их с моимediting.js
в порядке какbase1.js
,base2.js
,base3.js
,editing.js
- Минимизировать и унигифицировать их
Наконец, переименуйте этот файл с расширением, например, "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.js
→ foo.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/'));
});
});