Gulp的简单入门

2017年的一开始就把我忙的够呛，各种亲戚结婚酒估计还要持续一段时间。而且最近因为刚吃饭马上就追公交让我好好吐了几天。现在终于是好了。写一点关于gulp的简单使用入门。

1.环境

很多人可能听说过，但是没有使用过。所以我们首先我们来看下，gulp是什么，有什么作用，这里我们可以打开gulp的官方网站：http://www.gulpjs.com.cn/

就像官网上说的这样,gulp是一个增强你的工作流程的“自动化构建工具”。

什么是自动化构建工具。相信在几年前，大家要写一个网站，从搭建服务器开始，要准备很多工具，像js的混淆，压缩，合成，或者如果要使用别人的js插件,还得去各个网站去下载，很麻烦。

最近几年，随着node的崛起，越来越多的工具开始出现。像之前的grunt，gulp以及越来越火爆的webpack。这些工具都是可以很好的为我们前端开发提供了很好的帮助。之前所说的那些像代码的压缩，混淆等工作，都可以通过这些工具很好的完成。而其中，我个人认为gulp是其中最为方便，最符合我们开发习惯的工具。

好了，话不多说。现在开始。

首先是要准备好node环境。然后在命令行使用”npm install gulp -g”全局安装。

全局安装之后，接下来我们进入项目文件夹。在项目中创建package.json文件，使用”npm install gulp –save”在本地安装gulp模块。这样gulp的开发环境就算是已经完成了。

2.简单的使用

这里我们首先简单说下gulp的几个常用命令。

首先我们创建一个叫做gulpfile.js的配置文件，每个gulp项目下面都要有一个相对应的配置文件。这个是启动gulp的根本。

最后看下我们的目录结构：

root
- public
  - distJs
  - js
  - sass
  - css

并且在root的目录节点下创建index.html文件。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Gulp</title>
</head>
<body>
	<h1>Hello Gulp</h1>
</body>
</html>

然后在gulpfile.js中输入：

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

// 服务启动
gulp.task("webserver",function(){
    return gulp.src("./")
        .pipe(webserver({
            port:8080,
            livereload:true,
            directoryListing:true,
            open:"http://127.0.0.1:8080/index.html"
        }));
});

// 默认启动
gulp.task('default',['webserver'],function () {
    console.log("Server is running now");
});

这里我们使用了webserver创建了一个服务器环境。当然，这个模块需要我们自己来自行安装。所以我们打开命令行，输入”npm install gulp-webserver –save”。

然后安装完成之后，我们再次敲入”gulp default”来启动gulp，
我们会发现，屏幕上自动打开了网页，网址就是我们之前设定好的index.html。

ok,那么接下来我们就来理解下，在我们输入gulp default之后发生了什么事情。

首先是gulp.task()。这是gulp里面执行任务的主要函数，而且是我们在gulp中打交道最多的函数。


// 服务启动
gulp.task("webserver",function(){
    return gulp.src("./")
        .pipe(webserver({
            port:8080,
            livereload:true,
            directoryListing:true,
            open:"http://127.0.0.1:8080/index.html"
        }));
});

第一个参数是任务名称，这是一个用户自定义的字符串，第二个参数是一个回调函数，用来执行用户所指定的任务，函数中我通过webserver模块来启动服务器。gulp.src()指定了当前目录为服务器的目录，后面通过.pipe()这样的管道来控制任务流程。这里配置了一些webserver的数据。port是启动端口，open启动服务后浏览器打开的页面等等。


// 默认启动
gulp.task('default',['webserver'],function () {
    console.log("Server is running now");
});

接下来再看我们的第二段task任务是什么。

这里我们使用default这个参数。我们要注意一下，default并不是我们自定义的任务名称，而是gulp内置的默认任务。如果你足够细心，可能已经回忆起了我们在之前启动gulp服务的命令正是”gulp default”。是的，在这个内置任务下，我们需要配置gulp启动时所要执行的任务，这个任务可能是服务的启动，可能是sass的编译，可能是typescript的编译等等。所有的需要启动的任务，我们统一配置在第二个参数数组中。

在搞定完第一个服务的启动之后，我们开玩点更加高级的。

在项目中使用sass是很不错的体验。但是配置sass编译或者使用外部工具来编译却是很烦人的事情。既然gulp这么强大，为啥不用它做一个实时的编译器呢。让我们能在修改sass文件的同时，自动去为我们处理sass的预编译。

