使用 Gulp

安装

首先,全局安装 Gulp,主要是为了在 shell 中使用 gulp 命令。

然后利用 npm init 初始化一个项目,再在项目中安装 gulp 作为依赖。

安装完毕后,就可以使用 gulp了,由于 gulp 的 api 并不多,可以在 Gulp 中文网 看看它的基本使用。

完成以上步骤之后,就可以创建目录了,主要的几个目录如下:

dist 目录用于存放处理后生成的文件,public 用于存放我们的开发源文件,index.html 是主页面,gulpfile.jsgulp 的配置文件。


配置 JS 文件

提起 JS,我们可能首先想到两步操作,一是将 ES6,ES7 代码利用 babel 转换成 ES5 形式,二是压缩 JS 代码。

如果不适用 Gulp,就得首先复制自己的 js 代码用一些工具网站进行转换,然后再新建一个文件粘贴自己转换后的代码(以前我就是这么干的),或者也可以安装 babel,不过我们也得手动进行执行转换,这样的效率太低了。在 Webpack 中也可以完成转换任务。不过我个人在 Webapck 也仅仅只是会用而已,所以今天只说说 Gulp

首先,安装 gulp-babelgulp-uglify

安装完之后,就可以书写如下代码:

  1. gulp.task() 用于定义一个 gulp 任务,这里定义的任务可以在 shell 中直接执行,如 gulp scripts
  2. gulp.src() 用于获取文件。
  3. .pipe() 用于将读取的文件数据以管道的形式进行传输,可见这里是先读取了 public/js 目录下的所有 js 文件,然后传输给 babel 进行处理,然后再将处理好的数据传输给 uglify, 经过上述两步的处理,我们书写的 es6, es7 代码就可以转换成 es2015 形式并且完成压缩。
  4. gulp.dest() 的意思就是将处理的结果保存在哪个目录下,这里我们将其保存在了 dist/js 目录下,由于我们未显式的为输出的文件进行命名,所有其名字和输入文件相同。

相关资料:

gulp babel
gulp-uglify


配置 styles 文件

如果我们书写样式的话,我们可能有三个任务要做,一,选择一个趁手的预处理器(less 或者 sass)。二, 为一些样式添加浏览器前缀。三,压缩 css 代码。

为了完成以上三个功能(我使用的是 less 处理器),我们需要安装三个包,分别是 gulp-lessless-plugin-autoprefixgulp-clean-css

安装好之后,就可以使用上述包来完成相关的功能了。

在这里,我们再 less 的处理中使用了 autoprefix 插件,这个变量是我们事先声明好的,如下所示:

相关资料:

gulp-less
gulp-clean-css


压缩图片

由于项目中肯定会用到图片,而且图片本身是比较大的,所以如果能在事先对图片进行压缩,那就再好不过了,这里用到的是 gulp-imagemin 包,用以下命令安装。

之后就可以像上面直接使用了。

相关资料:

gulp-imagemin


浏览器自动刷新

上面我们已经配置好了脚本,样式,图片的任务,那么我们如果想每次变更之后,转换任务自动执行而且浏览器自动刷新该怎么做呢?

这首先要利用到 gulp.watch() 方法,这个方法就是用来观察文件,如果观察的文件发生变化,就可以指定任务,从而完成自动刷新文件的功能。

我们需要为上述代码重新分配一个任务,比如:

然后再创建一个默认任务, 用于完成全局的配置。

defaultgulp 默认执行的任务,即在 shell 中输入 gulp 默认执行该任务。上面的意思就是,如果执行 default,那就执行 styles, imgs, scripts, auto 任务。

由于 auto 任务是对各个文件的监视,所以执行完之后会启动一个服务器用于监视各个文件的变化,一旦有文件发生变化,就会执行相关的任务。

即使完成了以上任务,每次修改文件就回动态刷新生成的文件,但是这并不会自动刷新浏览器,所以我们需要借助于 browser-sync 工具。

首先,安装

然后我们引用该工具。

下面修改上面已经完成的 auto 任务。

首先,我们初始化了一个服务器,指定其目录为当前目录。看到上面的代码就应该都明白了,监视文件的变化,如果变化了就启用 browserSync.reload刷新浏览器。

相关资料:

Browsersync


其它

建议使用 pump 用于处理错误信息,它的好处在哪里?比如我们的 gulpfile.js 的某一个任务出错了或者是在使用某一个包出错了,默认的话我们是不知道错误出现在哪里,但是使用了 pump 之后,我们就可以知道到底错误出现在哪个包,方便定义错误位置。

pump

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注