什么是使用 bower 和 gulp 的干净的前端工作流程？答案

【问题标题】：What is a clean front-end workflow with bower and gulp?什么是使用 bower 和 gulp 的干净的前端工作流程？
【发布时间】：2014-04-27 04:46:44
【问题描述】：

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

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”更复杂，但这看起来很笨拙。有什么更好的处理方法？

【问题讨论】：

标签： javascript client-side dependency-management bower gulp

【解决方案1】：

每当我在开发生产级应用程序时，而不是手动处理将特定供应商资产复制到目录中，我允许我的构建过程查看引用任何 <script> 标记的相关标记文件并确定需要复制的内容。这样可以避免复制或部署实际未使用的脚本。

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

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

【讨论】：