bowerとgulpで試してみたこと

ただのログ

bowerで色々インストール

ずっとパッケージを管理するのはnpmと思っていたけど、npmはサーバ用（node用かな？）のプラグインを主としているらしい。

フロントはbowerを使う。

まずはbower initする。

$ bower init

angularjs1.5関連をインストール

$ bower install angular#1.5.8
$ bower install angular-animate

jquryのバージョン２ｎ最新版をインストール

$ bower install jquery#2

驚いたのが、なんとcss関連をダウンロードできた。うれしい

$ bower install font-awesome 

javascriptのライブラリファイルの管理

最初main-bower-filesを使って、管理していたけど、部分的にファイルがほしいとき、どうやったらいいのかわからなかった。 ※このページはangular必要だけど、他のページには必要ない。とか。

なので、gulpのタスクをバラバラにしてみた。

gulp.task('angular-lib', function() {
    return gulp.src([
            paths.base + '/bower_components/angular/angular.js',
            paths.base + '/bower_components/angular-animate/angular-animate.js'
        ])
        .pipe(concat('angular-lib.js'))
        .pipe(gulp.dest(paths.distJs + '/lib'));
});

gulp.task('jquery-lib', function() {
    return gulp.src([
            paths.base + '/bower_components/jquery/dist/jquery.js'
        ])
        .pipe(concat('jquery-lib.js'))
        .pipe(gulp.dest(paths.distJs + '/lib'));
});

しかし、面倒なことには変わりない。どうにかせんと。。。

scssのコンパイル時にパスを渡す

gulp-ruby-scssはできることが多そう。。。

いまから覚えるのもだるかったので、gulp-sassでどうにかできないかと探してたら、何故かドキュメントではなくstackoverflowで見つかった。

stackoverflow.com

gulp.task('sass', function() {
    var processors = [
        cssnext({browsers: ['> 0%']})
    ];
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: [
                paths.base + '/bower_components/font-awesome/scss'
            ]
        }))
        .pipe(gulp.dest(paths.distCss));
});

includePathsってやつをkeyにパスを渡せばおｋ