gulp笔记 2 （进阶一点点：使用bower来管理前端依赖）

其实gulp比例1中的内容已经基本满足开发要求了。此文为进阶的一点点知识

#1 安装bower （bower是个纯web前端依赖管理工具。）

      npm install -g bower  #版本为1.8.14，必须安装在全局

      bower init #会生成一个bower.json文件，选项寂寞默认就行，bower的库户自动放到bower_components里面

      这个时候可以个jquery试试

      bower install --save jquery  #文件夹可以看到放到了bower_components里了

      这里可能出出现无法访问github的错误，需要设置一下git：git config --global --unset http.proxy                    git config --global --unset https.proxy

      

#2  安装wiredep，并运行一个小例子   （wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。）

      npm install --save-dev wiredep  #版本为4.0.0

      在原文件index.html中代码如下：

...
	<!-- bower:js -->
	<!-- endbower -->
...
...

　　gulp代码如下：

var wiredep = require('wiredep').stream;
const dest_dir = '../html/';

gulp.task('t',function(){
    return gulp.src('data/**/*.html')
            .pipe(wiredep())   //这里会将上文注释的bower占位符替换成bower中已经下载的js文件，wiredep是转为bower.json写的代码，源码里可以看到
            .pipe(gulp.dest(dest_dir+'data'));

});

　　运行gulp t

       此时目标文件index.html中注释中被替换了（或者说增加了），如下：

	<!-- bower:js -->
	<script src="../bower_components/jquery/dist/jquery.js"></script>
	<!-- endbower -->

　　

翻译

搜索

复制