Question

因此，我最近不得不用一堆运行了多年的代码将Gulp更新到版本4。该代码仅将一堆文件加在一起以构建angularJS应用。我做了很多更改以重新排列代码，并在需要的地方添加series命令。现在，代码可以正常运行，但是不会编写放置编译后代码的脚本。

我不确定这是因为无法识别任何路径，还是因为gulp-file-insert或gulp-concat不再适用于版本4，或者是什么。我正在使用这些软件包的最新版本。

我尝试弄乱某些路径，例如src，dist等，如下所示，但出现错误，似乎表明找不到文件，因此我不确定某个地方或其他地方存在路径问题不是。

这里是一些代码。

gulp.task('build', gulp.series('html', 'fonts', 'other'));


gulp.task('html', gulp.series('inject', 'partials'), function ()
{
    var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), {read: false});
    var partialsInjectOptions = {
        starttag    : '<!-- inject:partials -->',
        ignorePath  : path.join(conf.paths.tmp, '/partials'),
        addRootSlash: false
    };

    var cssFilter = $.filter('**/*.css', {restore: true});
    var jsFilter = $.filter('**/*.js', {restore: true});
    var htmlFilter = $.filter('*.html', {restore: true});


    return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
        .pipe(cssFilter)
        .pipe($.sourcemaps.init())
        .pipe($.cssnano())
        // .pipe($.rev())
        .pipe($.sourcemaps.write('maps'))
        .pipe(cssFilter.restore)
        .pipe($.inject(partialsInjectFile, partialsInjectOptions))
        .pipe($.useref())
        .pipe(jsFilter)
        .pipe($.sourcemaps.init())
        .pipe($.ngAnnotate())
        .pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
        // .pipe($.rev())
        .pipe($.sourcemaps.write('maps'))
        .pipe(jsFilter.restore)
        .pipe($.revReplace())
        .pipe(htmlFilter)
        .pipe($.htmlmin({
            collapseWhitespace: true,
            maxLineLength     : 120,
            removeComments    : true
        }))
        .pipe(htmlFilter.restore)
        .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
        .pipe($.size({
            title    : path.join(conf.paths.dist, '/'),
            showFiles: true
    }));
});




gulp.task('inject', gulp.series('concatFiles', 'scripts', 'styles'), function ()
{
    var injectStyles = gulp.src([
        path.join(conf.paths.tmp, '/serve/app/**/*.css'),
        path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
    ], {read: false});

    var injectScripts = gulp.src([
            path.join(conf.paths.src, '/app/**/*.module.js'),
            path.join(conf.paths.src, '/app/**/*.js'),
            path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
            path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
        ])
        .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

    var injectOptions = {
        ignorePath  : [conf.paths.src, path.join(conf.paths.tmp, '/serve'),
                      'bower_components/three.js/**/*.js',
                      'src/app/assets/code/eqSolver/*.js',
                      'src/app/assets/code/eqSolver/math/*.js',
                      'src/app/assets/code/threejs/*.js'],
                      addRootSlash: false
    };

    return gulp.src(path.join(conf.paths.src, '/*.html'))
        .pipe($.inject(injectStyles, injectOptions))
        .pipe($.inject(injectScripts, injectOptions))
        .pipe(wiredep(_.extend({}, conf.wiredep)))
        .pipe(debug())
        .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});


gulp.task('concatFiles', function(){

    gulp.src([
        'bower_components/three.js/build/three.js',    
        'bower_components/three.js/examples/js/renderers/CanvasRenderer.js',    
        'bower_components/three.js/examples/js/renderers/Projector.js',    
        path.join(conf.paths.src, '/assets/code/threejs/*.js')])
        .pipe(concat('threejs.js'))
        .pipe(gulp.dest('./src/app/main/apps/document/worksheet'));


    gulp.src('./src/assets/code/eqSolver/equationSolver.js')
      .pipe(gfi({
        "/* Big Math */": './node_modules/big.js/big.min.js',
        "/* sin Function */": './src/assets/code/eqSolver/math/sin.js',
        "/* cos Function */": './src/assets/code/eqSolver/math/cos.js',
    ...

    gulp.src('./src/assets/code/digest/documentDialogController.js')
      .pipe(gfi({
        "/* Digest Functions */": './src/assets/code/digest/eqDigest.js'
    }))
      .pipe(gulp.dest('./src/app/main/apps/document/'));


    gulp.src('./src/assets/code/digest/workspace.controller.js')
      .pipe(gfi({
        "/* Digest Functions */": './src/assets/code/digest/eqDigest.js'
    }))
      .pipe(gulp.dest('./src/app/main/apps/workspace/'));


    gulp.src('./src/assets/code/digest/partTree.controller.js')
      .pipe(gfi({
        "/* Digest Functions */": './src/assets/code/digest/eqDigest.js'
    }))
      .pipe(gulp.dest('./src/app/main/apps/partTree/'));


    return Promise.resolve('the value is ignored');
});



gulp.task('scripts', function ()
{
    return buildScripts();
});

function buildScripts()
{
    return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
        .pipe($.size())
};

这些是主要路径。我认为这是一个问题。在这些之前添加“ /”会引起进一步的错误，因为显然不好的更改并没有。

/**
 *  The main paths of your project handle these with care
 */
exports.paths = {
    src : 'src',
    dist: 'dist',
    tmp : '.tmp',
    e2e : 'e2e'
};

这是运行gulp build命令的结果。此过程大约需要30秒到1分钟。现在，它可以在5秒钟内运行，并且许多告诉我已处理多少文件的消息现在都不会出现。

[09:07:57] Using gulpfile ~/Sites/CADWOLF/cadwolf-laravel/angular_frontend/gulpfile.js
[09:07:57] Starting 'build'...
[09:07:57] Starting 'html'...
[09:07:57] Starting 'inject'...
[09:07:57] Starting 'concatFiles'...
[09:07:57] Finished 'concatFiles' after 26 ms
[09:07:57] Starting 'scripts'...
[09:07:58] all files 3.55 MB
[09:07:58] Finished 'scripts' after 385 ms
[09:07:58] Starting 'styles'...
[09:07:58] gulp-inject 68 files into index.scss.
[09:08:01] Finished 'styles' after 3.6 s
[09:08:01] Finished 'inject' after 4.01 s
[09:08:01] Starting 'partials'...
[09:08:02] Finished 'partials' after 884 ms
[09:08:02] Finished 'html' after 4.89 s
[09:08:02] Starting 'fonts'...
[09:08:02] Finished 'fonts' after 99 ms
[09:08:02] Starting 'other'...
[09:08:02] Finished 'other' after 270 ms
[09:08:02] Finished 'build' after 5.27 s

Answer 1

首先要解决的问题：

gulp.task('html', gulp.series('inject', 'partials'), function ()   // gulp3 syntax, 3 arguments

更改为：

gulp.task('html', gulp.series('inject', 'partials', function ()  // gulp4: 2 arguments

（最后输掉)。对其他使用3个参数的任务进行这些更改，看看是否有帮助。

gulp版本4任务不再执行操作

1 个答案: