來新公司工作的第五個月、整站資源打包管理也提上了日程。
問題：
首先、什么是整站的打包管理呢？
我們公司的幾個重要產品都在同一個webapp里面，但是，不同的開發部門獨立開發不同的產品，長期以來，我們就不知道其他部門的在做什么，或許我們正在頭疼的問題，隔壁部門已經早早解決了呢？
各個部門的前端資源也是到處都是、難以管理、於是就提出了整站資源共享、整站資源共享的前提就是資源打包能統一、在幾個產品里面、既有使用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安裝不了的童鞋可以使用淘寶鏡像或者翻個牆~
1、首先配置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
安裝工具的過程可能會有點久，有時網絡不行會出現卡頓、
最后整理出來的目錄
先寫這么多.......明天繼續