常連

bowerでbootstrap-sassをインストールして、gulpでインストールしたbootstrap-sassをコンパイルする方法を教えて下さい。
bootstrap-sassはbower_componentsのフォルダから移動したり変更変更はせずに別ファイルからカスタマイズしてgulpでコンパイルしたいです。
bootstrapのバージョン変更にも対応出来るようにするため。
（バーション４はディレクトリ構造が違う為、対応出来ないかもしれませんが汗）

そこで_bootstrap.scssと_variables.scssのみ別ディレクトリにコピーして編集反映出来るようにしたいです。

_bootstrap.scss
必要なファイルのみimportするためのファイル
不要なものはコメントアウト

_variables.scss
カスタマイズするためのファイル

フォルダ構造は以下のとおりです。

┣bower_components
 ┣bootstrap-sass
┣styles
 ┣css
 ┣scss
  ┣foundation
  ┣_bootstrap.scss
  ┣_variables.scss
 ┣bootstrap-custom.scss


_bootstrap.scss
```ここに言語を入力
$bootstrap_path: "../../../bower_components/bootstrap-sass/assets/stylesheets/"; 
@import "#{$bootstrap_path}bootstrap/variables";
@import "#{$bootstrap_path}bootstrap/mixins";
@import "bootstrap/normalize";

//以下省略
```
bootstrap-custom.scss
```scss
@import "./foundation/_bootstrap.scss";
@import "./foundation/_variables.scss";
```

参考サイト
http://qiita.com/kmszk/items/4d5db574585e06f60ca6
http://www.d-wood.com/blog/2016/01/20_7757.html


途中までやって出来なかった、現状のgulpfile.jpは以下の通りです。
```javascript
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
var cleanCSS = require('gulp-clean-css');
 
gulp.task("styles", function() {
    gulp.src("styles/scss/*.scss")
        .pipe(plumber())//エラー時にwatchを止めないための処理
        .pipe(sass({
          outputStyle : 'expanded'
        }).on('error', sass.logError))
        .pipe(autoprefixer())//ベンダープレフィックス付与を自動化するため
        .pipe(cleanCSS())
        .pipe(gulp.dest("styles/css"));
});

gulp.task("bootstrap", function() {
        gulp.src(["styles/scss/*.scss", "styles/scss/**/*.scss"])
        .pipe(plumber())
        .pipe(sass({
        //includePaths: ['bower_components/bootstrap-sass/assets/stylesheets', 'styles/scss'],
        outputStyle : 'expanded'
        }).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(cleanCSS())
        .pipe(gulp.dest("styles/css"));
});


//https://h2ham.net/gulp-browser-sync
//https://ics.media/entry/3405/2
gulp.task('server', function () {
  browserSync({
    notify: false,
    server: {
      baseDir: "/"
    }
  });
  gulp.watch('/', browserSync.reload());
});


gulp.task("watch",function() {
    gulp.watch("styles/scss/*.scss",["styles"]);
    gulp.watch(["styles/scss/*.scss", "styles/scss/**/*.scss"],["bootstrap"]);
});

gulp.task('default', ['watch','server']);
```


何卒よろしくお願いいたします。

bowerでbootstrap-sassをインストールして、gulpでインストールしたbootstrap-sassをコンパイルする方法を教えて下さい

##環境・各種バージョン
CentOS7(Vagarnt+Virtualbox)

- node => 6.9.1
- npm => 3.10.8
- yeoman => 1.8.5
- bower => 1.8.0
- grunt-cli => 1.2.0
- grunt => 0.4.5
- yeoman => 1.8.5

##行ったこと
Yeoman（yo grunt bower）と呼ばれるツールを利用してAnagularの雛形環境を作成しました。

今回はBowerでAngularが正しくインストールできないという問題なので、Grunt yoについてはあまり関係がないと思います。

問題に気づいたのは、Angularで使用されている$httpのsuccess, errroメソッドが使えなくなっていたからです。調べたところAngularの1.6からsuccess, errorメソッドが消え、thenに置き換えられたらしいです。

https://docs.angularjs.org/guide/migration#migrate1.5to1.6-ng-services-$http

Chromeのconsoleでangular.version.fullを実行したところ1.6.1が表示されました。

bowerで1.4をインストールしているはずなのですが、なぜか1.6に置き換わっていました。
bower.jsonは以下の通りです

```
{
  "name": "front",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap-sass-official": "^3.2.0",
    "angular-animate": "^1.4.0",
    "angular-cookies": "^1.4.0",
    "angular-resource": "^1.4.0",
    "angular-route": "^1.4.0",
    "angular-sanitize": "^1.4.0",
    "angular-touch": "^1.4.0"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "frontApp",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  }
}
```

bower installをした際のログの様子を下に示します。

