klei/gulp-inject

inject java script files to index.html page in particular order but its injecting in different way?

SIMHACHALAM1001 opened this issue · 2 comments

SIMHACHALAM1001 commented

Injecting files like this :
<script src="/js/angular-animate.min.js"></script>
<script src="/js/angular-aria.min.js"></script>
<script src="/js/angular-cookies.min.js"></script>
<script src="/js/angular-flexslider.js"></script>
<script src="/js/angular-google-maps.js"></script>
<script src="/js/angular-google-maps.min.js"></script>
<script src="/js/angular-material.js"></script>
<script src="/js/angular-material.min.js"></script>
<script src="/js/angular-messages.min.js"></script>
<script src="/js/angular-route.min.js"></script>
<script src="/js/angular-scroll.min.js"></script>
<script src="/js/angular-slick.min.js"></script>
<script src="/js/angular-spinkit.min.js"></script>
<script src="/js/angular.headroom.js"></script>
<script src="/js/angular.min.js"></script>
<script src="/js/backgroundVideo.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/calcumateemi.js"></script>
<script src="/js/covervid.min.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/geometry.js"></script>
<script src="/js/headroom.js"></script>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/jquery.fullPage.min.js"></script>
<script src="/js/lodash.js"></script>
<script src="/js/mapapi.js"></script>
<script src="/js/markerLabel.js"></script>
<script src="/js/ng-map.js"></script>
<script src="/js/ng-youtube-embed.min.js"></script>
<script src="/js/ngInfiniteScroll.js"></script>
<script src="/js/ngStorage.min.js"></script>
<script src="/js/sim.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/ui-bootstrap-tpls-2.0.1.js"></script>

so my code is :

gulp.task('js', function () {
gulp.src("client/js/*.js")
.pipe(order(['client/js/angular.min.js',
'client/js/jquery-1.10.2.min.js',
'client/js/ngStorage.min.js',
'client/js/angular-scroll.min.js',
'client/js/angular-material.min.js',
'client/js/angular-animate.min.js',
'client/js/angular-aria.min.js',
'client/js/angular-messages.min.js',
'client/js/ui-bootstrap-tpls-2.0.1.js',
'client/js/ng-youtube-embed.min.js',
'client/js/bootstrap.min.js',
'client/js/slick.min.js',
'client/js/headroom.js',
'client/js/angular.headroom.js',
'client/js/angular-route.min.js',
'client/js/angular-slick.min.js',
'client/js/slick.min.js',
'client/js/angular-cookies.min.js',
'client/js/ngInfiniteScroll.js',
'client/js/angular-spinkit.min.js',
'client/js/angular-scroll.min.js',
'client/js/lodash.js'
]))
.pipe(gulp.dest('build/js/'));
});

gulp.task('index',function () {
return gulp.src('client/index.html')
.pipe(inject(gulp.src(['build/js/.js','build/css/.css'], {read: false}), {ignorePath: 'build'}))
.pipe(gulp.dest('build'))
.pipe(livereload());
})

gulp.task('default', ['js','css', 'index','browser-sync','watch']);

i used inject order but not injecting in that order ,so any modifications please,and i am not using any bower.
so how can i inject that pipe order files injection .pipe(order(['',''...])
any help please

claudemuller commented

Hey bud

I just used this and I think your problem is not ordering the stream that you're putting into inject. So where you have:
.pipe(inject(gulp.src(['build/js/.js','build/css/.css'], {read: false}), {ignorePath: 'build'}))
add the order statement to that dest stream like this:
.pipe(inject(gulp.src(['build/js/.js','build/css/.css'], {read: false}), {ignorePath: 'build'}).order([...]))

Hope it helps :)

johnnynode commented

@claudemuller Thanks for your advise, but it is not working for me:

'inject' errored after 17 ms
[12:02:56] TypeError: inject(...).order is not a function

this works for me by using gulp-order plugin:

var order = require("gulp-order");

// insert task
gulp.task('inject', function () {
    gulp.src(paths.index)
        .pipe(plumber())
        // inject bower files
        .pipe(inject(gulp.src(paths.injectPath.bowerFiles, {read: false}).pipe(order(["ionic.bundle.min.js"])), {name:'bower', relative: true}))
        // inject your own css
        .pipe(inject(gulp.src(paths.injectPath.appCss, {read: false}), {starttag: '<!-- inject:appCss:{{ext}} -->', relative: true}))
        // inject your own js
        .pipe(inject(gulp.src(paths.injectPath.appJs, {read: false}), {starttag: '<!-- inject:appJs:{{ext}} -->', relative: true}))
        .pipe(gulp.dest(paths.src))
});

or as simple as below:

inject(gulp.src(paths.injectPath.bowerFiles, {read: false}).pipe(order(["your-js1.js", your-js2.js", ...])

It works for me, hope it helps!

  • 👍1