如何初始化项目（一）

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)
    2、Windows下安装
        百度git安装经验(http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html)
二、文档地址
    1、git官方文档地址(https://git-scm.com/book/zh-tw/v1)
三、开始
    （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

一、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
2、webpack常用地址
    webpack官方文档：http://webpack.github.io/docs/
    webpack中文文档：http://www.css88.com/doc/webpack2/guides/development/

gulp使用

1、找到之前建好的文件夹D:\Project\h5plus。
    新建一个h5plus文件夹，最终路径D:\Project\h5plus\h5plus
    cmd 打开：
    cd D:\Project\h5plus\h5plus  //找到路径
    d:  // 进入路径
2、全局安装 gulp
    npm install --global gulp
3、项目依赖安装
    npm init //初始化文件夹 // 后续步骤默认
    npm install gulp -g //全局安装
    npm install gulp --save-dev  // 项目安装gulp
4、安装插件
    命令：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

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

gulpfile.js

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

运行gulp

　　1、开始输入cmd，在命令行输入gulp 回车;
　　2、或者点击D:\Project\h5plus\h5plus\打包.bat,自动打包。
   　　 新建.bat文件，输入一下命令
    　　gulp
    　　pause

2017-05-26 14:41:40

转载于:https://www.cnblogs.com/myclovers/p/6908424.html