标签:对象 ack future 目录 bow 技术 `` 安装步骤 快速
如今随着前端技术的飞速发展,前端项目也变得越来越复杂。
快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求。
当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间。
既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀。
嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman。来吧,一起看一下如何使用这个工具让你的项目秒建吧。
yeoman是Google领头开发的一个前端构建工具,它的目的是为了给新项目建立一个完整的工作流,让开发人员可以专注于解决问题而不是担心那些不必要的小事情。
首先yeoman由三部分构成:脚手架工具yo、构建工具gulp/grunt、包管理工具npm/bower。在yeoman的基础上还需要配置对应的项目生成器(generators)才能愉快的生成一个项目。
形象来说,yeoman及三部分组成是印钞机,但具体要印出来是什么样是美刀还是日元,还是要自己输入指令的吧,这些指令之类的配置信息就是生成器。下面分别来说一下工具和generator
安装gulp
这里就不得不提前面说到的npm了,直接npm全局安装即可:
```
sudo npm install gulp -g
gulp -v
```使用gulp
需要在项目根目录下创建一个名为 gulpfile.js 的文件,内容类下:
```
var gulp = require(‘gulp‘);
gulp.task(‘default‘,function(){
//默认的任务
})
```
然后运行gulp即可:
gulp
npm 这里就不再多说了,前面提到过的,前端开发必备。
安装yo和generator-future-static
还是通过我们的npm来安装,ps:generator-future-static作为一个插件当然也是要单独安装的
sudo npm install yo -g
sudo npm install generator-future-static -g
这里需要加上sudo,毕竟是全局安装,避免出现权限问题。```
//指向cnpm
npm config set registry="http://r.cnpmjs.org"
```
yo future-static
ps:温馨提示,如果提示自动更新失败,然后报错的话,请手动更新一下generator-future-static,这个更新失败的锅请扔给yo及npm。
sudo npm install generator-future-static -g
另:公司外的同学如果要使用的话,请直接把cortex相关内容忽略掉或者删除选择项目信息
当你选择某种模板之后,就是愉快的生成过程了。会进行一下npm的init,提示你输入相关信息,如果你感觉不用更改就一路enter下去吧,如果要修改直接输入即可。
然后你会看到一系列的create和install命令,过程稍微有点慢,因为是用的npm来install,等不了的同学control+c关掉,然后用cnpm来install依赖即可如下:
cnpm install
如果你自己用cnpm来instal的,还是要自己来输入一下的:npm run demo
对于npm的指令,如果不对的话,请去项目根目录下查看package.json中scripts的对象,看里面都定义了什么就run什么:
```
"scripts": {
"build": "node_modules/.bin/gulp && node_modules/.bin/gulp min",
"test": "karma start",
"dev": "node_modules/.bin/gulp demo",
"doc": "smartDoc ||node_modules/.bin/smartDoc"
}
```标签:对象 ack future 目录 bow 技术 `` 安装步骤 快速
原文地址:http://www.cnblogs.com/chenliyang/p/6547686.html