博客
博客
文章目录
  1. 一、准备工作
  2. 二、为什么要使用 gulp
  3. 三、一步步抽象自己的 gulp 任务

Gulp 入门指南

为什么要写这篇博客
谈起为什么,其实就是想总结下这段时间做的工作。之前一直在用 gulp,但是一直没有自己的思考,下了两个插件就开始了。这一次为公司的项目配置了一次 gulp,尽可能多的考虑到了一些情况,比如本地开发调试时生成 map 映射,上线时清除到已生成的 map 映射。

参考:在构建这个项目时,参考到了 这篇文章

一、准备工作

  1. 安装 node(作为一个假前端,如果你还不知道 node,那你就去面币思过吧);
  2. 使用 npm 安装 gulp
npm install --global gulp   // 全局安装 gulp
npm install --save-dev gulp // 在项目目录下安装 gulp,作为项目的开发依赖

gulp -v // 使用该命令查看 gulp 是否安装成功
  1. 项目目录下创建 gulpfile.js。

二、为什么要使用 gulp

首先 gulp 可以解放双手,以前需要频繁 Ctrl+C、Ctrl+V 的操作,现在只需要在命令行输入一个命令就可以搞定。只要我们配置好 gulpfile.js 文件后,一个命令就能将当前项目下所有的 js 与 css 进行压缩,并且实时监听修改的文件进行操作。这还得感谢 node,让 js 具有了文件读写的能力,之前只能在浏览器运行的脚本,现在可以在本地跑起来,前端人员也能开心的写服务器了。

三、一步步抽象自己的 gulp 任务

  • 先编写一个简单的压缩 js 的任务,并生成对应的 map 映射,方便在浏览器中调试。
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify);
gulp.task ('uglifyjs', function () {
return gulp.src ('./resource/js/**/*.js')
.pipe (sourcemaps.init ())
.pipe (uglify ({
mangle: true, // 默认不混淆变量名
compress: false
}))
.pipe (sourcemaps.write ('/map/js'))
.pipe (gulp.dest ('./publice/js'));
});

上面是我们使用 gulp 最平常不过的使用方法,但是这样做会有个缺点,那就是在压缩多个 js 过程中,一旦有一个 js 写错,就会终止任务,并且不知道出错的地方在哪里。
在 gulp 中文网上发现了这样一片文章 整合 streams 来处理错误。gulp 每一次 pipe 都会创建新的管道流,使用 stream-combiner2 可以将一系列的 stream 合并成一个,然后只用监听这一个 stream 抛出的错误就可以了。

  • 使用单个管道流来监听 error

只要稍微修改下前面的代码,就能愉快的监听 gulp 过程中产生的 error 了。

var gulp = require('gulp'),
combiner = require('stream-combiner2'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify);
gulp.task ('uglifyjs', function () {
var batArr = [
gulp.src ('./resource/js/**/*.js'),
sourcemaps.init (),
uglify ({
mangle: true, // 默认不混淆变量名
compress: false
}),
sourcemaps.write ('/map/js'),
gulp.dest ('./publice/js')
];
var combiner = combiner.obj (batArr);
combined.on ('error', console.error.bind (console));
return combined;
});

  • 提高 watch 的效率

先看看 watch 最原始的写法:

gulp.task ('watchjs', function() {
return gulp.watch ('./resource/js/**/*.js', function () {
var batArr = [
gulp.src ('./resource/js/**/*.js'),
sourcemaps.init (),
uglify ({
mangle: true, // 默认不混淆变量名
compress: false
}),
sourcemaps.write ('/map/js'),
gulp.dest ('./publice/js')
];
var combiner = combiner.obj (batArr);
combined.on ('error', console.error.bind (console));
return combined;
});
});

上面的这种方式可以达到监听 js 文件夹下所有的 js 的目的,并且在 js 文件发生变化后会自动执行回调函数。关键的问题在于,如果只是修改了一个 js 文件,这个函数还是会把所有的 js 都重新压缩一遍,这样的效率就很低了。

其实在 watch 方法的回调函数中,会传入一个 event 参数,该参数是一个对象,里面有当前修改的文件路径。有了这个参数,要做的就是把拼接出文件的源路径和输出路径就行,这里使用了一个插件(gulp-watch-path)。

gulp.task ('watchjs', function(event) {
return gulp.watch ('./resource/js/**/*.js', function (event) {
var paths = watchPath (event, './resource/', './public/');
var batArr = [
gulp.src (paths.srcPath),
sourcemaps.init (),
uglify ({
mangle: true, // 默认不混淆变量名
compress: false
}),
sourcemaps.write ('/map/js'),
gulp.dest (paths.distDir)
];
var combiner = combiner.obj (batArr);
combined.on ('error', console.error.bind (console));
return combined;
});
});
  • 引入 gulp-util 插件,配置更轻松

这个插件有很多的作用,相当于是一个 gulp 的工具类。现在主要介绍在项目中用到的两个方法:env 和 log。

env 方法可以获取到运行 gulp 命令时,跟在后面的参数。比如:

gulp --production

// 当运行上面的命令时,我们可以使用 env 方法获取到。

var gutil = require('gulp-util');

console.log (gutil.env ('production')); //true

log 方法可以让控制台打印出带颜色的信息(听起来好像没什么卵用),可以更清晰得看到一些错误信息。

var colors = gutil.colors;
gutil.log (colors.red ('Error!')); // 在控制台打印出红色的 Error。

完整的 gulpfile.js 文件请访问:GitHub

支持一下
扫一扫,支持一下
  • 微信扫一扫
  • 支付宝扫一扫