gulp-injectを使う。
インストール(開発環境だけでいいので、–save-dev)
|
1 |
npm install --save-dev wiredep |
挿入されるhtmlを編集
|
1 2 3 4 5 6 |
// cssが挿入される場所 <!-- bower:css --> <!-- endbower --> // javascriptが挿入される場所 <!-- bower:js --> <!-- endbower --> |
パッケージの挿入先を指し示すためgulpfile.js編集
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// bowerのスクリプトをHTMLに埋め込む gulp.task('wiredep', function() { var wiredep = require('wiredep').stream; return gulp .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html']) .pipe(wiredep()) // wiredep bower dependencies // .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), { // relative: true // no need for the './src/client' part // })) .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html }) |
取り敢えずテスト的にbower
|
1 |
$ bower init |
リターン連続
|
1 |
$ bower install angular-translate --save |
でangular-translateをインストール
bower.jsonを確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "name": "mean", "description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.", "main": "", "authors": [ "https://......." ], "license": "MIT", "homepage": "https://.......", "moduleType": [ "node" ], "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "angular-translate": "^2.15.1" } } |
dependenciesに挿入されて
bower_componentsフォルダにangular-translateがインストールされているのを確認。
では、gulp wiredepを実行。
|
1 |
gulp wiredep |
↓はhead.html, foot.htmlに設置
|
1 2 3 4 5 6 |
// cssが挿入される場所 <!-- bower:css --> <!-- endbower --> // javascriptが挿入される場所 <!-- bower:js --> <!-- endbower --> |
これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。
基本は相対パスで挿入されてしまう。
絶対パスがいいので↓のようにgulpfile.jsを変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// bowerのスクリプトをHTMLに埋め込む gulp.task('wiredep', function() { var wiredep = require('wiredep').stream; return gulp .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html']) .pipe(wiredep({ ignorePath: '../../../../../../bower_components/', fileTypes: { html: { replace: { js: '<script src="/bower_components/{{filePath}}"></script>', css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />' } } } })) // wiredep bower dependencies // .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), { // relative: true // no need for the './src/client' part // })) .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html }) |