gpt4 book ai didi

javascript - 什么是使用 bower 和 gulp 的干净的前端工作流程?

转载 作者:可可西里 更新时间:2023-11-01 02:40:23 24 4
gpt4 key购买 nike

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

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”更复杂,但这看起来很笨拙。有哪些更好的处理方法?

最佳答案

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

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

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

关于javascript - 什么是使用 bower 和 gulp 的干净的前端工作流程?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23319514/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com