Gulp

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 任务将 files/folders 复制到我定义的特定路径：

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 - 将供应商发布到文件夹

Gulp - publish vendors to folder

javascript

tinymce

node.js