使用gulp構建前端（一）

                                                       使用gulp構建前端（一）

  前端頁面愈來愈多的時候，如何管理其實也是一個很是重要的東西，less文件編譯成css文件不必定要藉助編譯軟件，在打包的時候如何對css文件/js文件，進行壓縮。其實知足上面三點的軟件仍是有點多的，可是使用比較簡單的gulp就是其中的佼佼者。

   話很少說，使用gulp使用的是npm進行管理，因此咱們須要去node.js官網去安裝，windows下基本是傻瓜式的安裝，就不作任何提醒，不過npm隨着node.js安裝就自動生成了。（查看 node  -v ,npm -v）。

    安裝了npm事後，就開始安裝gulp的插件，因爲咱們須要全局使用gulp的時候，就須要全局安裝：

npm install gulp -g

  創建一些開發目錄：

mkdir project

cd project

mkdir site

cd site

 使用npm init創建package.json（有提示輸入）

{
  "name": "chen",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "chen",
  "license": "ISC",
}

 本地安裝gulp進行編譯依賴（全局安裝和本地安裝區別是隻能在這使用，並且要加入依賴）

-D, --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），因此開發階段通常使用它
npm install gulp --save-dev 或 npm install gulp -D

此時package.json以下：

{
  "name": "chen",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "chen",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
  }
}

在相同目錄下創建一個gulpfile.js並開始寫一些測試代碼:

var gulp = require('gulp'); //本地安裝gulp所用到的地方
//入口任務   
gulp.task('default', function(){
   console.log("start");

}
);

執行命令 gulp 查看結構，若是控制檯沒有報錯，並顯示start那麼則環境搭建成功。

關於npm命令總結的比較好的網站:http://www.jb51.net/article/86253.htm

gulp的一些好網站：http://www.gulpjs.com.cn/docs/api/（gulp中文網）

http://www.ydcss.com/archives/18（有gulp英文網翻譯，還有一些插件的例子）

查看gulp的一些插件的使用在github上面 查詢 gulp-*就能夠看到了。