does copy the source code after inject or vice versa in gulp with bower?

Question

running angular js app on ubuntu 14.04 with help of gulp. My folder structure is this

|-- app <--- main application folder
|-- bower_components
|-- bower.json
|-- env <--public folder; copy the main `/app` code while runtime  
|-- gulpfile.js
|-- node_modules
`-- package.json

Below are the task. see complete gulpfile.js

I have added below in /app/index.html

<!-- bower:js -->
<!-- endinject -->

• inject : inject all bower_components JS into env/index.html

  gulp.task('inject', function () {
    var target = gulp.src('./app/index.html');
    var sources = gulp.src('./app/**/*.js');
    return target
      .pipe($.inject(gulp.src(mainBowerFiles(), {read: false}),{       
         name: 'bower',
         relative:true}))
      .pipe(gulp.dest(src))
  });
  

now here is the issue

Now if I write dest i.e. .pipe(gulp.dest('./env')) in above task , than nothing being added to index.html ( on both /app and /env folder) .

and

If I write src i.e. .pipe(gulp.dest('./app')) than all bower_components js files being added into both index.html ( which I think, because of copy task which runs after inject )

      <!-- bower:js -->
      <script src="../bower_components/jquery/dist/jquery.js"></script>
      <script src="../bower_components/angular/angular.js"></script>
      <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
      <script src="../bower_components/angular-messages/angular-messages.js"></script>
      <script src="../bower_components/ngstorage/ngStorage.js"></script>
      <script src="../bower_components/angular-resource/angular-resource.js"></script>
      <!-- endinject -->

• copy : which first complete browserify task and than copy all /app .html and .css to /env This seems confusing !!

  gulp.task('copy', ['browserify'], function() {
      gulp.src(['app/**/*.html','./app/**/*.css'])
          .pipe(gulp.dest(dest))
          .pipe(browserSync.stream());
  });
  

  Now when we run gulp ; Firefox opens up but the files inside <!-- bower:js --> are added in page but browser can not find sources of these files. Kindly guide me

Do I need to use wiredep or useref gulp modules or am I missing something here.

Answer 1

I fixed this by the

• ordering of task( copy before inject)
• and changing in browser-sync

---

gulp.task('inject', ['lint', 'copy'] , function () {
      var target = gulp.src('./app/index.html');
      var minify_js = gulp.src('./app/**/*.js')
                        .pipe($.sourcemaps.init())
                        .pipe($.plumber())
                        .pipe($.uglify({ mangle: false, compress:true, output: { beautify: false } }).on('error', onError))
                        .pipe($.plumber.stop())
                        .pipe($.concat('vendor.js'))
                        .pipe($.rename({suffix: '.min'}))
                        .pipe($.sourcemaps.write())
                        .pipe(gulp.dest(dest));
      return target
            .pipe($.inject(
                gulp.src(mainBowerFiles(),{read: false}), {name: 'bower', relative: true}))
            .pipe($.inject(minify_js,{relative: true}))
            .pipe($.inject(
                 gulp.src('bower_components/**/*.css', {read: false}), {relative: true}))
            .pipe(gulp.dest(dest))
    });

and

   gulp.task('browser-sync', ['inject'], function() {
        browserSync.init({
            server: {
                baseDir: './env',
                routes: {
                        "/env" : "env",
                        "/bower_components" : "bower_components"
                }
            },
            browser: ["chromium-browser"]
        });
    });

here is complete gulpfile, hope it helps someone. Thanks