```
bower not-cached    https://github.com/angular/bower-angular-touch.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-touch.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular-route.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-route.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular-resource.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-resource.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular-sanitize.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-sanitize.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular-mocks.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-mocks.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular-animate.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-animate.git#^1.4.0
bower not-cached    https://github.com/angular/bower-angular-cookies.git#^1.4.0
bower resolve       https://github.com/angular/bower-angular-cookies.git#^1.4.0
bower not-cached    https://github.com/twbs/bootstrap-sass.git#^3.2.0
bower resolve       https://github.com/twbs/bootstrap-sass.git#^3.2.0
bower download      https://github.com/angular/bower-angular-sanitize/archive/v1.6.1.tar.gz
bower download      https://github.com/angular/bower-angular-touch/archive/v1.6.1.tar.gz
bower download      https://github.com/angular/bower-angular-route/archive/v1.6.1.tar.gz
bower download      https://github.com/angular/bower-angular/archive/v1.6.1.tar.gz
bower download      https://github.com/angular/bower-angular-resource/archive/v1.6.1.tar.gz
bower download      https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz
bower download      https://github.com/angular/bower-angular-mocks/archive/v1.6.1.tar.gz
bower download      https://github.com/angular/bower-angular-animate/archive/v1.6.1.tar.gz
bower download      https://github.com/angular/bower-angular-cookies/archive/v1.6.1.tar.gz
bower extract       angular-sanitize#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular-sanitize.git#1.6.1
bower extract       angular-route#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular-route.git#1.6.1
bower extract       angular-resource#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular-resource.git#1.6.1
bower extract       angular-mocks#^1.4.0 archive.tar.gz
bower extract       angular-touch#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular-mocks.git#1.6.1
bower resolved      https://github.com/angular/bower-angular-touch.git#1.6.1
bower extract       angular-cookies#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular-cookies.git#1.6.1
bower extract       angular-animate#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular-animate.git#1.6.1
bower extract       bootstrap-sass-official#^3.2.0 archive.tar.gz
bower resolved      https://github.com/twbs/bootstrap-sass.git#3.3.7
bower extract       angular#^1.4.0 archive.tar.gz
bower resolved      https://github.com/angular/bower-angular.git#1.6.1
bower not-cached    https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower resolve       https://github.com/jquery/jquery-dist.git#1.9.1 - 3
bower download      https://github.com/jquery/jquery-dist/archive/3.1.1.tar.gz
bower extract       jquery#1.9.1 - 3 archive.tar.gz
bower resolved      https://github.com/jquery/jquery-dist.git#3.1.1
bower install       angular-sanitize#1.6.1
bower install       angular-route#1.6.1
bower install       angular-resource#1.6.1
bower install       angular-mocks#1.6.1
bower install       angular-touch#1.6.1
bower install       angular-cookies#1.6.1
bower install       angular-animate#1.6.1
bower install       bootstrap-sass-official#3.3.7
bower install       angular#1.6.1
bower install       jquery#3.1.1

angular-sanitize#1.6.1 bower_components/angular-sanitize
└── angular#1.6.1

angular-route#1.6.1 bower_components/angular-route
└── angular#1.6.1

angular-resource#1.6.1 bower_components/angular-resource
└── angular#1.6.1

angular-mocks#1.6.1 bower_components/angular-mocks
└── angular#1.6.1

angular-touch#1.6.1 bower_components/angular-touch
└── angular#1.6.1

angular-cookies#1.6.1 bower_components/angular-cookies
└── angular#1.6.1

angular-animate#1.6.1 bower_components/angular-animate
└── angular#1.6.1

bootstrap-sass-official#3.3.7 bower_components/bootstrap-sass-official
└── jquery#3.1.1

angular#1.6.1 bower_components/angular

jquery#3.1.1 bower_components/jquery
```


ログを見てURLを調べてみると
https://github.com/angular/bower-angular-touch.git#^1.4.0

Angularのバージョンが1.6.2となっていました。
1.4は廃止されたということでいいのでしょうか？

ご教示お願いいたします。

BowerでAngular1.4.0をインストールする際に異なるバージョンがインストールされる

bowerを使いfont-awesomeをプロジェクト内にインストールし、gulpの`gulp-ruby-sass`を使いコンパイルしています。
この際に`bower_components/font-awesome`内に手を入れず、`_variables.scss`内にあるフォントのパスなどの変数を上書きさせてコンパイルさせる方法はありますでしょうか？

以下使用しているプラグインのパージョンとGulpのタスクになります
```json
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.2"
  }
```
```javascript
var gulp     = require("gulp"),
    rename   = require('gulp-rename'),
    rubySass = require("gulp-ruby-sass"),
    notify   = require("gulp-notify");

gulp.task('fontawesome', function(cb) {
  // パスもできれば`main-bower-files`とかで自動で取ってきたい
  var path = './bower_components/font-awesome';

  // copy font files
  gulp.src(path + '/fonts/*.*')
    .pipe( gulp.dest(destDir + '/fonts') );

  // compile scss
  return rubySass(path + '/scss/*.scss', {
    style: 'compressed',
  })
  .on("error", notify.onError(function(error) {
      return "Error: " + error.message;
    }))
    .pipe( rename({
      prefix: '_'
    }) )
    .pipe( gulp.dest(destDir + '/css') );
});
```

なんとなく`gulp-ruby-sass`の`loadPath`オプションを使えば実現できそうな気もしているのですがご存知の方がおられましたらご教授お願いいたします。

