使用gulp、yeoman、bower建站

前端建站工具

标签 : 工具
***

脚手架：yeoman

1. 用途
   • 快速搭建新项目
   • 为项目增长新部分
   • 建立模块或者包
   • 引导新服务
   • ...
2. 开始

   • 安装yo和generator

     npm i -g yo
       npm i -g generator-webapp

   • 运行安装

     yo webapp

   • 查看已安装generator

     yo -- generators

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

bower

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

3. 配置.bowerrc

   {
        "directory": "app/components/",
        "timeout": 120000,
        "registry": {
        "search": [
        "http://localhost:8000",
        "https://bower.herokuapp.com"
            ]
        }
    }

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

gulp

1. 特色
   • 易于使用
     经过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
   • 构建快速
     利用 Node.js 流的威力，你能够快速构建项目并减小频繁的 IO 操做。
   • 插件高质
     Gulp 严格的插件指南确保插件如你指望的那样简洁高质得工做。
   • 易于学习
     经过最少的 API，掌握 Gulp绝不费力，构建工做尽在掌握：如同一系列流管道。

2. 安装

   npm i -g global

3. 基本使用
   + 建立gulpfile.js文件

   var gulp = require('gulp');
   
      gulp.task('default', function() {
      // 将你的默认的任务代码放在这
      });
   + 运行gulp
   
      gulp

4. 经常使用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 事件。
5. 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