怎么在项目中使用前端包管理器bower和构建工具gulp
下面以WeUI(微信官方网页开发样式库)介绍一下,怎么把WeUi引入到自己的项目中,我的开发环境Visual Studio 2012,当然了Visual Studio 2015对此已有了更好的支持(https://msdn.microsoft.com/magazine/mt573714),什么开发环境不重要,都一样的。
1、bower、gulp都是基于nodejs,前提是你必须已经安装好nodejs环境。
2、使用nodejs自带的包管理器npm,安装bower、gulp
npm install -g bower
npm intall -g gulp
3、在项目的根目中创建 bower.json
bower.json 不是强制的,理想情况下,你的应用程序应该具有 bower.json 文件,这样 Bower 就可以跟踪程序包依赖项和版本。
怎么创建bower.json 呢?很简单,cmd命令行工具进入到项目的根目录中,运行 Bower init 命令,按照提示一步一步创建即可。
4、安装微信官方网页开发样式库WeUi
bower install --save weui
这时候会自动在更目录创建 bower_components 文件夹,里面就是WeUi的整个项目文件,此时你可以在你的项目中直接以<link rel="stylesheet" type="text/css" href="/bower_components/weui/dist/style/weui.min.css">的形式引用,但这样显得很low,很不整洁,对于以后也会出现很多麻烦。
5、使用构建工具gulp,把相关的库文件对应到项目指定位置
在根目下创建一个"gulpfile.js"文件,gulpfile.js文件内容:
/**
* Created by onestraw on 2016/5/9.
*/
var gulp = require('gulp'); gulp.task('buildlib', function() {
gulp.src('./bower_components/weui/dist/style/*.css')
.pipe(gulp.dest('./lib/weui/css/'));
gulp.src('./bower_components/weui/dist/example/example.*')
.pipe(gulp.dest('./lib/weui/example/'));
gulp.src('./bower_components/weui/dist/example/images/*')
.pipe(gulp.dest('./lib/weui/example/images/'));
gulp.src('./bower_components/weui/dist/example/snapshot/*')
.pipe(gulp.dest('./lib/weui/example/snapshot/'));
});
然后cmd中运行gulp buildlib,相关的库文件就被copy到lib目录下。
这是可能会出现这么一个问题
解决方法如下:
执行 npm link gulp 即可
gulb的功能很强大,了解更多可以去官方网站 http://www.gulpjs.com.cn/ 看一下文档。
怎么在项目中使用前端包管理器bower和构建工具gulp的更多相关文章
- VS2013中Nuget程序包管理器控制台使用入门(三)-项目实战(原创)
VS2013中Nuget程序包管理器控制台使用入门(三)-项目实战 1.给指定项目安装Newtonsoft.Json ,Version 4.5.11 PM> Install-Package Ne ...
- Bower前端包管理器
bower 前端包管理器 为什么要用它 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery.随着项目的进展,我们可能又需要Bootstrap3,其中每个框架之间的依 ...
- 【转】包管理器Bower详细讲解
包管理器Bower 今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址: ...
- 包管理器Bower使用手冊之中的一个
包管理器Bower使用手冊之中的一个 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长 ...
- 包管理器Bower使用手册之一
包管理器Bower使用手册之一 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长前端的 ...
- VS2013中Nuget程序包管理器控制台使用入门(二)-如何使用Nuget提供的帮助(原创)
如何使用Nuget提供的帮助? 1.从get-help Nuget开始,键入“get-help NuGet”以查看所有可用的 NuGet 命令. 用法: PM> get-help Nuget 主 ...
- VS2013中Nuget程序包管理器控制台使用入门(一)-准备环境(原创)
准备环境: 1.打开VS2013IDE集成开发环境. 2.新建一个Asp.net Mvc的项目,比如命名为:MvcApplication1 3.打开 菜单"工具"->&quo ...
- 包管理器Bower
今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址: http://bower.i ...
- WebStorm中使用npm包管理器
1.首先安装Node.js,安装之后添加NodeJs的安装路径到系统Path环境变量,在控制台之中测试node,与npm命令是否工作正常. 2.配置npm的源为国内的淘宝镜像,这里不推荐使用cnpm ...
随机推荐
- 牛客多校第十场-D- Rikka with Prefix Sum
链接:https://www.nowcoder.com/acm/contest/148/D来源:牛客网 Prefix Sum is a useful trick in data structure p ...
- git常用命令及含义
Git和SVN是我们最常用的版本控制系(Version Control System, VCS),当然,除了这二者之外还有许多其他的VCS,例如早期的CVS等.顾名思义,版本控制系统主要就是控制.协调 ...
- ThinkPHP 3.2 DEMO案例系列【phpmailer批量发送邮件】
但是邮件和短信相比在一些场景依然有着重要的意义和优势: 1:零成本:发邮件没有费用: 2:内容丰富且量大:邮件可以长篇大论:图文并茂: 3:增加访问量:用户很容易通过邮件中的链接访问网站: 好了:下面 ...
- 工控安全入门之Modbus(转载)
工控安全这个领域比较封闭,公开的资料很少.我在读<Hacking Exposed Industrial Control Systems>,一本16年的书,选了的部分章节进行翻译,以其抛砖引 ...
- Linux 环境变量问题
环境变量延伸: /etc/profile, /etc/bashrc, .bash_profile和.bashrc的差别 用户在登陆Linux操作系统的时候,"/etc/profile&quo ...
- 第16月第5天 performSelector afterDelay cancel dispatch_semaphore_wait
1. //不延时,可能会导致界面黑屏并卡住一会 [self performSelector:@selector(startScan) withObject:nil afterDelay:0.3]; - ...
- 课程5:Spring框架2016版视频--视频列表目录
\day01视频\01-今天内容介绍.avi; \day01视频\02-spring的相关概念.avi; \day01视频\03-spring的ioc底层原理(一).avi; \day01视频\04- ...
- Python提示AttributeError 或者DeprecationWarning: This module was deprecated解决方法
Python提示AttributeError 或者DeprecationWarning: This module was deprecated解决方法 在使用Python的sklearn库时,发现sk ...
- struct 与 class 的区别
C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能. struct能包含成员函数吗? 能! struct能继承吗? 能!! s ...
- ubuntu14.04 + cuda8.0 + cudnnv5 + caffe + py-faster-rcnn配置
经过几天的奋战终于配置好了如题所述的配置,现在把配置大体过程写下来供大家配置时参考(由于电脑硬件和系统的千差万别,实在不适合写详细的) (一切不声明配置环境的配置教程都是耍流氓) 环境: Inter集 ...