CODEWITHSUNDEEP
javascriptangularjsnode.jsgulpbower
JVG
JVG

Reputation: 21150

Adding Bower to Gulp/Nodemon/Browsersync/Angular configuration

Almost feels like I'm being greedy with all these dependancies at the moment, but I'd love to add Bower into my current workflow.

My AngularJS app is built on a Node/Express server, with Browsersync as well. I use Gulp to run it all. Here's my current Gulpfile (with comments that I've kept in for my own learning):

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
var watch = require('gulp-watch');
var less = require('gulp-less');
var bower = require('gulp-bower');
var mainBowerFiles = require('main-bower-files');

var BROWSER_SYNC_RELOAD_DELAY = 500;

gulp.task('less', function() {
    gulp.src('./public/css/*.less')
        .pipe(less())
        .pipe(gulp.dest('./public/css'));
});

gulp.task('nodemon', function(cb) {
    var called = false;
    return nodemon({

            script: 'app-local.js',

            watch: ['app-local.js', 'routes/**.js', 'config/*.js', 'app/**/*.js']
        })
        .on('start', function onStart() {
            if (!called) {
                cb();
            }
            called = true;
        })
        .on('restart', function onRestart() {
            setTimeout(function reload() {
                browserSync.reload({
                    stream: false //
                });
            }, BROWSER_SYNC_RELOAD_DELAY);
        });
});

gulp.task('watch', function() {
    gulp.watch('./public/css/*.less', ['less']);
});

gulp.task('browser-sync', ['nodemon', 'less', 'watch'], function() {
    browserSync.init({
        files: ['public/**/*.*', 'views/**/*.jade'],
        proxy: 'https://localhost:8080',
        port: 4000,
        browser: ['google-chrome']
    });
});


gulp.task('default', ['browser-sync']);

Nodemon is processing my JADE templates into HTML and doing most of the heaving lifting here.

Currently I have my .js dependancies living in /public/js/vendor/ and they're hard-coded into my /views/index.jade view, like so:

  script(src='/js/vendor/papa-parse.js')
  script(src='/js/vendor/d3.js')
  script(src='/js/vendor/nvd3.js')  
  script(src='/js/vendor/angular.js')
  script(src='/js/vendor/ngd3-angular.js')
  script(src='/js/vendor/angular-animate.js')
  script(src='/js/vendor/angular-aria.js')
  script(src='/js/vendor/angular-messages.js')
  script(src='/js/vendor/angular-material.js')
  script(src='/js/vendor/angular-route.js')

I'd like to replace these with a simple:

 // bower:js
 // endbower

and have Gulp do the rest of the work. I've tried:

gulp.task('wiredep', function() {
    var wiredep = require('wiredep').stream;
    gulp.src(mainBowerFiles())
        .pipe(wiredep())
        .pipe(gulp.dest('/views/index.jade'));
});

then adding the wiredep task before nodemon runs - gulp.task('browser-sync', ['wiredep', 'nodemon', 'less', 'watch']), but this doesn't work at all.

What's the best way to get all of this working smoothly together?

Upvotes: 0

Views: 492

Answers (1)

benfes
benfes

Reputation: 215

Bower is good for managing dependencies and their versions. However if you want to only have to include one dependency in your template, then perhaps something that you're already using would be the answer... Gulp.

I might not be understanding the question correctly, but it sounds like you only want to include one dependency and have that updated with the other dependencies when you add them. In which case you could use gulps concat function. 

gulp.task('dependecies',function(){
    return gulp.src(['bower_components/**/*.js','!bower_components/**/*.min.js'])
    .pipe(concat('dependencies.js'))
    .pipe(gulp.dest('js/vendor'));
});

This would then list concatenate all of your bower vendor dependencies into one file, then you only need to include the one script into your template. Also if you updated your dependencies, then you simply run the dependencies task again to regenerate the dependencies.js file.

And if you didn't want to add bower then you wouldn't have to, just change the above code to your current dependencies directory.

Not sure if this helps, but here's hoping.

Upvotes: 1

Related Questions