前端工具学习记录

grunt 前段构建工具

cnpm install -g grunt-cli
yomen 前段脚手架工具
cnpm install -g yo
bower 包管理工具
cnpm install -g bower

package.json

文件解析

devDependencies项目开发时需要的包
Dependencies 项目生产时用的包
engines 指定node版本号
scripts 指node将运行什么命令

“autoprefixer-core”: “^5.2.1”, //版本号 ^属于宽限制的版本号 将会随着版本更新到5版本最高版本 即5.x
//~则只会限制在最低位的更新 即5.2.x

bower

bower install jquery
bower install bootstarp

bower install angluar –save dev //加入到项目开发时需要的包
bower install angluar –save //则将加入到开发和生产环境

bower.json配置文件
bower init //生成bower的管理配置文件
main file：//主入口文件
.bowerrc配置很少用到
{
“directory”: “bower_components”
“proxy”:”http://proxy.tencent.com:8080“//设置代理上网
“https-proxy”:”https://proxy.tencent.com:8080”
“timeout”:6000ms//设置默认超时
}

yomen（脚手架构建工具）

cnpm install -g generator-webapp 安装yomen的webapp的支持
yo webapp *//构建webapp的脚手架
Modernizr //检查浏览器对js css的支持情况
node—sass//是基于ruby实现的css编译器，现在已经大量采用c c++实现的编译器
tdd//测试驱动开发
bdd//行为驱动开发

gulpfile.js文件解析

gulp有四个基本api
1.gulp.task(“名字”,[可选数组],function(){…..})
可选数组表示在任务前需要执行的操作，
function则为任务体
2.gulp.src(“”)//指明源文件路径 读取资源
3.gulp.dest();//指明目标文件处理后的输出路径
4.gulp.watch([资源])//指明监听的资源文件及发生变化后的文件进行相关处理。

webpack现在开始成为主流的构建工具