gulp基本介绍笔记

生活日志 马富天 2016-06-03 15:49:21 79 0

【摘要】学习前端神器,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');
  2. gulp.task('default', function() {
  3.   // 将你的默认的任务代码放在这
  4. });
  5. //  注意: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:
  3.     bower <command> [<args>] [<options>]
  4. Commands:
  5.     cache                   Manage bower cache
  6.     help                    Display help information about Bower
  7.     home                    Opens a package homepage into your favorite browser
  8.     info                    Info of a particular package
  9.     init                    Interactively create a bower.json file
  10.     install                 Install a package locally
  11.     link                    Symlink a package folder
  12.     list                    List local packages - and possible updates
  13.     login                   Authenticate with GitHub and store credentials
  14.     lookup                  Look up a package URL by name
  15.     prune                   Removes local extraneous packages
  16.     register                Register a package
  17.     search                  Search for a package by name
  18.     update                  Update a local package
  19.     uninstall               Remove a local package
  20.     unregister              Remove a package from the registry
  21.     version                 Bump a package version
  22. Options:
  23.     -f, --force             Makes various commands more forceful
  24.     -j, --json              Output consumable JSON
  25.     -l, --loglevel          What level of logs to report
  26.     -o, --offline           Do not hit the network
  27.     -q, --quiet             Only output important information
  28.     -s, --silent            Do not output anything, besides errors
  29.     -V, --verbose           Makes output more verbose
  30.     --allow-root            Allows running commands as root
  31.     -v, --version           Output Bower version
  32.     --no-color              Disable colors
  33. 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

版权归 马富天PHP博客 所有

本文标题:《gulp基本介绍笔记》

本文链接地址:http://www.mafutian.net/141.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 文件夹正在使用,操作无法完成——解决办法 》 下一篇《 两种纯CSS实现DIV文字垂直居中的方法 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多