30分钟让前端学会gulp(纽约的老郑原创)
2016-01-06 本文已影响771人
郑伟的菜园子
尼奥:我亲爱的墨菲斯，请问什么叫gulp?
墨菲斯:...,尼奥你又要学人家伪前端装B了...
尼奥:装B更健康，我愿意装，请你告诉我吧
墨菲斯:....
那么，什么是gulp呢？
我们学过哲学我们都知道，要回答一个东西是什么很难，但是我们毕竟学过语文的，我们知道有一种修辞手法叫类比，所以我想了半天，gulp可以用一个我们在windows里司空见惯的东西来类比，作用是一样的：
gulp稍微比git难一点，所以及15分钟是不够的，要花上30分钟时间。
bat
这个bat不是那三大神一样公司，我说的是
批处理
u=2778387390,1823683051&fm=21&gp=0.jpg
恩，骗一个算一个！
亲爱的孩子们懂了没有？
OK，我们开始学习怎么使用吧！！
安装node
点击这里
下载这个:
npm.png
下载完了，一个exe,那么你懂的，下一步下一步
验证你安装成功了
打开命令行CMD，看下面：
555.png
安装taobao源
这一步其实不应该有的，但是GFW，你懂的，所以照做吧！！！
在命令行里输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装gulp
cnpm install --global gulp
使用gulp
我认为最快的学会一个东西的办法不是纠结原理，而是直接拿过来用，所以，我们推荐你直接拿我弄好的一个库myQuery来练手就行了。
我已经把你可能用得上的百分之八十的gulp插件直接配套好了，直接用就行了。
安装myQuery
有二种安装方式
第一种：
cnpm install myquery
第二种：
git clone https://github.com/moyu-edu/myQuery.git
初始化myQuery
cnpm install
使用gulp
gulp dev
开发的时候访问
gulp devsass
适合使用sass的用户
gulp devless
适合使用less的用户
gulp
上线版本执行的命令，会进行eslint检测并进行压缩代码，如果执行成功可以到dist文件夹中看到您的js压缩代码
gulp postcss
自动加前缀等
解读gulpfile.js
var gulp = require("gulp");//gulp主对象
var util = require("gulp-util");//gulp的工具对象
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服务器环境
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/"))
});
//实时编译sass
gulp.task("sasswatch",function(){
watch("examples/scss/*.scss",function(){
util.log("sass文件改变了");
gulp.start("sass");
})
})
//devSass服务器环境
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'));
});
//实时编译less
gulp.task("lesswatch",function(){
watch("examples/less/*.less",function(){
util.log("less文件改变了");
gulp.start("less");
})
})
//devLess服务器环境
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/"))
})
//上线前服务器环境
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
});
这么长的文件是不是有点晕？我们直接定位到第29行这几行代码，就明白了：
//编译less
gulp.task('less', function () {
return gulp.src('examples/less/*.less')
.pipe(less({}))
.pipe(gulp.dest('examples/css'));
});
看到没有,我们这个文件是个js文件，gulp是一个对象，类似我们的window一样，这个对象有一个属性叫task,就像批处理一样的执行一个具体的任务，然后形式最外在长得像这样：
gulp.task("你随便起一个名字",回调函数)
看到没有，基本上你刚才已经见识了gulp的百分之七十的核心了就是这个形式。但是我们要想进一步的了解，我们还得学一个抽象的东西，打起精神来，我们要学习的是东西叫"流"。
那么什么是流呢？（停顿几秒环视四周）
OK，说到流我们想起什么呢？当然是水啦。我找一段经典的乐百氏广告词：
乐百氏27层净化
第一层石英粗型沙过滤悬浮杂质
第二层石英粗型沙过滤泥沙杂质
第三层石英粗型沙过滤铁锈杂质
第四层石英粗型沙过滤胶体杂质
第五层石英粗型沙过滤有机物杂质
第六层石英中型沙过滤悬浮杂质
第七层石英中型沙过滤泥沙杂质
第八层石英中型沙过滤铁锈杂质
第九层石英中型沙过滤胶体杂质
第十层石英中型沙过滤有机物杂质
第十一层石英细型沙过滤悬浮杂质
第十二层石英细型沙过滤泥沙杂质
第十三层石英细型沙过滤铁锈杂质
第十四层石英细型沙过滤胶体杂质
第十五层石英细型沙过滤有机物杂质
看到没有，我们可以把最开始的流想像成原水，然后经过一层一层的过滤，慢慢的就形成了最终的纯净水了。
我们再来看一眼我们上面提到的回调：
//编译less
gulp.task('less', function () {
return gulp.src('examples/less/*.less')
.pipe(less({}))
.pipe(gulp.dest('examples/css'));
});
看到没有,gulp.src(examples/less/*.less")你就想像成是原来一开始的水，然后这个pipe你就想像成过滤器，这样一层一层的就会到最后一次输入我们最终的纯净水啦！ --> gulp.dest("examples/css")
OK，如果你看完了，gulp最重要的东西你已经学到了，新技能get!!!
