Gulp基礎

1.什麼是gulp?

gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器。

 

2.爲何使用gulp?

gulp不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成，提升咱們的工做效率。

 

3.gulp介紹?

gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

在實現上，借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

 

4.基本使用?

a.安裝node，npm會隨着一併安裝。node中文網：http://nodejs.cn/

b.安裝完畢，確認安裝成功：命令行運行node -v查看node版本；命令行運行npm -v查看npm版本；

c.選裝cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org。確認安裝成功，運行cnpm -v查看cnpm版本；

d.全局安裝gulp:cnpm install gulp -g。確認安裝成功，命令行運行gulp -v查看gulp版本；

e.定位到項目文件夾，將gulp安裝到項目本地：cnpm install  gulp --save-dev

f.安裝任務依賴，新建新建gulpfile文件。示例以下：

安裝依賴（示例gulp-less）：cnpm install gulp-less --save-dev

新建gulpfile.js文件：（必定是gulpfile這個名稱）

var gulp = require('gulp'); 
var less = require('gulp-less');

gulp.task('less', function() { gulp.src('./less/*.less') .pipe(less()) .pipe(gulp.dest('./css')); });

g.運行gulp任務:gulp [任務名稱]

 

更多細節知識請自行學習。

 

參考文章：

http://www.gulpjs.com.cn/

http://www.javashuo.com/article/p-hlovxnnh-cv.html

http://www.ydcss.com/archives/18