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

时间:2015-09-27 09:42:17

标签: javascript angularjs node.js gulp bower

感觉就像我现在对所有这些依赖感到贪婪,但我喜欢将Bower添加到我当前的工作流程中。

我的AngularJS应用程序是在Node / Express服务器上构建的,还有Browsersync。我使用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']); (我已经为自己的学习保留了评论):

JADE

Nodemon正在将我的.js模板处理成HTML并在此处进行大部分的升降。

目前我/public/js/vendor/个{(1}}个依赖项存在/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.task('wiredep', function() {
    var wiredep = require('wiredep').stream;
    gulp.src(mainBowerFiles())
        .pipe(wiredep())
        .pipe(gulp.dest('/views/index.jade'));
});

并让Gulp完成剩下的工作。我试过了:

wiredep

然后在nodemon运行之前添加gulp.task('browser-sync', ['wiredep', 'nodemon', 'less', 'watch'])任务 - {{1}},但这根本不起作用。

什么是让所有这些工作顺利进行的最好方法?

1 个答案:

答案 0 :(得分: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'));
});

然后列出将所有bower供应商依赖项连接到一个文件中,然后您只需要将一个脚本包含到模板中。此外,如果您更新了依赖项,则只需再次运行依赖项任务即可重新生成dependencies.js文件。

如果您不想添加bower,那么您就不必这样做,只需将上面的代码更改为当前的依赖目录。

不确定这是否有帮助,但我们希望。