Bower + Grunt + anywhere 快速构建前端响应式站点

梅斯前端培训

一、Bower

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源

bower 包使用介绍

$ bower help
Usage:
    bower <command> [<args>] [<options>]
Commands:
    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
Options:
    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --log-level         What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root

二、Grunt

Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。

Grunt Doc

三、anywhere

anywhere 包使用介绍

目录结构

├── dist                    --- 编译后的可用于生产环境的包
│   └── src
│       ├── css
│       ├── font
│       ├── images
│       ├── js
│       └── lib
├── node_modules            --- node modules
├── publish                 --- 版本发布的文件目录,这里的内容是dist文件的压缩包
│   └── CloudIndex-Bootstrap-PC_Web-1.0.160821.1-Beta
│  
└── src                     --- 开发目录,这里包括了css/js/images/js/sass等开发文件
    ├── css
    ├── font
    │   └── define01
    ├── images
    │   ├── bg
    │   ├── icon
    │   ├── logo
    │   └── other
    ├── js
    ├── lib                 --- 引用的外部框架的包,这里引用了bootstrap和jQuery,俩个包的版本管理由bower维护
    │   ├── bootstrap
    │   └── jquery
    └── sass

开发流程

1.克隆代码

git clone  git@222.73.104.107:ued.git

2.进入项目并安装nodeJs的相关依赖(这里请确保你本地已经安装了nodeJs并支持npm的执行)

cd ./ued/cloudIndex-Bootstrap-PC
npm install

3.可以进行开发了

开发目录为src下

4.启动web服务器

//这里假定你已经安装好node环境，同时也安装好了anywhere插件
anywhere 8080

grunt 相关命令

grunt的相关方法
在目录下执行 grunt --help 你将看到如下的内容

Available tasks
         clean  Clean files and folders. *
      compress  Compress files. *
          copy  Copy files. *
        cssmin  Minify CSS files *
          sass  Compile Sass to CSS *
         watch  Run predefined tasks whenever watched files change.
        uglify  Minify files with UglifyJS. *
       htmlmin  Minify HTML *
    imageoptim  Losslessly compress images from the command line *
       default  Alias for "cssmin", "uglify", "htmlmin", "copy:images" tasks.
        styles  Alias for "sass:admin", "cssmin" tasks.
        bundle  Alias for "clean:pre", "copy:images", "copy:main", "cssmin",
                "htmlmin", "compress", "copy:archive", "clean:post" tasks.

四、问题

1. 你现在已知的包管理工具有哪些？
2. 你现在已知的项目构建工具有哪些？
3. 如何构建一个简单的web服务器，你已知的方法有几种？