[参考]
[gulp-ruby-sass - GitHub](https://github.com/sindresorhus/gulp-ruby-sass)
[gulp-ruby-sass - npm](https://www.npmjs.com/package/gulp-ruby-sass)

Gulp bowerでインストールしたfontawesomeのフォントパスをbower_components内に手を入れず変更する方法

お世話になっております。

現在webpack,gulp,npm,bowerなどのツールを使ってjsやstyleファイルを管理しています。
webpackでstyle系のローダーを入れれば,実現できることがわかっているのですが。gulp-compassを使ってsassをcssにコンパイルしている関係上gulp経由でbower_componentsやnode_modules配下にあるcssファイルをpublcなフォルダに配置したい(コンパイル済みファイルにバンドルしても良い)と思っています。
みなさんはこれらをどうやって実現していますか?

ライブラリのスタイルがscssであれば、import_pathで他ファイルでimportできるのですがcssではどうするべきかわかりません。
gulpに関する知識があまりなく初歩的な質問になるかもしれませんがよろしくお願いいたします。

gulpでbower_componentsやnode_modules配下にあるcssをパブリックな階層に配置する方法

#### 聞きたいこと
タイトル通りですが、npmとbowerの使い分けに関してお聞きしたいです。

下のサイトを見てみると、
* Gulp, Grant, Webpackなどフロントエンド開発のための補助ツールをインストールするときに使用するのがnpm
* Backbone, jQuery(Vue, React, Angulaなど)フロントエンド開発のためのライブラリーやフレームワークをインストールするときに使用するのがbower

と記載されていますが、npmでjQueryのライブラリーも配布されていますし、Vue, Reactなどで用意されているvue-cliやcreate-react-appで作成されるプロジェクトの関連ライブラリーも全てnpmでインストールされていると思います。

npm, bowerの明確な使い分けって存在しているのでしょうか？それとも、「ツール関連ならnpmで管理する方がおすすめだよ〜（逆も然り）」程度なのでしょうか。

#### 参考サイト
https://qiita.com/kyasbal_1994/items/0ceb94db91d11b9a9f5f

npmとbowerの使い分け

Railsで自作のJavaScriptのクラスをgemとして利用するために、[Rails Assets](https://rails-assets.org/)というサイトを利用しようとしています。これはbowerにあるパッケージをgemとしてインストールすることができるサイトだと知りました。
`例： gem 'rails-assets-mypacakage_name'`

そのためにまず自作のJavaScriptファイルをbowerパッケージに登録します。この時必要なpackage.jsonとcomponent.jsonの違いがわかりません。どちらも依存関係などを記述するものだと思うのですが、この2つはどのように使い分ければいいのでしょうか？

package.jsonとcomponent.jsonの違いがわかりません

環境 : `Rails 4.2.3`

Railsで自作のJavaScriptのクラスをgemとして利用するために、[Rails Assets](https://rails-assets.org/)というサイトを利用しようとしています。

下記の自作ライブラリをbowerパッケージとして登録し、gemとしてインストールするところまでは出来ました。
[mitsuru793/digit-js](https://github.com/mitsuru793/digit-js)

これを読み込むように次のように記述したのですが、`couldn't find file 'digit-js' with type 'application/javascript'`と表示されてしまいます。`//= require digit`でもダメでした。

```javascript
// application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require vue
//= require digit-js
```

`bower.json`には`main: 'js/digit.js'`と記述してあります。このmainはエンドポイントと言って最初に読み込まれるファイルを指定するものと認識しております。実際に`js/digit.js`は存在しています。

raise-assetのgemとして読み込むためにどうすればいいでしょうか？これは自動的にdistというディレクトリを読み込む用になっているのでしょうか？
その場合だと`bower.json`のmainの設定値の意味がわかりません。これはどういう時に最初に読み込まれるようになっているのでしょうか？

ご回答、よろしくお願い致します。

自作のbowerパッケージをrailsで読み込むことができません。

先日、gulpを使用した開発を行う機会がありました。

開発環境の構築に当たって下記のツール？を使用したのですが。。。
・gulp
・Bower
・Node.js
・npm
・Ruby

恥ずかしながら、それぞれが具体的にどういうものなのか、理解できていません。
一応、私の理解としては、

●Ruby
 プログラミング言語、gulpを動かすのにこの言語の実行環境が必要。
●Bower
 パッケージのバージョン管理ツール。
 一度、設定ファイルを記述しておけば、コマンドひとつでjQueryなどのライブラリをダウンロードできるため、開発時にバージョンを意識しないでよくなる。
 gulpとは直接的には関係ない。
●Node.js
 サーバー側で動くjavaScript。程度の理解しかありません。
●npm
 Node.jsの機能？npmのコマンドで、gulpのインストールをしました。
●gulp
 自動でjavascripを圧縮してくれたり、scssからcssを作成してくれたり、というタスクを自動で行ってくれる。今回は自動でこれを行ってくれる機能を使用しました。

こんなところでしょうか。。
理解として、まずいところがあれば指摘していただきたいです。
まずいところだらけかもしれませんが・・・