感觉就像我现在对所有这些依赖感到贪婪,但我喜欢将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}},但这根本不起作用。
什么是让所有这些工作顺利进行的最好方法?
答案 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,那么您就不必这样做,只需将上面的代码更改为当前的依赖目录。
不确定这是否有帮助,但我们希望。