前言
新人使用gulp的一个记录。
首先对于第一个新事物，我会问gulp这是什么？
答：gulp是一个自动化构建工具，它可以做一些自动化的任务，比如:
- 检查Javascript
- 编译Sass（或Less之类的）文件
- 合并Javascript
- 压缩并重命名合并后的Javascript
- 变更静态资源
- 给静态资源添加 md5
- 合并雪碧图
- 自动刷新浏览器
- ...
以前为了提高网站的访问速度，这些都是人工做的，现在gulp可以很好的完成他们，因为它们是流程化的，程序员就是极客，这种能用程序做的当然不用人来咯。
好了，想必到这大家也对gulp有了初步的了解，下面开始进入使用流程。
gulp的使用
gulp的使用很简单。
三步走起！！！
项目目录
同样，我们先建立一个新项目用来入门。项目的目录结构如下：
这里我先简单贴出里面的具体代码，我们最最重要的是 gulpfile.js
首先是两个js文件，咱们这次只是为了测试，所以代码都很简单。
header.js 和 index.js
//header.js
function A() {
console.log("I am A");
}
//index.js
function B() {
console.log("I am B");
}
下面再看看 index.less
// index.less
@color: #4D926F;
#header {
background-color: @color;
}
h2 {
color: @color;
}
再下面是 index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../dist/css/index.css" />
<title>Title</title>
</head>
<body>
</body>
</html>
Gulp配置文件
最最最重要的 gulpfile.js 闪亮登场，这段我们好好讲讲，非常重要。
gulp只有五个方法： task ， run ， watch ， src ，和 dest
task这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。
run这个API用来运行任务
watch这个API用来监听任务。
src这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正则表达式/*/.scss。
dest这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。
其实整个gulp的配置文件，基本上都是在做一些任务的配置，比如创建任务，监听任务等等。
// gulpfile.js
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 编译less
gulp.task('less', function() {
gulp.src('src/less/*.less') //该任务针对的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest('./dist/css')); //将会在dist/css下生成index.css
});
// 检查脚本
gulp.task('lint', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并，压缩文件
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'less', 'scripts');
// 监听JS文件变化
gulp.watch('src/js/*.js', function(){
gulp.run('lint', 'less', 'scripts'); //多个任务就直接往后加即可
});
// 监听less文件变化
gulp.watch('src/less/*.less', function(){
gulp.run('lint', 'less', 'scripts');
});
});
// gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
// gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
// gulp.dest(path[, options]) 处理完后文件生成路径
这时，我们创建了一个基于其他任务的default任务。使用 .run() 方法关联和运行我们上面定义的任务，使用 .watch() 方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务，就会自动重新编译打包了，就是重新运行上面的任务。
上面的注释说的都很清楚，初步的，其他的就不介绍了。
好了，到现在为止，我们的代码已经写完了。
执行Gulp任务
下面咱们开始执行自动化任务命令。
gulp xxx , 这里的 xxx 就是咱们上面写的 task，咱们还可以写 gulp less , gulp lint...
结果如下：
而且文件都是编译好的。
// index.css less编译后的，很强大吧
body {
background-color: #4D926F;
}
h2 {
color: #4D926F;
}
// all.js 合并了 index.js header.js的内容
function B() {
console.log("I am B");
}
function A() {
console.log("I am A");
}
//all.min.js 被压缩后的
function B(){console.log("I am B")}function A(){console.log("I am A")}
另外说下 gulp.watch 这个是监听文件变化，我们修改一下 index.less，gulp就会自动重新执行三个Task，具体就不演示了。
这时候你打开你的views下的index.html，能见到以下画面，说明你成功了。
代码
本文代码已经上传到 github上，喜欢的话，给个star呗。
https://github.com/XuXiaoGH/gulptest/tree/master
写在最后
本文是一个gulp的入门级教程，如有错误还请大牛指正，让小子也有得进步。
如果对你有所帮助，那是我最大的荣幸。
对了，兄台，对你有帮助的话能否点个赞再走。
3477288873-5808ad0a8d62c_articlex
参考文献
https://www.zhihu.com/question/35479764
http://www.tuicool.com/articles/FJVNZf
http://www.sheyilin.com/2016/02/gulp_introduce/
感谢上面三位的付出，从他们这学到很多。
网友评论