javascript - Gulp - 将 vendor 发布到文件夹

Question

对于我拥有的所有 JS 代码，在将项目构建到生产环境之前，我会对其进行缩小和丑化。

var config =
{
    dest: 'www',
    vendor:
    [
        './node_modules/jquery/dist/jquery.js',

        './node_modules/angular/angular.js',
        './node_modules/motion-ui/dist/motion-ui.js',
        './node_modules/angular-animate/angular-animate.js',
        './node_modules/angular-sanitize/angular-sanitize.js',
        './node_modules/angular-ui-router/release/angular-ui-router.js',
        './node_modules/angular-translate/dist/angular-translate.js',
        './node_modules/angular-translate-loader-static-files/angular-translate-loader-static-files.js',

        './src/vendors/tinymce/tinymce.js',
        './src/vendors/tinymce/ui-tinymce.js',

        './src/vendors/googleMaps/js/ui-googleMaps.js',
        './src/vendors/googleMaps/js/ui-mapUpload.js',
        './src/vendors/LocationPicker/locationpicker-jquery.js',

        './src/vendors/rzslider/rzslider.js',
        './src/vendors/cropit/jquery.cropit.js',
    ]
};

gulp.task('js', function ()
{
    streamqueue({ objectMode: true },
        gulp.src(config.vendor.js),          
      gulp.src('./src/appConfig.js').pipe(ngFilesort()),
      gulp.src('./src/features/**/*.js').pipe(ngFilesort()),
      gulp.src('./src/modules/**/*.js').pipe(ngFilesort()),
      gulp.src('./src/assets/js/**/*.js').pipe(ngFilesort())
    )
    .pipe(sourcemaps.init())
    .pipe(concat('app.js'))
    .pipe(ngAnnotate())

    .pipe(uglify())

    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.join(config.dest, 'js')));    
});

但我注意到一些插件正在读取其 CSS 和字体文件的特定路径，例如 TinyMCE(tinymce.js 代码):

n = n ? e.documentBaseURI.toAbsolute(n) : tinymce.baseURL + "/skins/" + i, t.skinUiCss = tinymce.Env.documentMode <= 7 ? n + "/skin.ie7.min.css" : n + "/skin.min.css", e.contentCSS.push(n + "/content" + (e.inline ? ".inline" : "") + ".min.css")

为了处理这些情况，我正在运行 gulp 任务将文件/文件夹复制到我定义的特定路径:

var config =
{
    //...

    vendorNotMinified:
    {
        src: [
            './src/vendors/tinymce/skins'
        ],
        dest: [
            '/plugins/tinymce/'
        ]
    }
};

gulp.task('vendors', function ()
{
    for (var i = 0; i < config.vendorNotMinified.length; i++)    
        gulp.src(config.vendorNotMinified.src[i])
            .pipe(gulp.dest(config.dest + config.vendorNotMinified.dest[i]));
});

但我的 vendors 任务并未创建 plugins 文件夹。

问题出在哪里以及如何以动态方式解决这个问题？

注意:我已经将 TinyMCE 行更改为:

n = "./plugins/tinymce/skins/" + i, t.skinUiCss = tinymce.Env.documentMode <= 7 ? n + "/skin.ie7.min.css" : n + "/skin.min.css", e.contentCSS.push(n + "/content" + (e.inline ? ".inline" : "") + ".min.css")

Answer 1

解决了!问题出在循环 for 上，它是运行循环的条件。所以我将任务代码更改为以下内容，现在可以使用:

gulp.task('vendors', function (done)
{    
    for (var i = 0; i < config.vendorNotMinified.src.length; i++)    
        gulp.src(config.vendorNotMinified.src[i])
            .pipe(gulp.dest(config.dest + config.vendorNotMinified.dest[i]));

    return gulp.src(config.vendorNotMinified.src);
});

我需要返回gulp.src()因为就像Sindre Sorhus在this post中所说的那样这是使任务异步所必需的。

为了正确复制所有文件和文件夹，我需要向我的 config.vendorNotMinified 添加另一个路径:

var config =
{
    //...
    vendorNotMinified:
    {
        src: [
            './src/vendors/tinymce/skins',
            './src/vendors/tinymce/skins/**'
        ],
        dest: [
            '/plugins/tinymce/',
            '/plugins/tinymce/skins/'
        ]
    },
};