前端建站工具
标签 : 工具
脚手架: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 事件。
- gulp.src(globs[, options])
- CLI的使用
- -v 或 --version 会显示全局和项目本地所安装的 gulp 版本号
- --require 将会在执行之前 reqiure 一个模块。这对于一些语言编译器或者需要其他应用的情况来说来说很有用。你可以使用多个--require
- --gulpfile 手动指定一个 gulpfile 的路径,这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录
- --cwd 手动指定 CWD。定义 gulpfile 查找的位置,此外,所有的相应的依赖(require)会从这里开始计算相对路径
- -T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树
- --tasks-simple 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表
- --color 强制 gulp 和 gulp 插件显示颜色,即便没有颜色支持
- --no-color 强制不显示颜色,即便检测到有颜色支持
- --silent 禁止所有的 gulp 日志
详细使用查看网址:gulp.io