前端資源多個產品整站一鍵打包&包版本管理（一）

來新公司工做的第五個月、整站資源打包管理也提上了日程。

問題：

首先、什麼是整站的打包管理呢？

咱們公司的幾個重要產品都在同一個webapp裏面，可是，不一樣的開發部門獨立開發不一樣的產品，長期以來，咱們就不知道其餘部門的在作什麼，或許咱們正在頭疼的問題，隔壁部門已經早早解決了呢？

各個部門的前端資源也是處處都是、難以管理、因而就提出了整站資源共享、整站資源共享的前提就是資源打包能統1、在幾個產品裏面、既有使用grunt的也有使用glup的，各個產品引入的包的版本也不同。

目標：

統一打包工具

對於公用的包使用bower包管理工具統一管理

自定義的包不計入bower範圍內

實現整站一鍵打包

 

首先就是要統一打包工具，通過討論，咱們統一使用gulp來打包前端資源

（本地環境要求：node.js npm gulp bower sass less）

 node.js 能夠到官網下載

 https://nodejs.org/en/

 一路next就能夠了

 安裝好以後咱們打開控制檯能夠查看版本

node -v
v6.2.0

繼續查看npm版本

npm -v
3.9.5

接下來安裝gulp（前端資源打包工具）

npm install gulp -g  //全局安裝
gulp -v                 //檢測版本、是否安裝成功
CLI version 3.9.1    //顯示版本、安裝成功

 

bower 安裝（前端資源管理工具）

pm install bower -g  //全局安裝bower
bower -v   //檢查bower安裝是否成功
1.7.9    //成功返回版本

 sass 安裝首先要安裝ruby

安裝完ruby以後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with Ruby

gem install sass //安裝sass
sass -v      //查看sass版本
Sass 3.4.22 (Selective Steve) //返回版本號則成功安裝

sass安裝不了的童鞋能夠使用淘寶鏡像或者翻個牆~

 

一、首先配置package.json文件

   在webapp下新建package.json文件，並進行配置

{
    "name": "platform",
    "description": "platform前端自動構建配置文件",
    "version": "1.0.0",
    "private": "true",
    "readme": "README",
    "author": "何Mickey",
    "homepage": "",
    "engines": {
        "node": ">=6.2.2"
    },
    "scripts": {
        "only-once": "npm install --save-dev --registry=https:\/\/registry.npm.taobao.org && gulp bower && bower install --registry=https:\/\/registry.npm.taobao.org"
    },
    "main": "Gulpfile.js",
    "dependencies": {
        "del": "~2.2.1",
        "gulp": "~3.9.1",
        "gulp-add-src": "^0.2.0",
        "gulp-clean": "~0.3.2",
        "gulp-clean-css": "~2.0.10",
        "gulp-concat": "~2.6.0",
        "gulp-csscomb": "~3.0.7",
        "gulp-imagemin": "~3.0.1",
        "gulp-less": "~3.1.0",
        "gulp-modify": "~0.1.1",
        "gulp-rename": "~1.2.2",
        "gulp-rev": "~7.1.0",
        "gulp-sass": "~2.3.2",
        "gulp-sort": "~2.0.0",
        "gulp-sourcemaps": "~1.6.0",
        "gulp-strip-comments": "~2.4.3",
        "gulp-sync": "~0.1.4",
        "gulp-uglify": "~1.5.4",
        "less-plugin-autoprefix": "~1.5.1",
        "pump": "~1.0.1",
        "uglify-js": "~2.7.0"
    }
}

　　說明：dependencies 就是咱們打包時須要用到的包、能夠在npm社區或者github裏面找到具體用法、接下來我會對包的用法進行進一步的講解

　　保存好package.json後 咱們用命令行輸入

npm install

    安裝工具的過程可能會有點久，有時網絡不行會出現卡頓、

 最後整理出來的目錄

 

 先寫這麼多.......明天繼續