【发布时间】：2016-08-12 00:59:25
【问题描述】：
我有这个项目结构。
我想这样当我运行 inject-bower 的 gulp task 时，它将占用 bower 文件夹并注入所有必需的文件。然后当我执行inject-app 时，它会获取所有脚本并照此注入。
我将这两个任务放在一个并发任务流中：
gulp.task('inject', ['inject-bower', 'inject-app'], function() {
console.log('Injection done.');
})
但是，它似乎只注入了 bower 文件夹。但是，当我一个接一个地运行 gulp inject-bower 和 gulp inject-app 时......它可以工作。
这是我的 gulpfile：
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var wiredep = require('wiredep').stream;
var inject = require('gulp-inject');
var runSequence = require('run-sequence').use(gulp);
var del = require('del');
gulp.task('inject', ['inject-bower', 'inject-app'], function() {
console.log('Injection done.');
})
gulp.task('inject-bower', ['clean'], function() {
gulp.src('./index.html')
.pipe(wiredep({}))
.pipe(gulp.dest('./src'));
});
gulp.task('clean', function() {
return del('src/index.html');
});
gulp.task('inject-app', function () {
gulp.src('./src/index.html')
.pipe(inject(
gulp.src(['./src/js/client/*.js'], {read: true})
))
.pipe(gulp.dest('./src'));
});
// For production/dev
gulp.task('styles', function(){
gulp.src(['src/stylesheets/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('src/stylesheets/'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('src/stylesheets/'))
});
// For production.
gulp.task('build-scripts', function(){
return gulp.src('src/js/client/**/**/*.js')
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(concat('bundle.js'))
.pipe(gulp.dest('src/js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('src/js/'))
});
gulp.task('default', ['inject'], function(){
//gulp.watch("src/stylesheets/*.scss", ['styles']);
//gulp.watch("src/js/client/**/**/*.js", ['scripts']);
gulp.watch("*.html", ['inject']);
});
这是控制台输出：
/usr/local/bin/node /usr/local/lib/node_modules/gulp/bin/gulp.js --color --gulpfile /Users/dan/Projects/AngularJSApp/gulpfile.js 注入 [12:21:53] 使用 gulpfile ~/Projects/AngularJSApp/gulpfile.js [12:21:53] 开始“清洁”... [12:21:53] 开始“注入应用程序”... [12:21:53] 18 毫秒后完成“注入应用程序”[12:21:53] 完成 40 毫秒后“清洁”[12:21:53] 开始“注入-凉亭”... [12:21:53] 在 1.89 毫秒 [12:21:53] 后完成 'inject-bower' 开始 'inject'... 注射完毕。 [12:21:53] 19 μs [12:21:53] 后完成“注入” gulp-inject 1 个文件到 index.html 中。
进程以退出代码 0 结束
这是我完成后在src/index.html 中剩下的内容：
<!DOCTYPE html ng-app="chat">
<html>
<head>
<title>Hello Chat</title>
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<h1>Ready to play?</h1>
<section>
Hey man.
<div ng-controller="ChatCtrl"></div>
</section>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/moment/moment.js"></script>
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
我做错了什么？
【问题讨论】：
标签： javascript dependency-injection gulp