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 文件夹为金泰目录加载.
首先我们要定制化一下 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';
}我个人偏向于第一种,命令行输入的字符比较少,而且没有 -- 这种符号.
第二种定制更灵活,输入参数前要有 -- ,所以自己权衡.