好的，接下来我们开始加入sass，首先回到命令行，输入”npm install gulp-sass –save”。安装完成之后在gulpfile.js中来引入sass并且用gulp.task()中的watch来监视sass文件夹下面文件的变化，由此来执行编译。代码如下：


var gulp = require('gulp');
var sass = require("gulp-sass");
var webserver = require('gulp-webserver');

// 服务启动
gulp.task("webserver",function(){
    return gulp.src("./")
        .pipe(webserver({
            port:8080,
            livereload:true,
            directoryListing:true,
            open:"http://127.0.0.1:8080/index.html"
        }));
});

// sass编译
gulp.task("sass",function(){
    return gulp.src("./public/sass/*.scss")
            .pipe(sass())
            .pipe(gulp.dest("./public/css"));
});

// 监听scss文件的变化
gulp.task("watch",function(){
    gulp.watch("./public/sass/*.scss",["sass"]);
});

// 默认启动
gulp.task('default',['webserver',"sass","watch"],function () {
    console.log("Server is running now");
});

然后在sass文件夹内创建第一个scss文件:index.scss

1
2
3

h1{
	color:red;
}

最后别忘了在index.html中加入一句:

1	<link rel="stylesheet" href="public/css/index.css">

我们再次启动gulp default服务，会发现网页文字的颜色发生了变化，我们的sass成功编译到了css文件夹之中。我们可以随意修改index.scss中的样式，你会发现，浏览器中的呈现也是完全同步。不需要我们自己去手动编译或者刷新。

然后看看代码的分析：

这里我们多了一个task叫做sass，然后这sass任务执行的路径是”./public/sass/*.scss”，接着通过sass()函数编译，最后输出(dest)到指定的目录”./public/css”。task完成之后我们要有一个监视任务来监视整个sass目录下的文件变化，以便于gulp去自动的执行文件修改之后的编译，watch就是这样的一个内置监视方法，我们把监视变化的文件目录添加的watch任务中。最后是在task的默认启动中添加watch，和sass任务。

说完了服务的建立和sass的编译，最后再说下js的文件的打包。如果你的项目中使用了Amd或者Cmd等方式引入其他模块，而且需要在浏览器中能很好地运行，那么你打包的时候需要借助browserify这个工具来进行你的模块合并，这里我们先不讨论这个。我们先只从简单的js文件内容合并做起，后面有时间我在补充更多的高级内容。

ok，我们继续。在命令行中输入”npm install gulp-concat –save”来安装gulp-concat模块。这个模块的作用就是帮助我们把分散的js文件打包合成为1个。

修改gulpfile.js


var gulp = require('gulp');
var sass = require("gulp-sass");
var concat = require('gulp-concat');
var webserver = require('gulp-webserver');

// 服务启动
gulp.task("webserver",function(){
    return gulp.src("./")
        .pipe(webserver({
            port:8080,
            livereload:true,
            directoryListing:true,
            open:"http://127.0.0.1:8080/index.html"
        }));
});

// sass编译
gulp.task("sass",function(){
    return gulp.src("./public/sass/*.scss")
            .pipe(sass())
            .pipe(gulp.dest("./public/css"));
});

/** 整合js */
gulp.task('concat', function () {
    return gulp.src("./public/js/*.js")
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('./public/distJs'));
});

// 监听scss文件的变化
gulp.task("watch",function(){
    gulp.watch("./public/sass/*.scss",["sass"]);
    gulp.watch("./public/js/*.js",["concat"]);
});

// 默认启动
gulp.task('default',['webserver',"sass","concat","watch"],function () {
    console.log("Server is running now");
});

在index.html中添加:

1	<script src="public/distJs/bundle.js"></script>

这个bundle.js就是我们最终合成的js文件，然后我们在js目录下创建两个js文件,1.js,2.js，然后分别在其中输入console.log(1),和console.log(2)。然后重启服务，最后在浏览器的控制台中成功的打印出了1,2。而且打开bundle.js会发现这两个语句乖乖的待在了这一个脚本之中了。

concat任务的实现和文件变化的监听和上面所说的sass任务几乎是一样的，这里我就不再重复了。

3.小结

关于gulp的简单入门就先到这里了。如果你要用gulp实现更多更强大的功能，就仍然需要你的不断学习了。

项目中所有用到的文件我都放在了这里，不过不推荐直接拿代码来用，手敲一次印象更加深刻。

感谢阅读。