Question

对于所有JS代码，我在将项目构建到生产之前将其缩小和uglify。

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);
});

我需要return 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/'
        ]
    },
};

Gulp - 将供应商发布到文件夹

1 个答案: