基于gulp的前端自动化环境搭建

基于gulp的前端自动化环境搭建

创建git目录

新建文件夹webapp，右键git bash here，进入git控制台，输入指令git init，创建一个空的git目录

安装第三方依赖管理工具bower

cnpm install -g bower  //全局安装bower
bower -v //查看bower版本

切换到目录webapp下，输入指令bower init创建bower配置文件，生成bower.json配置文件

如果这里报错提示“bower不是内部或者外部命令“，说明环境变量配置存在问题。
解决方法：如npm安装路径为D:\IDE\NodeJs\node_global\node_modules，需要在系统变量中新增名字为node_path的环境变量，指向D:\IDE\NodeJs\node_global；这样就会报不是内部或外部命令的警告。最后在用户变量的path变量中添加D:\IDE\NodeJs\node_global，重新运行bower，问题解决。

安装angular

bower install --save angular  //添加了--save才会添加到配置文件

若出现“Bower : ENOGIT git is not installed or not in the PATH”，说明git未被安装或者git的环境变量未被添加。
安装完成后，bower.json配置文件中会出现依赖，

"dependencies": {
    "angular": "^1.6.2"
  }

PS：bower uninstall 用来删除依赖组件

Angular常用调试工具：batarang
主要功能：查看作用域、输出调试信息、性能监控
安装演示：http:pan.baidu.com/s/1jGILtzg

安装gulp

npm install -g gulp //全局安装gulp

切换到webapp目录下，使用npm init初始化项目，会自动添加package.json配置文件和node_modules文件夹。

npm i --save--dev gulp //添加到配置文件，把gulp配置写入package.json文件，

node_modules文件夹中会新增gulp依赖

"devDependencies": {
    "gulp": "^3.9.1"
  }，

批量安装gulp插件

npm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

安装完成后，在package.json中会新增依赖如下：

"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-clean": "^0.3.2",
  "gulp-concat":