gulp和bower工具的环境搭建以及使用介绍

gulp工具使用介绍

1.gulp工具的使用依赖于node.js，GUlP插件该工具提供了相当多的功能，如less编译，js，html，css，图片压缩，以及文件的合并和打包等等。使用gulp之前需要安装node.js工具
2.安装node.js 官网下载地址 https://nodejs.org
3.安装完node.js 按住window+R输入cmd打开终端输入node -v，和npm -v检查是否安装成功(如图所示)

4.安装bower工具，bower工具是一款js版本管理工具可以对js进行版本管理（js的加载和卸载）在命令行中输入
npm install bower 安装完之后终端输入bower -v (如图所示)

5.安装gulp工具在终端输入
install gulp -g 安装完之后输入 gulp -v(如图所示)

开始新建一个工程example项目目录结构如下

1.desc是压缩包
2.src是源码包

配置bower环境

帮助信息

cache:bower缓存管理
help:显示Bower命令的帮助信息
home:通过浏览器打开一个包的github发布页
info:查看包的信息
init:创建bower.json文件
install:安装包到项目
link:在本地bower库建立一个项目链接
list:列出项目已安装的包
lookup:根据包名查询包的URL
prune:删除项目无关的包
register:注册一个包
search:搜索包
update:更新项目的包
uninstall:删除项目的包
1.在列子工程下新建文件1.txt然后命令行进入项目目录下，输入命令重命名该文件为.bowerrc指令如下
rename 1.txt .bowerrc
那我的.bowerrc文件内容如下：
{
“directory”: “src/js/lib” //js下载的文件路径
}
1-1.bower初始化
命令行进入项目目录中，输入命令如下：
bower init
会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个bower.json文件，用来保存该项目的配置，如下：

1-2.下面终于开始安装需要的包了！
比如我要安装一个angular，输入如下命令：
bower install angular–save
然后bower就会从远程下载angular最新版本到你的src/js/lib目录下
其中–save参数是保存配置到你的bower.json，你会发现bower.json文件已经多了一行：
“dependencies”: {
“angular”: “^1.5.8”
}

以上是bower的环境搭建下面介绍gulp工具的环境配置

1.进入项目目录下 按快捷键shift+鼠标右键快速 选择’在此处打开终端窗口‘ 输入
nmp init
生成package.json内容如图所示

1-1.首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：
npm install -g gulp
1-2.全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：
npm install gulp
安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev
npm install –save-dev gulp
1-3.开始使用gulp
1-3-1. 建立gulpfile.js文件,gulpfile.js文件内容示例，它定义了一个默认的任务。

#导入工具包 require(‘node_modules里对应模块’)

var gulp = require(‘gulp’);
gulp.task(‘default’,function(){
console.log(‘hello world’);
});
在命令行输入 gulp defalut可以看到效果图如下

以上是gulp环境的搭建完毕