前端工具学习记录

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现在开始成为主流的构建工具