web-dev-qa-db-ja.com

Gulp、Wiredep、Bowerの依存関係

Gulpfile.jsを適応させ、bower_components/フォルダーをapp/bower_components/に変更したいと思います。

.bowerrcのディレクトリを更新したので、bower installを実行するたびに、正しいディレクトリが使用されます。

{
  "directory": "app/bower_components"
}

さて、gulp-wiredepはメインのSassファイル内に正しいSassパスの場所をどのように書き込むことができますか？

たとえば、gulp-wiredepは、main.scssファイルの// bower:scssの直後に次の行を追加します。

@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

今は@import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";になっているはずです

どうすればそのパスを変更できますか？ wiredepタスクの構成だと思います。

gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));
});

しかし、必要なことを実行するように構成する方法がわかりません。それに関するドキュメントが見つかりませんでした。

Sassファイルのパスを手動で"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"に変更すると、gulp serveが機能することはわかっていますが、bowerコンポーネントをインストールするとすぐに、そのパスが最初にapp/のないパスに変更され、仕事。

それを修正する方法は？

完了：

// inject bower components
gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({

      fileTypes: {
        scss: {
          replace: {
            sass: '@import "app/{{filePath}}";',
            scss: '@import "app/{{filePath}}";'
          }
        }
      },

      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));
});
node.jsgulpbowerwiredep
8
zok

Wiredepのdirectoryオプションを使用できます。

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      directory: 'app/bower_components',
      fileTypes: {
        scss: {
          replace: {
            scss: '@import "src/app/{{filePath}}";'
          }
        }
      },
      ignorePath: /^(\.\.\/)+/
    }));

gulp.src('app/*.html')
    .pipe(wiredep({
      directory: 'app/bower_components',
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));

また、 ドキュメント も参照してください。

3
knutwalker

代わりにwiredepを使用できます（インストールタイプはnpm bindepまたは https://github.com/publicocean0/bindep ）。オプションのサブモジュール、リソースマッピング、ファイル変換（たとえば、より少ないファイル）、およびカスタム前処理を使用して複雑なプロジェクトを作成できます。 HTMLでは、単一のバウアーコンポーネント内のサブモジュールを指定したり、ファイルをフィルタリングしたり、パラメーターを渡すファイルを前処理したりできます。構成では、あらゆるタイプのリソース、テンプレート、コンバーター、ローカル依存関係を配置する場所を設定できます。 ..。

0
user6228847