下面以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的更多相关文章

  1. VS2013中Nuget程序包管理器控制台使用入门(三)-项目实战(原创)

    VS2013中Nuget程序包管理器控制台使用入门(三)-项目实战 1.给指定项目安装Newtonsoft.Json ,Version 4.5.11 PM> Install-Package Ne ...

  2. Bower前端包管理器

    bower 前端包管理器 为什么要用它 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery.随着项目的进展,我们可能又需要Bootstrap3,其中每个框架之间的依 ...

  3. 【转】包管理器Bower详细讲解

      包管理器Bower   今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址:  ...

  4. 包管理器Bower使用手冊之中的一个

    包管理器Bower使用手冊之中的一个 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长 ...

  5. 包管理器Bower使用手册之一

    包管理器Bower使用手册之一 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长前端的 ...

  6. VS2013中Nuget程序包管理器控制台使用入门(二)-如何使用Nuget提供的帮助(原创)

    如何使用Nuget提供的帮助? 1.从get-help Nuget开始,键入“get-help NuGet”以查看所有可用的 NuGet 命令. 用法: PM> get-help Nuget 主 ...

  7. VS2013中Nuget程序包管理器控制台使用入门(一)-准备环境(原创)

    准备环境: 1.打开VS2013IDE集成开发环境. 2.新建一个Asp.net Mvc的项目,比如命名为:MvcApplication1 3.打开 菜单"工具"->&quo ...

  8. 包管理器Bower

    今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址: http://bower.i ...

  9. WebStorm中使用npm包管理器

    1.首先安装Node.js,安装之后添加NodeJs的安装路径到系统Path环境变量,在控制台之中测试node,与npm命令是否工作正常. 2.配置npm的源为国内的淘宝镜像,这里不推荐使用cnpm ...

随机推荐

  1. 牛客多校第十场-D- Rikka with Prefix Sum

    链接:https://www.nowcoder.com/acm/contest/148/D来源:牛客网 Prefix Sum is a useful trick in data structure p ...

  2. git常用命令及含义

    Git和SVN是我们最常用的版本控制系(Version Control System, VCS),当然,除了这二者之外还有许多其他的VCS,例如早期的CVS等.顾名思义,版本控制系统主要就是控制.协调 ...

  3. ThinkPHP 3.2 DEMO案例系列【phpmailer批量发送邮件】

    但是邮件和短信相比在一些场景依然有着重要的意义和优势: 1:零成本:发邮件没有费用: 2:内容丰富且量大:邮件可以长篇大论:图文并茂: 3:增加访问量:用户很容易通过邮件中的链接访问网站: 好了:下面 ...

  4. 工控安全入门之Modbus(转载)

    工控安全这个领域比较封闭,公开的资料很少.我在读<Hacking Exposed Industrial Control Systems>,一本16年的书,选了的部分章节进行翻译,以其抛砖引 ...

  5. Linux 环境变量问题

    环境变量延伸: /etc/profile, /etc/bashrc, .bash_profile和.bashrc的差别 用户在登陆Linux操作系统的时候,"/etc/profile&quo ...

  6. 第16月第5天 performSelector afterDelay cancel dispatch_semaphore_wait

    1. //不延时,可能会导致界面黑屏并卡住一会 [self performSelector:@selector(startScan) withObject:nil afterDelay:0.3]; - ...

  7. 课程5:Spring框架2016版视频--视频列表目录

    \day01视频\01-今天内容介绍.avi; \day01视频\02-spring的相关概念.avi; \day01视频\03-spring的ioc底层原理(一).avi; \day01视频\04- ...

  8. Python提示AttributeError 或者DeprecationWarning: This module was deprecated解决方法

    Python提示AttributeError 或者DeprecationWarning: This module was deprecated解决方法 在使用Python的sklearn库时,发现sk ...

  9. struct 与 class 的区别

    C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能. struct能包含成员函数吗? 能! struct能继承吗? 能!! s ...

  10. ubuntu14.04 + cuda8.0 + cudnnv5 + caffe + py-faster-rcnn配置

    经过几天的奋战终于配置好了如题所述的配置,现在把配置大体过程写下来供大家配置时参考(由于电脑硬件和系统的千差万别,实在不适合写详细的) (一切不声明配置环境的配置教程都是耍流氓) 环境: Inter集 ...