初始化項目

目錄

　　安裝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
    　　pause