1

gulp-inject を使用して index.html にリソースを挿入すると問題が発生します。

アプリ スタイル、ベンダー js コード、およびアプリ js コードの次のストリームがあります。

// Vendor JS code
var vendorStream = gulp.src(mainBowerFiles({
      paths: {
        bowerDirectory: config.bowerDir
      },
      checkExistence: true
  }))
  .pipe(concat('vendors.js'))
  .pipe(gulp.dest(config.bowerLibDist))
  .pipe(size({
      title:"Vendor JS code"
  }));

// JS App Code
var jsStream = gulp.src(config.jsSrcPath)
  .pipe(concat('app.js'))
  .pipe(uglify())
  .pipe(gulp.dest(config.jsDistFolder))
  .pipe(size({
      title:"App js code"
  }));

// SASS App Code
var cssStream = gulp.src(config.sassSrcPath)
    .pipe(sass({
      outputStyle: 'compressed'
    })
    .on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulpIf(config.production, cssnano()))
    .on("error", notify.onError(function (error) {
      return "Error: " + error.message;
    })).pipe(gulp.dest(config.cssDistFolder))
    .pipe(size({
      title:"Styles"
    }));

私がやりたいのは、index.ml を使用してこれらのリソースを注入し、次のタスクを通じて dist ディレクトリに配置することです。

gulp.task('inject', function() {
   return gulp.src('index.html', {cwd: './app'})
        .pipe(inject(es.merge(vendorStream, jsStream, cssStream)))
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(config.distFolder));
});

これは正しく機能しますが、パスに dist ディレクトリも含まれていることが問題です。これは公開ベース ディレクトリです。

// Starts a server using the production build
gulp.task('server', ['build'], function () {
  connect.server({
    root: './dist',
    hostname: '0.0.0.0',
    port: 90
  });
});

代わりに gulp-inject を構成するにはどうすればよいですか

<script src="/dist/js/app.js"></script>

なれ

<script src="js/app.js"></script>

ありがとう ：）

4

1 に答える 1

1

方法の 1 つは、変換関数を使用することです。

gulp.task('inject', function() {
  return gulp.src('index.html', {cwd: './app'})
             .pipe(inject(
                 es.merge(vendorStream, jsStream, cssStream),
                 { 
                     transform: function( filepath, file, index, length, targetFile ) {
                       return inject.transform.call(inject.transform, filepath.replace(/\/dist\//, ""), file, index, length, targetFile);
                     }
                 }
             ))
             .pipe(htmlmin({collapseWhitespace: true}))
             .pipe(gulp.dest(config.distFolder));
});

ファイル名のみを変更したい場合は、初期変換関数も保持できます。

于 2016-11-24T09:57:00.793 に答える