尼奧:我親愛(ài)的墨菲斯，請(qǐng)問(wèn)什么叫g(shù)ulp?
墨菲斯:...,尼奧你又要學(xué)人家偽前端裝B了...
尼奧:裝B更健康，我愿意裝音念，請(qǐng)你告訴我吧
墨菲斯:....
那么，什么是gulp呢躏敢？
我們學(xué)過(guò)哲學(xué)我們都知道闷愤，要回答一個(gè)東西是什么很難，但是我們畢竟學(xué)過(guò)語(yǔ)文的件余，我們知道有一種修辭手法叫類比讥脐，所以我想了半天，gulp可以用一個(gè)我們?cè)趙indows里司空見(jiàn)慣的東西來(lái)類比啼器，作用是一樣的：
gulp稍微比git難一點(diǎn)旬渠，所以及15分鐘是不夠的，要花上30分鐘時(shí)間端壳。
bat
這個(gè)bat不是那三大神一樣公司告丢，我說(shuō)的是
批處理
恩，騙一個(gè)算一個(gè)损谦！
親愛(ài)的孩子們懂了沒(méi)有岖免？
OK，我們開(kāi)始學(xué)習(xí)怎么使用吧Ｕ占瘛颅湘！
安裝node
點(diǎn)擊這里
下載這個(gè):
下載完了，一個(gè)exe,那么你懂的麻敌，下一步下一步
驗(yàn)證你安裝成功了
打開(kāi)命令行CMD栅炒，看下面：
安裝taobao源
這一步其實(shí)不應(yīng)該有的，但是GFW术羔，你懂的赢赊，所以照做吧！＜独释移！
在命令行里輸入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝gulp
cnpm install --global gulp
使用gulp
我認(rèn)為最快的學(xué)會(huì)一個(gè)東西的辦法不是糾結(jié)原理，而是直接拿過(guò)來(lái)用寥殖，所以玩讳，我們推薦你直接拿我弄好的一個(gè)庫(kù)myQuery來(lái)練手就行了。
我已經(jīng)把你可能用得上的百分之八十的gulp插件直接配套好了嚼贡，直接用就行了熏纯。
安裝myQuery
有二種安裝方式
第一種：
cnpm install myquery
第二種：
git clone https://github.com/moyu-edu/myQuery.git
初始化myQuery
cnpm install
使用gulp
gulp dev
開(kāi)發(fā)的時(shí)候訪問(wèn)
gulp devsass
適合使用sass的用戶
gulp devless
適合使用less的用戶
gulp
上線版本執(zhí)行的命令，會(huì)進(jìn)行eslint檢測(cè)并進(jìn)行壓縮代碼粤策，如果執(zhí)行成功可以到dist文件夾中看到您的js壓縮代碼
gulp postcss
自動(dòng)加前綴等
解讀gulpfile.js
var gulp = require("gulp");//gulp主對(duì)象
var util = require("gulp-util");//gulp的工具對(duì)象
var notify = require("gulp-notify");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var eslint = require('gulp-eslint');
var sourcemaps = require('gulp-sourcemaps');
var gls = require('gulp-live-server');
var sass = require("gulp-scss");
var watch = require('gulp-watch');
var autoprefixer = require("gulp-autoprefixer");
var less = require('gulp-less');
//dev服務(wù)器環(huán)境
gulp.task('dev', function() {
//1. serve with default settings
var server = gls.static(['examples',"node_modules/qunitjs/qunit/","src/"], 80) //equals to gls.static('public', 3000);
server.start();
});
//編譯sass
gulp.task("sass",function(){
gulp.src("examples/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("examples/css/"))
});
//實(shí)時(shí)編譯sass
gulp.task("sasswatch",function(){
watch("examples/scss/*.scss",function(){
util.log("sass文件改變了");
gulp.start("sass");
})
})
//devSass服務(wù)器環(huán)境
gulp.task('devsass', function() {
//1. serve with default settings
var server = gls.static(['examples',"node_modules/qunitjs/qunit/","src/"], 80) //equals to gls.static('public', 3000);
server.start();
gulp.start("sasswatch");
});
//編譯less
gulp.task('less', function () {
return gulp.src('examples/less/*.less')
.pipe(less({}))
.pipe(gulp.dest('examples/css'));
});
//實(shí)時(shí)編譯less
gulp.task("lesswatch",function(){
watch("examples/less/*.less",function(){
util.log("less文件改變了");
gulp.start("less");
})
})
//devLess服務(wù)器環(huán)境
gulp.task('devless', function() {
//1. serve with default settings
var server = gls.static(['examples',"node_modules/qunitjs/qunit/","src/"], 80) //equals to gls.static('public', 3000);
server.start();
gulp.start("lesswatch");
});
//加前綴
gulp.task("postcss",function(){
return gulp.src("examples/scss/*.scss")
.pipe(sass())
.pipe(autoprefixer({
browsers:["Android 4.1", "iOS 5.1", "Chrome > 0", "ff > 0", "ie >= 0"]
}))
.pipe(gulp.dest("examples/css/"))
})
//上線前服務(wù)器環(huán)境
gulp.task('pub', function() {
//1. serve with default settings
var server = gls.static(['examples',"node_modules/qunitjs/qunit/","dist/"], 80) //equals to gls.static('public', 3000);
server.start();
});
gulp.task('compress', function() {
return gulp.src('src/*.js')
.pipe(sourcemaps.init())
.pipe(uglify())
.on("error", notify.onError(function (error) {
return "the step of uglify has some error: " + error.message;
}))
.pipe(rename(function(path){
path.basename = "myquery.min"
}))
.on("error", notify.onError(function (error) {
return "the step of rename has some error: " + error.message;
}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('dist'))
.pipe(notify({
message : 'no bug,congratulations,you are doing a good job!!'
}));
});
gulp.task('lint', function () {
// ESLint ignores files with "node_modules" paths.
// So, it's best to have gulp ignore the directory as well.
// Also, Be sure to return the stream from the task;
// Otherwise, the task may end before the stream has finished.
return gulp.src(['**/*.js','!node_modules/**'])
// eslint() attaches the lint output to the "eslint" property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError());
});
gulp.task( 'default', ['lint',"compress"], function(){
//blablabla
});
這么長(zhǎng)的文件是不是有點(diǎn)暈樟澜？我們直接定位到第29行這幾行代碼，就明白了：
//編譯less
gulp.task('less', function () {
return gulp.src('examples/less/*.less')
.pipe(less({}))
.pipe(gulp.dest('examples/css'));
});
看到?jīng)]有,我們這個(gè)文件是個(gè)js文件，gulp是一個(gè)對(duì)象秩贰，類似我們的window一樣霹俺，這個(gè)對(duì)象有一個(gè)屬性叫task,就像批處理一樣的執(zhí)行一個(gè)具體的任務(wù)，然后形式最外在長(zhǎng)得像這樣：
gulp.task("你隨便起一個(gè)名字",回調(diào)函數(shù))
看到?jīng)]有毒费，基本上你剛才已經(jīng)見(jiàn)識(shí)了gulp的百分之七十的核心了就是這個(gè)形式丙唧。但是我們要想進(jìn)一步的了解，我們還得學(xué)一個(gè)抽象的東西觅玻，打起精神來(lái)想际，我們要學(xué)習(xí)的是東西叫"流"。
那么什么是流呢串塑？（停頓幾秒環(huán)視四周）
OK沼琉，說(shuō)到流我們想起什么呢？當(dāng)然是水啦桩匪。我找一段經(jīng)典的樂(lè)百氏廣告詞：
樂(lè)百氏27層凈化
第一層石英粗型沙過(guò)濾懸浮雜質(zhì)
第二層石英粗型沙過(guò)濾泥沙雜質(zhì)
第三層石英粗型沙過(guò)濾鐵銹雜質(zhì)
第四層石英粗型沙過(guò)濾膠體雜質(zhì)
第五層石英粗型沙過(guò)濾有機(jī)物雜質(zhì)
第六層石英中型沙過(guò)濾懸浮雜質(zhì)
第七層石英中型沙過(guò)濾泥沙雜質(zhì)
第八層石英中型沙過(guò)濾鐵銹雜質(zhì)
第九層石英中型沙過(guò)濾膠體雜質(zhì)
第十層石英中型沙過(guò)濾有機(jī)物雜質(zhì)
第十一層石英細(xì)型沙過(guò)濾懸浮雜質(zhì)
第十二層石英細(xì)型沙過(guò)濾泥沙雜質(zhì)
第十三層石英細(xì)型沙過(guò)濾鐵銹雜質(zhì)
第十四層石英細(xì)型沙過(guò)濾膠體雜質(zhì)
第十五層石英細(xì)型沙過(guò)濾有機(jī)物雜質(zhì)
看到?jīng)]有打瘪，我們可以把最開(kāi)始的流想像成原水，然后經(jīng)過(guò)一層一層的過(guò)濾傻昙，慢慢的就形成了最終的純凈水了闺骚。
我們?cè)賮?lái)看一眼我們上面提到的回調(diào)：
//編譯less
gulp.task('less', function () {
return gulp.src('examples/less/*.less')
.pipe(less({}))
.pipe(gulp.dest('examples/css'));
});
看到?jīng)]有,gulp.src(examples/less/*.less")你就想像成是原來(lái)一開(kāi)始的水，然后這個(gè)pipe你就想像成過(guò)濾器妆档，這樣一層一層的就會(huì)到最后一次輸入我們最終的純凈水啦僻爽！ --> gulp.dest("examples/css")
OK，如果你看完了贾惦，gulp最重要的東西你已經(jīng)學(xué)到了胸梆，新技能get!!!
