javascript - What is a clean front-end workflow with bower and gulp? - Stack Overflow

admin管理员组

文章数量:1296331

I have been really struggling to figure out how to cleanly install and update client-side assets from 3rd-party vendors. All that I really want to do is to fetch the current versions and copy the production-ready files into a fixed location. The best I have been able to e up with so far is this ugly thing:

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_ponents/'+filespec+'.css')
            .pipe(flatten())
            .pipe(gulp.dest('public/vendor/css'));
    });

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

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

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

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

    gulp.src('./bower_ponents/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();
});

I've been reading a lot to try to figure out the best practices and tools for client deployments, but have just been getting myself more and more confused. I'm sure that the front-end will be more plex than just selecting packages and running "poser update", but this seems pretty kludgy. What are some better ways to handle it?

I have been really struggling to figure out how to cleanly install and update client-side assets from 3rd-party vendors. All that I really want to do is to fetch the current versions and copy the production-ready files into a fixed location. The best I have been able to e up with so far is this ugly thing:

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_ponents/'+filespec+'.css')
            .pipe(flatten())
            .pipe(gulp.dest('public/vendor/css'));
    });

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

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

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

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

    gulp.src('./bower_ponents/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();
});

I've been reading a lot to try to figure out the best practices and tools for client deployments, but have just been getting myself more and more confused. I'm sure that the front-end will be more plex than just selecting packages and running "poser update", but this seems pretty kludgy. What are some better ways to handle it?

• javascript
• client-side
• dependency-management
• bower
• gulp

Share Improve this question Follow edited Apr 27, 2014 at 6:49 joel asked Apr 27, 2014 at 4:46 joeljoel 15333 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Whenever I'm working on a production-level app, rather than manually handling the copying of specific vendor assets into a directory, I allow my build-process to take a look at my relevant markup files referencing any <script> tags and ascertain what needs to be copied over. This avoids copying or deploying scripts that aren't actually in use.

If you would like to take a look at how we on the Yeoman team use this type of setup, take a look at our Gulp file here, which also uses the useref task:

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

本文标签： javascriptWhat is a clean frontend workflow with bower and gulpStack Overflow