pro.mean pro.mean - 1 year ago 72
AngularJS Question

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

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',

now here is the issue

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


If I write src i.e.
than all bower_components js files being added into both index.html ( which I think, because of
task which runs after

<!-- 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() {

    Now when we run
    ; 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 Source

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($.uglify({ mangle: false, compress:true, output: { beautify: false } }).on('error', onError))
                        .pipe($.rename({suffix: '.min'}))
      return target
                gulp.src(mainBowerFiles(),{read: false}), {name: 'bower', relative: true}))
            .pipe($.inject(minify_js,{relative: true}))
                 gulp.src('bower_components/**/*.css', {read: false}), {relative: true}))


gulp.task('browser-sync', ['inject'], function() {
            server: {
                baseDir: './'
            browser: ["firefox"]

here is complete gulpfile, hope it helps someone. Thanks

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download