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服务时动态传一个参数,这样我们就不需要