将 Bower 添加到 Gulp/Nodemon/Browsersync/Angular 配置

Question

目前几乎感觉我对所有这些依赖项都很贪婪，但我很想将 Bower 添加到我当前的工作流程中。

我的 AngularJS 应用程序是在 Node/Express 服务器上构建的，同时也带有 Browsersync。我使用Gulp 来运行它。这是我目前的Gulpfile（以及我为自己学习而保留的cmets）：

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

然后在nodemon 运行之前添加wiredep 任务-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，则不必添加，只需将上述代码更改为您当前的依赖项目录即可。

不确定这是否有帮助，但希望如此。