发布前端资源到SharePoint(5)- gulp任务

gulp是一款自动化构建工具,它允许开发者使用JavaScript来编写任务,再执行这些任务来构建前端项目。gulp基于Node.js,可以通过NPM集成数千款插件,这些插件极大的减少了编写任务的难度。笔者团队的项目已经深度依赖gulp进行构建,本文则会介绍如何利用gulp来进行发布的方法。

gulp对编辑器并无要求,只需要Node.js环境,如果使用Visual Studio的话,可以使用其内置的Node.js而无需单独安装。

Node.js环境就绪之后,接着在当前项目中安装gulp及其插件gulp-spsave,具体安装方法并非本文重点,略过不表。

现在就可以开始编写gulp任务了,任务要定义在项目根目录下的gulpfile.js文件中,首先我们编写一个简单的任务:

var gulp = require("gulp"),
spsave = require("gulp-spsave");

gulp.task("publish_all", function () {
return gulp.src([ "*.aspx", "assets/**/*.*" ], { base: "./" })
.pipe(spsave({
siteUrl: "https://ent302.sharepoint.hpe.com/teams/chai-1",
folder: "pages",
username: user@company.com",
password: "password",
flatten: false
}));
});

这段代码定义了一个名为publish_all的任务,该任务会将项目根目录下的所有aspx文件以及assets目录下的所有文件都通过spsave插件上传到指定的SharePoint文件夹。
保存gulpfile.js之后,就可以执行刚才定义的任务了。执行任务的方法有很多种,如果使用Visual Studio的话,可以在其“任务运行程序资源管理器”中找到刚才定义的任务,双击即可执行,如图所示:

如果使用的编辑器不能和gulp很好的集成的话,也可以使用命令行来执行任务。

刚才定义的任务会上传符合条件的所有文件,这个任务可能更加适合上线新版本或者第一次搭建开发环境。平常的开发调试过程中,我们会更希望只上传修改过的文件,并且尽量做到自动化。想要实现这个功能,我们可以继续定义一个新的任务:

gulp.task("publish_auto", function () {
gulp.watch([ "*.aspx", "assets/**/*.*" ])
.on("change", function (e) {
return gulp.src(e.path, { base: "./" })
.pipe(spsave({
siteUrl: "https://ent302.sharepoint.hpe.com/teams/chai-1",
folder: "pages",
username: "user@company.com",
password: "password",
flatten: false
}));

});
});

这个任务使用了watch,所以会一直执行下去,一旦检测到符合条件的文件发生变化,就自动执行上传操作。

作为一个长期执行的任务,我们自然不希望某个文件上传出错影响到整个任务,我们可以借助gulp-plumber插件来处理错误,首先在当前项目中安装gulp-plumber,然后将它引入到在gulpfile.js中:

var plumber = require("gulp-plumber");

接着在任务中使用gulp-plumber来处理错误,比如:

gulp.task("publish_auto", function () {
gulp.watch([ "*.aspx", "assets/**/*.*" ])
.on("change", function (e) {
return gulp.src(e.path, { base: "./" })
.pipe(plumber({
errorHandler: function (error) {
console.log("ERROR:");
console.log(error);
}}))
.pipe(spsave({
siteUrl: "https://ent302.sharepoint.hpe.com/teams/chai-1",
folder: "pages",
username: "user@company.com",
password: "password",
flatten: false
}));
});
});

现在我们有了两个任务,两个任务都硬编码了相同的参数,我们可以将这部分相同的参数提取为公共变量:

var glob = [ "*.aspx", "assets/**/*.*" ],
publishingConfig = {
siteUrl: "https://ent302.sharepoint.hpe.com/teams/chai-1",
folder: "pages",
username: "user@company.com",
password: "password",
flatten: false
};

那么任务的代码就能够变得更加清爽,也更容易维护,以publish_all为例:

gulp.task("publish_all", function () {
return gulp.src(glob, { base: "./" }).pipe(spsave(publishingConfig));
});

gulpfile.js可以纳入到代码管理中,从而让所有团队成员都能共享这些任务,但我们可以把用户凭据信息单独存储到一个脱离代码管理的文件中,让每个团队成员都能使用自己的凭据来发布文件。
我们可以在gulpfile.js同级目录下创建一个credential.js文件:

module.exports = {
username: "user@company.com",
password: "password"
}

然后在gulpfile.js中引用credential.js:

var credential = require("./credential.js");

那么刚才定义的publishingConfig就可以改写为:

var publishingConfig = {
siteUrl: "https://ent302.sharepoint.hpe.com/teams/chai-1",
folder: "pages",
username: credential.username,
password: credential.password,
flatten: false
};

gulp是款非常强大的自动化构建工具,使用gulp来执行发布任务意味着我们可以同时享受gulp提供的自动化构建功能,比如我们可以在发布之前自动将sass文件编译为css文件、自动将js文件合并打包、自动压缩资源文件等等,从而将整个项目更好的工程化,提升开发效率、团队协作能力甚至代码的健壮性。此外,gulp任务使用JavaScript来编写,其灵活性也是之前介绍的几种方法所不能达到的。

发表评论

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