什么是干净的前端工作流程与bower和gulp?

时间:2014-04-27 04:46:45

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

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

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

我一直在阅读很多东西,试图找出客户端部署的最佳实践和工具,但刚刚让自己变得越来越困惑。我确信前端将比选择包和运行&#34; composer update&#34;更复杂,但这看起来非常糟糕。有哪些更好的方法来处理它?<​​/ p>

1 个答案:

答案 0 :(得分:10)

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

如果您想了解我们Yeoman团队如何使用此类设置,请在此处查看我们的Gulp文件,该文件也使用<script>任务:

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