在使用Gulp和Bower时，是先注入再复制源代码，还是先复制源代码再注入？

Question

使用gulp在Ubuntu 14.04上运行Angular JS应用程序。我的文件夹结构如下：

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

以下是任务。查看完整的gulpfile.js。

我已经在/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))
  });
  

现在，问题出现了。

如果我在上面的任务中写入dest，即.pipe(gulp.dest('./env'))，那么在/app和/env文件夹中都不会添加任何内容到index.html中。

并且

如果我写src，即.pipe(gulp.dest('./app'))，那么所有的bower_components js文件都会被添加到index.html中（我认为这是由于copy任务在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

我需要使用wiredep或useref gulp模块吗？还是我漏掉了什么？

- diEcho

Answer 1

我通过以下方式解决了这个问题：

• 调整任务的顺序（将copy放在inject之前）
• 修改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))
    });

并且

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

这里是完整的gulpfile，希望能对某些人有所帮助。谢谢

- xkeshav