2014-05-13 24 views
11

Mam prosty proces konfiguracji procesu Gulp do testowania. Wielokrotnie czytałem dokumentację, ale nie mogę zmusić Gulp-inject do wstrzyknięcia skryptów, które chcę, do pliku index.html.Gulp-Inject nie działa

plik My Gulp wygląda następująco:

gulp.task('inject1', function() { 
    return gulp.src('app/index.html') 
     .pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths 
     .pipe(gulp.dest("dist")); 
}); 

gulp.task('inject2', function() { 
    return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths 
     .pipe(inject("./app/index.html")) 
     .pipe(gulp.dest("./dist")); 
}); 

To jest część mojego index.html:

<!-- inject:js --> 

<!-- endinject--> 

Obie te są kopiowane z dokumentacją na github.

Kiedy uruchomić jedną z tych zadań konsola po prostu mówi „rozpoczął«wstrzyknąć»gotowy«wstrzyknąć» '

W moim ./dist folderu tworzy plik index.html ale żadne pliki js są wstrzykiwane.

próbowałem pisać w src i wstrzyknąć Właściwości wiele inny sposób, ale bez powodzenia Każdy pomysł co robię źle

+0

Mam ten sam problem. Wygląda na to, że robi się noop, ponieważ wynikowy plik HTML po prostu zachowuje i comments. –

+1

Tak jak ja. Naprawdę chciałbym, aby obecny był jakiś mechanizm debugowania. –

+0

Miałem ten sam komunikat o błędzie, ale okazało się, że mój plik index.html był pusty! – user2023861

Odpowiedz

9

Przede wszystkim masz błąd w tagu endinject.?

<!-- endinject--> 

powinny być

<!-- endinject --> 

Wtyczka pracował wielki dla mnie i innych w różnych ustawieniach, więc problem jest prawdopodobnie w danej konfiguracji. Ponieważ podczas korzystania z przesyłania strumieniowego nie można mieć pewności, z których plików korzysta użytkownik, należy zawsze używać wtyczki do dokładnego sprawdzania, które pliki są przesyłane. Polecam używanie gulp-using. Spróbuj tego debugować konfigurację:

var debug = require('gulp-debug'); 

gulp.task('inject2', function() { 
return gulp.src('app/scripts/**/*.js', {read : false}) 
    .pipe(debug()) 
    .pipe(inject("./app/index.html")) 
    .pipe(gulp.dest("./dist")); 
}); 

Również upewnić się użyć tej samej metody, aby sprawdzić, czy pasuje do pliku html również. Poza tym - to tylko próba i błąd, dopóki nie zrozumiesz instalacji rurowej, aby uzyskać właściwe pliki z prawidłową ścieżką.

Jeśli gulp-inject nie wstrzykuje żadnych plików, oznacza to, że nie zostały one poprawnie wykonane lub Twój cel inject był niepoprawny. Wtyczka działa i działa doskonale dla mnie.

Jeśli chcesz zobaczyć przykład roboczą plik haustem, sprawdź ten this gulpfile.js gist

+0

Dobre oko. Nie byłbym w stanie odgadnąć, że moim problemem były przestrzenie w komentarzach. – welbornio

+3

gulp-using jest na czarnej liście jako wtyczka do gulp, zalecane polecenie gulp-debug: https://github.com/gulpjs/plugins/blob/master/src/blackList.json#L50 – Cosmin

+0

Wpadłem na podobny problem; Używałem '' w moim kodzie. Wygląda na to, że '//' jest niedozwolone i powoduje problemy. –

1

miałem ten sam problem z następującego kodu:

var injectSrc = gulp.src(['./public/css/*.css', '.public/js/*.js'], {read: false}); 
var injectOptions = { 
    ignorePath: '/public' 
}; 
var options = { 
    bowerJson: require('./bower.json'), 
    directory: './public/lib', 
    ignorePath: '../../public' 
} 

gulp.task('inject', function() { 
    return gulp.src('./src/views/*.html') 
      .pipe(debug()) 
      .pipe(wiredep(options)) 
      .pipe(debug()) 
      .pipe(inject(injectSrc, injectOptions)) 
      .pipe(debug()) 
      .pipe(gulp.dest('./src/views')); 

}); 

Moja index.html miał następujące:

<!--bower:css--> 
<!--endbower--> 
<!--bower:js--> 
<!--endbower--> 
<!--inject:css--> 
<!--endinject--> 
<!--inject:js--> 
<!--endinject--> 

Click on this link to see what my file structure was. inject stwarzał css c poprawnie, ale nie pliki js. Zależności od altany działały dobrze.

W końcu złapałem brakujące "/" w tablicy przekazane do gulp.src(). Po ustaleniu, że:

var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'], {read: false}); 

działa poprawnie.