如何使用gulp将bower下载的angular,bootstrap等,放到scripts或styles目录下

Question

我使用gulp在Atom下配置一个项目，通过bower 下载了angular, bootstrap后， 但是不知道如何使用gulp将bower下载的东西引入到项目中，比如说script, style目录下， 求解 最好能把原理说一下。。。。！ ^_^

Answer 1

项目中并不是用gulp来将bower组件引入的, 我不确定我是否正确理解了你的意思, 这里我说两种用法, 假设bower组件都按默认路径安装, 即bower_components：

第一种

开发

直接引用

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/xxx/yyy.js"></script>
<script src="/js/app.js"></script>

发布

使用gulp对引用到的脚本进行压缩

var gulp   = require('gulp'),
    watch  = require('gulp-watch'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

gulp.src([
        'bower_components/angular/angular.js',
        'bower_components/xxx/yyy.js',
        'js/app.js'
    ])
    .pipe(concat())
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));

推荐的做法是通过读取html文件找到所有的<script>标签, 然后合并压缩, 再修改html文件中<script>的文件引用, 可以使用类似through2的库

第二种

开发时就引用gulp合并压缩的js文件

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

然后gulp写一个watch

var gulp   = require('gulp'),
    watch  = require('gulp-watch'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

gulp.task('default', function (cb) {
    watch('js/app.js', function () {
        gulp.src([
            'bower_components/angular/angular.js',
            'bower_components/xxx/yyy.js',
            'js/app.js'
        ])
        .pipe(concat())
        .pipe(uglify())
        .pipe(gulp.dest('./dist'))
        .on('end', cb);
    });
});

最后, 我也用webpack, 但是目前也不能完全替代gulp, 但是webpack确实是未来的趋势, 建议学习一下, 毕竟用来解决你目前的问题就比gulp简单.

Answer 2

我给你推荐用webpack吧（不是来歪楼的），我自己也弄了一个webpack-babel-react-development-tools（里面有讲解），希望对你有帮助。