Создание файла .js, .min.js и .js.map с помощью gulp? - PullRequest
Новая
       69

Создание файла .js, .min.js и .js.map с помощью gulp?

3 голосов
/ 31 октября 2019

Я пытаюсь использовать gulp 3.9 для минимизации моих файлов ресурсов.

Я создал две разные задачи в моем gulpfile, который выглядит так: 

var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
filter = require('gulp-filter'),
sourcemaps = require('gulp-sourcemaps'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify-es').default,
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json");

gulp.task("min:js", function () {
    var tasks = getBundles(regex.js).map(function (bundle) {

        return gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
            .pipe(filter('**/*.js'))
            .pipe(concat(bundle.outputFileName))
            .pipe(sourcemaps.write('../maps')) // shouldn't this create file.js.map file?
            .pipe(gulp.dest("."))
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(sourcemaps.write('../maps')) // shouldn't this create file.min.js.map file?
            .pipe(gulp.dest("."));
    });

    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
            .pipe(filter('**/*.css'))
            .pipe(concat(bundle.outputFileName))
            .pipe(sourcemaps.write('../maps'))
            .pipe(gulp.dest("."))
            .pipe(cssmin())
            .pipe(rename({ suffix: '.min' }))
            .pipe(sourcemaps.write('../maps'))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

Однако приведенный выше код кажетсячтобы генерировать только .min и обычный (не минимизированный) файл, но не исходный файл карты.

Как я могу использовать Gulp для генерации файлов 3 js, css и sourcemap каждый раз, когда "min:задачи js "и" min: css "выполнены?

1 Ответ

0 голосов
/ 01 ноября 2019

В соответствии с документацией вы должны инициализировать карту источника: 

.pipe(sourcemaps.init())

В случае js с уменьшенным поколением: 

gulp.src(bundle.inputFiles, { base: ".", sourcemaps: true })
            .pipe(filter('**/*.js'))
            .pipe(sourcemaps.init())
            .pipe(concat(bundle.outputFileName))
            .pipe(sourcemaps.write('../maps'))  
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest(".")) ;

И соответственно изменить минификацию CSS. Нажмите ее для получения дополнительной информации об исходной карте

...