gulp基本介绍笔记

【摘要】学习前端神器，gulp、bower，这是给自己做的笔记。

（一）node.js入门指南

node.js是运行在服务器端的javascript。

1.Windows下安装，从官网下载安装包，下载后直接安装到电脑上即可。

https://nodejs.org

2.检查安装是否成功，因为安装的时候会自动添加系统变量，所以直接在cmd窗口中，输入：

1. C:\Users\mafutian>node --version

2. v4.4.5

3.测试npm是否安装成功，同样直接输入：

1. C:\Users\mafutian>npm -v

2. 2.15.5

4.安装git，下载git安装包，直接点击安装即可。

https://git-scm.com/download/

5.安装node.js模块：

1. $ npm install <Module Name>

2. # 注意：npm是nodejs的包管理器，用于nodejs插件的管理（包括安装、卸载、管理依赖等），在安装nodejs过程中会集成安装npm。

3. # 如果没有Module则默认安装package.json中所有的package

（二）gulp入门指南：

简介：gult是基于NodeJs的自动任务运行器，它能够自动化完成js/less/html/css/sass等等文件的测试、检查、合并、压缩格式化，浏览器自动刷新、部署文件生成等操作。

提示：安装gulp之前需要安装node.js、gitbash

1. 全局安装 gulp：

1. $ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

1. $ npm install --save-dev gulp

注意：全局安装了gulp，项目也需要安装gulp，这是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能。

本地安装：

1）.将安装包放在./node_modules下（运行npm命令时所在的目录），如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modul

es目录。

2）可以通过require()引入本地安装的包。

全局安装：

1）将安装包放在/usr/local（linux）下，或者 C:\Users\mafutian\AppData\Roaming\npm\node_modules（Windows）

2）可以直接在命令行里。

3）不可以通过require()来引入安装的包。

3. 查看gulp的版本

1. #	只安装了全局gulp，没有安装项目gulp

2. $ gulp -v

3. [14:45:26] CLI version 3.9.1	

4. #     或者

5. $ gulp -v

6. [14:45:14] CLI version 3.9.1	

7. [14:45:14] Local version 3.9.1

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

1. var gulp = require('gulp');

3. gulp.task('default', function() {

4.   // 将你的默认的任务代码放在这

5. });

7. //  注意：gulpfile.js是gulp项目的配置文件。

4. 运行 gulp：

1. $ gulp [任务名称]

（三）bower入门指南：

简介：Bower是一个客户端技术的软件管理器，它用于搜索、安装和卸载如JavaScript、html、css等文件。

安装bower之前，需要安装好node.js，npm和git

1. 全局安装 bower:

1. $ npm install -g bower

2. 检查是否安装成功

1. $ bower help

2. Usage:

4.     bower <command> [<args>] [<options>]

5. Commands:

7.     cache                   Manage bower cache

8.     help                    Display help information about Bower

9.     home                    Opens a package homepage into your favorite browser

10.     info                    Info of a particular package

11.     init                    Interactively create a bower.json file

12.     install                 Install a package locally

13.     link                    Symlink a package folder

14.     list                    List local packages - and possible updates

15.     login                   Authenticate with GitHub and store credentials

16.     lookup                  Look up a package URL by name

17.     prune                   Removes local extraneous packages

18.     register                Register a package

19.     search                  Search for a package by name

20.     update                  Update a local package

21.     uninstall               Remove a local package

22.     unregister              Remove a package from the registry

23.     version                 Bump a package version

24. Options:

26.     -f, --force             Makes various commands more forceful

27.     -j, --json              Output consumable JSON

28.     -l, --loglevel          What level of logs to report

29.     -o, --offline           Do not hit the network

30.     -q, --quiet             Only output important information

31.     -s, --silent            Do not output anything, besides errors

32.     -V, --verbose           Makes output more verbose

33.     --allow-root            Allows running commands as root

34.     -v, --version           Output Bower version

35.     --no-color              Disable colors

36. See 'bower help <command>' for more information on a specific command.

3. 查看bower的版本

1. $ bower -v

2. 1.7.9

4.更新bower

1. $ npm update -g bower

5. bower初始化

1. $ bower init

5. 安装 packages

1. # installs the project dependencies listed in bower.json

2. $ bower install

3. 或者

4. $ bower install --save-dev	# 自动把模块和版本号添加到devdependencies部分

6. 卸载 bower

1. $ bower uninstall

我要打赏