前端建站工具

标签 : 工具

脚手架：yeoman

用途
- 快速搭建新项目
- 为项目增加新部分
- 创建模块或者包
- 引导新服务
- ...

开始

安装yo和generator

  npm i -g yo

  npm i -g generator-webapp

运行安装
```
  yo webapp
```
查看已安装generator
```
  yo -- generators
```

详细使用查看网址：yeoman.io

bower

用途
- 管理前端渲染文件
使用
- npm i -g bower
- bower init
- bower i [--save|--dev-save]

配置.bowerrc

 {

     "directory": "app/components/",

     "timeout": 120000,

     "registry": {

     "search": [

     "http://localhost:8000",

     "https://bower.herokuapp.com"

         ]

     }

 }

详细使用查看网址：bower.io

gulp

特点
- 易于使用
  
  通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
- 构建快速
  
  利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
- 插件高质
  
  Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
- 易于学习
  
  通过最少的 API，掌握 Gulp毫不费力，构建工作尽在掌握：如同一系列流管道。
安装
```
npm i -g global
```

基本使用

+ 创建gulpfile.js文件

   var gulp = require('gulp');

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

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

   });

+ 运行gulp

        gulp

常用API
- gulp.src(globs[, options])
  
  输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
- gulp.dest(path[, options])
  
  能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。
- gulp.task(name[, deps], fn)
  
  定义一个使用 Orchestrator 实现的任务（task）。
- gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
  
  监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。
CLI的使用
1. -v 或 --version 会显示全局和项目本地所安装的 gulp 版本号
2. --require 将会在执行之前 reqiure 一个模块。这对于一些语言编译器或者需要其他应用的情况来说来说很有用。你可以使用多个--require
3. --gulpfile 手动指定一个 gulpfile 的路径，这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录
4. --cwd 手动指定 CWD。定义 gulpfile 查找的位置，此外，所有的相应的依赖（require）会从这里开始计算相对路径
5. -T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树
6. --tasks-simple 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表
7. --color 强制 gulp 和 gulp 插件显示颜色，即便没有颜色支持
8. --no-color 强制不显示颜色，即便检测到有颜色支持
9. --silent 禁止所有的 gulp 日志
  
  详细使用查看网址：gulp.io

秒客网

使用gulp、yeoman、bower建站

前端建站工具

脚手架：yeoman

bower

gulp