全名:《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》
作者:Stefan Banumgartner【奥】
译者:谈博文
Bower可以管理项目的依赖,因而我们可以不再使用本地下载好的vendor,因为这个文件夹可能存在老版本的组件。原完整gulpfile.js,请参照Web前端自动化构建(三)——用Gulp配置本地开发环境。
下面,我们将一个存在于‘./scripts/vendor’目录下的jquery,通过bower安装,并使用gulp把依赖和项目自动集成。
方法一:使用wiredep插件,用gulp把依赖集成到应用中
1. 删除vendor中的jquery,并使用bower安装:
npm install --save jquery
2. 引入wiredep
wiredep插件会读取bower.json文件中的内容,获取到碧瑶以来的主文件的路径,然后注入到html文件中。
首先,删除index.html中的<script src="scripts/vendor/jquery.js"></script>
,
同时在相同位置加入如下标记:
<!-- bower:js -->
<!-- endbower -->
wiredep会在这两个注释之间引入bower文件路径。
3.修改gulpfile.js
添加新的deps task,如下:
const wiredep = require('wiredep').stream;
...
gulp.task('deps', () => {
return gulp.src('./app/index.html')
.pipe(wiredep())
.pipe(gulp.dest('dist'));
})
同时修改在default task中加入deps task,
gulp.task('default',
gulp.series('clean',
gulp.parallel('styles', 'scripts','deps'),
'server',
...
)
)
此时,运行gulp
,会在dist文件夹下生成新的index.html文件,index.html中加入如下代码:
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
现在只需要简单的运行bower update jquery
,就可以简单平滑的升级jQuery依赖,新的依赖也可以自动集成到项目里,不需要手动下载操作。
方法二:使用main-bower-files插件,把依赖集成到构建流程中
使用main-bower-files会返回一个由文件路径组成的数组。根据这些路径,我们可以把相应的依赖文件添加到构建pipe中。
然后声明一个glob变量,让它同时包含依赖和自己的代码,最终通过构建pipe,返回一个文件。
首先,安装 main-bower-files
:
npm install --save-dev main-bower-files
然后,修改gulpfile.js的script task,
const mainBowerFiles = require('main-bower-files'); //引入模块
...
gulp.task('scripts',
gulp.series('test', function scriptsInternal() {
let glob = mainBowerFiles('**/*.js'); //声明glob变量
glob.push('./app/scripts/*.js'); //把自己的代码匹配规则添加到数组中
return gulp.src(glob) //把数组传递给gulp.src()
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'));
})
);
现在执行gulp scripts
,就可以把所有安装的JavaScript组件也包括到main.min.js
中去了。
未完待续。。。
下一章中,会根据现在的Bower和Gulp配置,让这个项目可以在更多新项目中复用。