如何初始化项目（一）

H5 PLUS

　　Small lightweight mobile small frame

目录

　　安装nodejs
　　git使用
　　gulp 和 webpack
　　新建package.json文件
　　全局和本地安装gulp
　　安装gulp插件
　　新建gulpfile.js文件
　　经过命令提示符运行gulp任务

安装nodeJs

1. 百度经验：http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

ps：检查node安装版本 node -v，检查npm安装版本 npm -v，出现相应的版本号，说明安装成功

Git使用

1、安装 一、下载 官网下载git(https://git-scm.com/downloads)， 百度软件下载git(http://rj.baidu.com/search/index/?kw=git) 二、Windows下安装 百度git安装经验(http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html) 2、文档地址 一、git官方文档地址(https://git-scm.com/book/zh-tw/v1) 3、开始 （1）经常使用命令 git init // 初始文件夹 git config --global user.name "John Doe" // 设置用户名 git config --global user.email johndoe@example.com // 设置邮箱 git config --list //查看配置 git help config // 查看所有命令 git add . // 添加推送的文件 git commit -m'<注释>' // 注释 git status //查看状态 git pull <url> master //拉去远程仓库到本地 // master 主分支
　　　　git remote //查看缓存
　　　　git remote add <name> <url> //缓存远程仓库的地址
　　　　git remote -v //查看详情
　　　　git branch //查看分支
　　　　git branch <name> //建立
　　　　git checkout <name> //切换
　　　　git checkout -b <name> //建立+切换分支
　　　　git merge <name> //合并到分支
　　　　git branch -d <name>

（2）在现有目录中初始化仓库 在本地d:\，新建文件<Project> git cd d:\Project //进入文件夹 git clone <url> //克隆远程仓库 ps：若是本地出现 h5plus文件夹，说明克隆成功

gulp 和 webpack

1、gulp经常使用地址 gulp，中文文档：http://www.gulpjs.com.cn/docs/getting-started/， gulp 中文API：http://www.ydcss.com/archives/424 gulp官网：http://gulpjs.com/， gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md gulp插件地址：http://gulpjs.com/plugins gulp教程：http://www.ydcss.com/archives/18 二、webpack经常使用地址 webpack官方文档：http://webpack.github.io/docs/ webpack中文文档：http://www.css88.com/doc/webpack2/guides/development/

gulp使用

一、找到以前建好的文件夹D:\Project\h5plus。 新建一个h5plus文件夹，最终路径D:\Project\h5plus\h5plus cmd 打开： cd D:\Project\h5plus\h5plus //找到路径 d: // 进入路径 二、全局安装 gulp npm install --global gulp 三、项目依赖安装 npm init //初始化文件夹 // 后续步骤默认 npm install gulp -g //全局安装 npm install gulp --save-dev // 项目安装gulp 四、安装插件 命令：npm install <模块name> --save-dev 1）、文件重命名：gulp-rename npm install gulp-rename --save-dev 2)、编译less：gulp-less npm install gulp-less --save-dev 3）、压缩css文件：gulp-clean-css npm install gulp-clean-css --save-dev 4）、压缩js文件：gulp-uglify npm install gulp-uglify --save-dev 5）、处理JS：webpack-stream npm install webpack-strea --save-dev 6）、自动添加浏览器厂商的前缀：gulp-autoprefixer npm install gulp-autoprefixer --save-dev 7）、安装webpack npm install webpack -g // 全局安装 npm install webpack --save-dev //项目安装 8）、gulp-header //给压缩后的文件中添加md5文件指纹 npm install --save-dev gulp-header 9）、gulp-tap //过滤器 npm install --save-dev gulp-tap 10）、gulp-htmlmin //压缩html，能够压缩页面javascript、css，去除页面空格、注释，删除多余属性等操做。 npm install --save-dev gulp-htmlmin 11）、安装ES6编译 npm install --save-dev babel-loader babel-core //安装loader npm install babel-preset-env --save-dev //安装preset 事件 npm install --save-dev babel-preset-es2015 //安装preset 编译版本
　　　　配置.babel文件 见：h5plus\.babel

　　　　git 地址：https://github.com/hepingmogul/h5plus.git

五、新建gulpfile.js文件（重要） //导入工具包 require('node_modules里对应模块') //本地安装gulp所用到的地方

gulpfile.js

　　一、新建gulpfile.js文件，见：h5plus\gulpfile.js
　　二、git 地址：https://github.com/hepingmogul/h5plus.git

运行gulp

　　一、开始输入cmd，在命令行输入gulp 回车; 　　二、或者点击D:\Project\h5plus\h5plus\打包.bat,自动打包。 　　 新建.bat文件，输入一下命令 　　gulp 　　pause2017-05-26 14:41:40