gulp 传参数 实现定制化执行任务


如果你想自动化构建一些东东,请使用 gulp ,还不明白什么是 gulp ,那么请用 google 百度一下 "什么是gulp"

如果你不知道如何翻墙使用 google ,那么请离自动化构建远一点(最好披星戴月地赶快逃离IT圈)


因为之前专门有一篇介绍了gulp ,是什么,能帮我们做什么,如何去做,请点击此博文查看: angular 系列三 gulp 代码构建工具简介


所以上面博文提到的东西这里都不会再重复说明.

今天和大家分享的是 如何使用 gulp 传输参数.


我今天碰到一个应用场景:

老项目A还在线上维护,新项目B已经着手在开发.


这2套项目后端调用是一致的,唯独不同的地方是前端UI (CSS ,JS ,HTML )


所以今天把两个项目合并到一个项目中,只是这个项目有2个静态目录.


但是不论本地,测试环境还是线上都需要来回切换,说白了就是给他穿不同的衣服,有人一定想到了,加载不同的css不就实现了(亲,我们2个项目都是基于 angular.js开发的,这种单页面应用,启动定位到首页后,你的所有样式,controllers,service,filter 等等angular.js 相关的一切都已成定局)


所以你能做的貌似去修改 express指定静态目录是最妥当,安全,2个版本互不影响的方式.


所以就有了这篇文章:


执行方式:

var ui_static = config.kendo ? 'kendo' : 'static';
    app.set('views', path.join(config.PORTAL_ROOT, ui_static));
    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);
    app.use(express.static(path.join(config.PORTAL_ROOT, ui_static)));

当配置文件中 kendo 配置项为 true 时.我的默认静态目录是 kendo 文件夹

反正:默认文件夹是 static


那这样看起来非常好操作了.直接去把 配置文件中的 kendo=true / false 即可.


这种方法没有问题,但是有点笨,不论本地,测试环境,线上,当你部署的时候都要手动去修改这个配置项才能达到你预定的效果.


我们就是想灵活一点.


因为项目有自动化构建工具 gulp ,所以当我们自动构建的时候,能不能通过一个参数来告诉 node 服务,我需要指定哪个目录为静态目录.

类似这样:

➜  /Users/zhangzhi/code/portal git:(dev) ✗ >gulp kendo

这样直接以 kendo 文件夹为静态目录加载.

➜  /Users/zhangzhi/code/portal git:(dev) ✗ >gulp

这样默认以 static 文件夹为金泰目录加载.


  1. 首先我们要定制化一下 gulpfile.js 的配置文件:

var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require('gulp-uglify');
var cssmin = require('gulp-cssmin');
var wrap = require("gulp-wrap");
var expressService = require('gulp-express-service');

var wwwroot;
if(//某种条件){
    wwwroot='./kendo';
}else{
    wwwroot='./static';
}

var paths = {
    scripts: [wwwroot+"/scripts/main.js", wwwroot+"/scripts/**/*.js"],
    styles: [wwwroot+'/styles/main.css', wwwroot+'/styles/**/*.css'],
    templates: [wwwroot+'/templates/**/*.html'],
    services: ["app/**/*.js", "config/**/*.js", "portal-service.js", "service.js"],
    kendo_services: ["app/**/*.js", "config/**/*.js", "kendo-portal-service.js", "service.js"]
};

gulp.task("scripts", function () {
    //压缩js的任务
});

gulp.task('templates', function () {
    //压缩html模板的任务
});

gulp.task('styles', function () {
    //压缩css样式文件的任务
});

gulp.task('run_service', function () {
    //服务器启动入口任务
});


gulp.task('run_kendo_service', function () {
    //服务器启动入口任务
});

gulp.task("watch", function () {
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.templates, ["templates"]);
    gulp.watch(paths.styles, ['styles']);
    gulp.watch(paths.services, ['run_service']);
});

gulp.task("kendo_watch", function () {
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.templates, ["templates"]);
    gulp.watch(paths.styles, ['styles']);
    gulp.watch(paths.services, ['run_kendo_service']);
});


gulp.task("kendo", ["build", "run_kendo_service", "kendo_watch"]);
gulp.task("default", ["build", "run_service", "watch"]);


从上面一个简单的 gulpfile 配置文件可以看到 paths 对象指定了我们下面任务需要的 js ,css ,html ,服务器入口 等所有文件的路径.

