gulp教程（上）

Posted 2021-04-08 前端js动力节点

今天我们来学习gulp的基本语法。首先你需要搭建一下node环境，如果你一点node基础都没有，可以先稍微了解一下。

node可以正常工作后，你可以在任一盘符下建立一个空文件夹，比如叫gulptest，建好后进入这个文件夹，然后进行gulp的安装。

1.安装。

这个需要两步，一是全局安装，一是局部安装。

全局安装

 npm install  --global gulp

局部安装

npm install  gulp

2.创建gulpfile.js文件。

var gulp = require('gulp');

gulp.task('default', function() {
// 将你的默认的任务代码放在这
});

3.运行

命令行状态下输入gulp，回车，默认名为default的任务（task）就被运行了。

这个很简单，gulp其实就是不断布置任务，然后运行任务的工具。

下面我们来看下，如何做一个压缩的任务。

1.我们以css为例，首先需要安装压缩模块。

npm install  gulp-minify-css

为了测试，我们起两个文件夹，分别是src和dist。

src表示源文件，dist表示编译后的文件。建好后如下图所示：

2.在src中，我们随便放个css文件：

@charset "utf-8";
html{
color:#000;
background:#FFF;
}
body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td{
margin:0;
padding:0;
}
table{
border-collapse: collapse;/*单线框还是双线框，separate是双线框*/
border-spacing:0;
}
em,
strong,
b,
u,
i{
font-style:normal;/*normal:标准;italic:斜体*/
font-weight: normal;/*normal:标准;bold:粗体*/
}
ol,
ul{
list-style: none;
}
h1,
h2,
h3{
font-size:100%;
font-weight: normal;
}
input,
textarea,
select{
font-family: inherit;/*继承*/
font-size:inherit;
font-weight: inherit;
*font-size:100%;/*兼容IE*/
}
img{
border:0 none;/*这样兼容性更好*/
}

3.然后我们布置一下任务，在gulpfile.js文件中写下：

// 获取 gulp
var gulp = require('gulp');
// 获取 minify-css 模块（用于压缩 CSS）
var minifyCSS = require('gulp-minify-css');
//布置任务
gulp.task('default', function () {
// 1. 找到文件
gulp.src('src/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
});

4.运行。

ok，如果不报错，第一个压缩任务就完成啦！生成的文件放在dist/css目录中。

下面我们再来回顾一下语法。布置任务的关键字task就不说了，主要是这个pipe。

pipe就是管道的意思，意为像管道的水一样，第一个完成就流向第二个，第二个完成交给第三个，以此类推。

此例中，gulp.src()是声明待处理的文件，src/*.css表示src文件夹下的所有css文件，一旦找到了源头，管道就怼了进去，开始进行处理；通过第二步压缩后，最终到达第三步，gulp.dest()就是最终输出的内容了。

很简单吧？那我们再试着做个js的压缩吧！

首先还是安装插件。

npm install gulp-uglify --save-dev 

找个可测试的js文件，大家可以用未压缩过的jquery库文件。

然后写一下gulpfile.js:

// 获取 gulp
var gulp = require('gulp');
// 获取 gulp-uglify 模块（用于压缩 JS）
var minifyJS = require('gulp-uglify');
//布置任务
gulp.task('default', function () {
// 1. 找到文件
gulp.src('src/*.js')
// 2. 压缩文件
.pipe(minifyJS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/'))
});

看到这里，我想聪明的你应该对gulp基本用法有所了解了吧？

有同学会有这样的疑问：

我现在已经知道，gulp可以帮我们做一些压缩合并等的优化工作。然而，gulp任务究竟是放在我们本地处理完、然后再上传代码呢，还是在服务器端直接处理？

这个得看实际情况。最好的做法当然是在服务器端直接运行处理，我们前端只需git上传源代码即可，简单省事。

然而有时候我们并无法拿到服务器权限，当然也无从安装node环境和gulp，这种情况在大多外包公司是常见的——客户根本不允许你动他们的主机。那这时候，你只能本地处理后再上传代码了。

下节课我们来看点稍复杂的案例。大家别急，先把一些基本问题搞清楚，入门是关键。