1

複数のプラグインを含む git リポジトリがあります (1 つのメイン プラグインと、メイン プラグインでのみ動作することを意図した複数のプラグイン)。bower は git リポジトリごとに複数のプラグインを持つ方法を提供していないため、私は配布にこのアプローチを使用しています。

したがって、各プラグインを縮小し、各プラグインのソースマップを作成し、各プラグインを git サブモジュールに対応する個別の配布フォルダーにドロップする必要があります。慣例により、簡単にするためにプラグインと同じ名前を付けています。これをすべて 1 つのステップで実行する次の Gulp スクリプトを思いつきました。これは主に、ここで見つけた回答に基づいています。

return gulp.src(['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'], { base: './' })
    .pipe(jshint())
    .pipe(jshint.reporter(stylish))
    .pipe(rename(function (path) {
        var baseName = path.basename;
        var dirName = path.dirname;
        if (dirName == 'helpers' || dirName == 'dialogs') {
            path.basename = 'jquery.dirtyforms.' + dirName + '.' + baseName;
            console.log(path.basename);
        }
        path.dirname = path.basename;
    }))
    .pipe(gulp.dest(distributionFolder))
    .pipe(sourcemaps.init())
    .pipe(rename(function (path) {
        var baseName = path.basename;
        var dirName = path.dirname;
        if (dirName == 'helpers' || dirName == 'dialogs') {
            path.basename = 'jquery.dirtyforms.' + dirName + '.' + baseName;
            console.log(path.basename);
        }
        path.dirname = path.basename;
        path.extname = '.min.js';
    }))
    .pipe(uglify({
        outSourceMap: true,
        sourceRoot: '/'
    }))
    .pipe(gulp.dest(distributionFolder))
    .pipe(sourcemaps.write('.', {
        includeContent: true,
        sourceRoot: '/'
    }))
    .pipe(gulp.dest(distributionFolder));

1つのことを除いて、私が望むことを正確に実行します。プラグインごとに生成されるソースマップ ファイルには、パスにサブディレクトリが含まれます。プラグインの最終的な宛先にはこのパスが含まれないため、これは無効です。

jquery.dirtyforms.min.js.mapファイル内:

{"version":3,"sources":["jquery.dirtyforms/jquery.dirtyforms.min.js"]...

する必要があります

{"version":3,"sources":["jquery.dirtyforms.min.js"]...

そしてjquery.dirtyforms.min.jsファイルで：

//# sourceMappingURL=../jquery.dirtyforms/jquery.dirtyforms.min.js.map

する必要があります

//# sourceMappingURL=jquery.dirtyforms.min.js.map

gulp-sourcemaps のソースを調べて、ファイル名をオーバーライドするオプションを見つけようとしましたが、ないようです。

これに対して私が思いついた2つの可能な解決策は次のとおりです。

  1. 正規表現を使用して各ファイルを置換します
  2. でファイルを生成し、生成distributionFolder後に正しいサブフォルダーに移動します。

しかし、これらは両方ともハックのようです。そもそもストリームがそれらを正しく作成した方がよいでしょう。そうする方法はありますか？

4

1 に答える 1

0

私が言及した 2 番目のオプションを使用することになりました。つまり、distributionFolder(現在settings.dest) で縮小されたファイルを生成し、個別のコピー タスクと削除タスクでそれらを移動しました。

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    del = require('del');

var settings = {
    baseProject: 'jquery.dirtyforms',
    src: ['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'],
    dest: './dist/'
};

// Moves the .js files to the distribution folders and creates a minified version and sourcemap
gulp.task('build', ['copy-minified'], function (cb) {
    del([settings.dest + '*.js', settings.dest + '*.map'], cb);
});

gulp.task('copy-minified', ['uglify'], function () {
    return gulp.src([settings.dest + '*.js', settings.dest + '*.map'], { base: './' })
        .pipe(rename(function (path) {
            console.log('moving: ' + path.basename)
            path.dirname = path.basename.replace(/\.min(?:\.js)?/g, '');
        }))
        .pipe(gulp.dest(settings.dest));
});

gulp.task('uglify', ['clean', 'test'], function () {
    return gulp.src(settings.src, { base: './' })
        .pipe(rename(function (path) {
            var baseName = path.basename;
            var dirName = path.dirname;
            if (dirName == 'helpers' || dirName == 'dialogs') {
                path.basename = settings.baseProject + '.' + dirName + '.' + baseName;
            }
            path.dirname = path.basename;
        }))
        .pipe(gulp.dest(settings.dest))
        .pipe(sourcemaps.init())
        .pipe(rename(function (path) {
            path.dirname = '';
            path.extname = '.min.js';
        }))
        .pipe(uglify({
            outSourceMap: true,
            sourceRoot: '/'
        }))
        .pipe(gulp.dest(settings.dest))
        .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/'
        }))
        .pipe(gulp.dest(settings.dest));
});

// Tests the source files (smoke test)
gulp.task('test', function () {
    return gulp.src(settings.src, { base: './' })
        .pipe(jshint())
        .pipe(jshint.reporter(stylish));
});

そのようなハックではないより良い代替手段があるかもしれませんが、これは私にとってはうまくいきました。

于 2015-06-15T20:53:27.167 に答える