而通过 wwwroot 变量,让这个路径成为一种可变路径,而非写死的.


注意:从上面你可以看到有 2个 服务器启动入口任务

这2个任务的作用就是执行服务器端node 入口文件.


为什么有2个?

当默认gulp 启动自动构建时,我们希望启动服务器端 app.js 文件.

当 gulp kendo 时,我们希望构建工具启动服务器端 kendo_app.js 文件.


这2个文件的区别在哪 ?

kendo_app.js 会在启动后端node 服务时,在 config 对象加一个属性 config.kendo=true ;

而 app.js 并没有给这个配置属性赋值.


这个配置项的作用是什么?

就是我们上面说到的 执行方式 

var ui_static = config.kendo ? 'kendo' : 'static';

node 会根据配置项来决定以哪个目录为静态目录.


我也在寻找一种方式,可以让 gulp 启动node服务时动态传一个参数,这样我们就不需要2个启动文件了,这样更完美,但是目前还没有找到这样的实现方式,后期如果发现有更完美的解决方案,我会及时更新此博文.


gulp如何接收参数

gulp下有个evn 属性可以接受参数,evn 属性值对应一个对象:

{ _: [] }

默认是上面这样的.

其中 _ 属性值是一个空数组,当我们制定gulp 任务时,任务名会默认填充 _ 属性值的数组.

比如我们指定 kendo 任务时.

gulp kendo

这时 gulp.env 是这样的

gulp.env: { _: [ 'kendo' ] }

如果你指定多个任务时

gulp kendo run_kendo_service

这时 gulp.env是这样的

gulp.env: { _: [ 'kendo','run_kendo_service' ] }

注意:执行任务名的前提是 你的 gulpfile 里配置了这个任务,如果没有此任务.比如 gulp xxx ,那么直接会报错,告诉你没有 xxx 这样的任务.



1.直接运行gulp 指定的某个 task

比如我们上面构建了好多个 task,其中有一个task 是这样的

gulp.task("kendo", ["build", "run_kendo_service", "kendo_watch"]);

这个任务其实执行了很多子任务,包括 

build (除去运行服务端入口的所有前段任务,压缩,混淆,重命名,生成新文件........)

run_kendo_service (执行后端入口的任务 kendo_app.js )

kendo_watch (监视任务,当前段/后端任何相关文件有变动,自动执行构建任务)


所以这个任务正好是我们希望静态目录定位到 kendo 文件夹的任务.

那么我们就可以这样启动 gulp

gulp kendo

这样它会自动执行kendo 任务.


我们在 gulpfile 通过获取 gulp.env._ 数组里面的元素是否有值,并且任务名是不是 kendo 即可指定构建工具要针对哪个目录进行构建并监听.


所以我们 gulpfile 需要这样来接收任务名

if(gulp.env._&&gulp.env._.length>0&&gulp.env._[0]=='kendo'){
    wwwroot='./kendo';
}else{
    wwwroot='./static';
}


2.通过gulp 参数来指定不同构建目录

我们刚才看到的  gulp.env 属性值并不是它的庐山真面目.

其实 gulp 有另外一种指定参数的方式

gulp --key

是不是很熟悉的样子....

我们接触的 shell ,输入参数都是这样的方式

如:

node --version

git --help

gulp 一样可以通过这种方式指定一个或者多个自定义参数.注意是自定义参数(上面指定任务名时可不是自定义,必须是存在的任务才可以)


那我们就来随意指定2个参数玩玩

gulp --key --value

够随意吧,你可以脑洞打开,后面跟上N个,哈哈


这时 gulp.env 参数值是这样的

gulp.env: { _: [], key: true, value: true }

我们还可以给上面的参数 key,value 指定一个参数值,随意来2个

gulp --key 111 --value 222

再来看下 gulp.env 属性值

gulp.env: { _: [], key: 111, value: 222 }

看到这里,你应该明白,我们在 gulpfile 中如何获取终端输入的参数来定制gulp 任务处理的文件夹了.

if(gulp.env.kendo){
    wwwroot='./kendo';
}else{
    wwwroot='./static';
}


我个人偏向于第一种,命令行输入的字符比较少,而且没有 -- 这种符号.

第二种定制更灵活,输入参数前要有 -- ,所以自己权衡.



回到顶部