使用Bower和Gulp的干净前端工作流是什么？

Question

我一直在努力想要找到一种干净的方式来安装和更新来自第三方供应商的客户端资源。我真正想做的只是获取当前版本并将生产就绪的文件复制到固定位置。到目前为止，我能想到的最好方法就是这个丑陋的东西：

gulp.task('bower', ['clean','load'], function(){
    var bowerFilesToMove = [
        'angular*/*',
        'bootstrap/dist/*',
        'fontawesome/*',
        'jasny-bootstrap/dist/*',
        'jcrop/css/*',
        'jcrop/js/*',
        'jquery/dist/*',
        'jquery-align-column/*',
        'jquery-autosize/*',
        'jqueryui/ui/minified/*',
        'moment/min/*',
        'select2/*',
        'underscore/*',
    ];

    bowerFilesToMove.forEach(function(filespec){
        gulp.src('./bower_components/'+filespec+'.css')
            .pipe(flatten())
            .pipe(gulp.dest('public/vendor/css'));
    });

    bowerFilesToMove.forEach(function(filespec){
        gulp.src('./bower_components/'+filespec+'.js')
            .pipe(flatten())
            .pipe(gulp.dest('public/vendor/js'));
    });

    bowerFilesToMove.forEach(function(filespec){
        gulp.src('./bower_components/'+filespec+'.map')
            .pipe(flatten())
            .pipe(gulp.dest('public/vendor/js'));
    });

    gulp.src('./bower_components/jqueryui/themes/*')
        .pipe(gulp.dest('public/vendor/css/themes'));

    gulp.src('./bower_components/bootstrap/dist/fonts/*')
        .pipe(gulp.dest('public/vendor/fonts'));

    gulp.src('./bower_components/fontawesome/fonts/*')
        .pipe(gulp.dest('public/vendor/fonts'));
});

gulp.task('clean', function(){
    return gulp.src('./public/vendor')
        .pipe(clean({force: true}));
});

gulp.task('load', function(){
    return bower();
});

我一直在阅读很多内容，试图找出客户端部署的最佳实践和工具，但越来越困惑了。我相信前端不会像简单选择软件包和运行“composer update”那样简单，但这似乎很笨拙。有什么更好的处理方式吗？

- joel

Answer 1

每当我在处理一个生产级别的应用程序时，与其手动处理特定供应商资产的复制到目录中，我会让我的构建过程查看我的相关标记文件引用任何<script>标签，并确定需要复制哪些内容。这避免了复制或部署实际上并未使用的脚本。

如果您想查看我们Yeoman团队如何使用此类型的设置，请查看我们的Gulp文件，该文件还使用了useref任务：

https://github.com/yeoman/generator-gulp-webapp/blob/master/app/templates/gulpfile.js#L27

- addyo