前端近几年给人感觉喷涌

网上有人说

前端变化有多快?两年前,大家都用Grunt构建,去年用Gulp + Browserify构建,今年用Webpack构建,明年可能会使用纯ES6的构建工具。每变一次,前面的那些工具就全没用,都白学。要知道,这些工具每一个都是软件系统,单单Grunt就有4千个插件,然而全没用了。


前端真是太变态了,新技术层出不穷,没开始学就过时了,还没有用grunt,gulp就来了,还没用require.js,webpack就来了,还没学sass,postcss就来了,还没学angular.js,react就来了。。。

工具链

yeoman -> bower -> grunt

yo是构建项目骨架的工具,类似maven archetype

  • 安装yo

    1
    npm install -g yo
  • 安装一个基本骨架

    1
    npm install -g generator-webapp
  • 接下来运行

    1
    yo webapp

    在该目录下会生成如下文件结构:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ├── Gruntfile.js
    ├── app
    │ ├── apple-touch-icon.png
    │ ├── favicon.ico
    │ ├── fonts
    │ ├── images
    │ ├── index.html
    │ ├── robots.txt
    │ ├── scripts
    │ │ └── main.js
    │ └── styles
    │ └── main.css
    ├── bower.json
    ├── package.json
    └── test
    ├── index.html
    └── spec
    └── test.js

bower是解决依赖管理的,类似于maven解决依赖

  • 安装bower

    1
    npm install -g bower
  • 安装jquery依赖

    1
    bower install jquery

    以上命令就会将jquery库下载到本地,再也不用去每个库的官网下载对应的文件了,是不是方便了很多。

bower会有个类似maven pom的文件: bower.json

grunt是自动化压缩、编译、测试等的工具,还是类似maven

  • 安装grunt-cli

    1
    npm install -g grunt-cli

    这个并不是装了grunt,而是装了个可以调用各版本的前台命令工具,类似gcc

  • 安装grunt

    1
    npm install grunt --save-dev

    save-dev选项会将依赖写进package.json

至此grunt已经安装在项目中,接下来就可以根据需要添加插件,执行各种task