Добавление Bower в Gulp/Nodemon/Browsersync/Угловая конфигурация

Question

Почти чувствует, что я сейчас жаден со всеми этими зависимостями, но я бы хотел добавить Bower в мой текущий рабочий процесс.

Приложение My AngularJS построено на сервере Node/Express, а также Browsersync. Я использую Gulp для запуска всего этого. Вот мой текущий Gulpfile (с комментариями, которые я держал в моем собственном обучении):

'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 в обработке моих JADE шаблонов в HTML и делать большую часть вздымалась подъема здесь.

В настоящее время у меня .js живущих в зависимости /public/js/vendor/ и они жестко закодированы в мой /views/index.jade зрения, например, так:

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') 

Я хотел бы заменить их простой:

// bower:js 
// endbower 

и у вас есть Gulp, остальная часть работы. Я пробовал:

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

затем добавить wiredep задачу до nodemon пробегов - gulp.task('browser-sync', ['wiredep', 'nodemon', 'less', 'watch']), но это не работает.

Каков наилучший способ, чтобы все это работало вместе?

Answer 1

Bower подходит для управления зависимостями и их версиями. Однако, если вы хотите включить только одну зависимость в свой шаблон, возможно, что-то, что вы уже используете, будет ответом ... Gulp.

Возможно, я неправильно понял вопрос, но похоже, что вы хотите включить только одну зависимость и обновить ее с помощью других зависимостей при их добавлении. В этом случае вы можете использовать функцию gulps concat.

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

Это позволило бы список конкатенации всех ваших зависимостей поставщика Бауэр в один файл, то вам нужно всего лишь включить один скрипт в шаблон. Кроме того, если вы обновили свои зависимости, то вы снова запустите задачу зависимостей, чтобы восстановить файл dependencies.js.

И если вы не хотите добавлять bower, то вам не придется, просто измените приведенный выше код на ваш текущий каталог зависимостей.

Не уверен, что это помогает, но здесь надеемся.