zoukankan      html  css  js  c++  java
  • 使用gulp自动化配置环境变量

    使用gulp拷贝文件,可以完成开发api环境变量的配置,例如公司的线上环境有三个:

    1.alpha线上测试环境

    2.dev线上测试环境

    3.test 本地测试环境

    (4.production 正式系统环境)

    各个环境的apIhost不一样,在开发中每次更改url会很不方便,所以用到gulp可以完成环境变量的配置。

    在git ignore文件中忽略gulp生成的文件夹 /.test/(我的文件夹名为test即本地测试系统)

    使用gulp拷贝文件夹不改变文件目录和路径有两个方法:

    1.给gulp.src添加一个base选项即:gulp.src('文件名',{base:'.'});

    2。在src中使用通配符例如:

    test*/文件名。

    return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])

    Gulp使用node-glob来从你指定的glob里面获取文件,这里列举下面的例子来阐述,方便理解:

    • js/app.js 精确匹配文件
    • js/*.js 仅匹配js目录下的所有后缀为.js的文件
    • js/**/*.js 匹配js目录及其子目录下所有后缀为.js的文件
    • !js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
    • *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

    gulp使用的过程中涉及代码:

    var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    browserSync = require('browser-sync'),
    preprocess = require('gulp-preprocess'),
    watch = require('gulp-watch'),
    concat = require('gulp-concat');

    var floder_dev ='dev',
    floder_test='test',
    floder_alpha = 'alpha',
    floder_production = 'production';

    gulp.task('api-dev',function () {
    return gulp.src('console/environment.js')
    .pipe(preprocess({
    context:{
    apiUrl :'http://www.baidu',
    }
    }))
    .pipe(gulp.dest(floder_dev+'/console'));
    });

    gulp.task('api-test',function () {
    return gulp.src('console/environment.js')
    .pipe(preprocess({
    context:{
    apiUrl :'http://10.10.17.1.32/',
    }
    }))
    .pipe(gulp.dest(floder_test+'/console'));
    });

    gulp.task('api-alpha',function () {
    return gulp.src('console/environment.js')
    .pipe(preprocess({
    context:{
    apiUrl :'http://www.yexu.dd/',
    }
    }))
    .pipe(gulp.dest(floder_alpha+'/console'));
    });
    gulp.task('html-dev',function () {
    return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])
    .pipe(gulp.dest(floder_dev))
    });

    gulp.task('html-test',function () {
    return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])
    .pipe(gulp.dest(floder_test))
    });

    gulp.task('html-alpha',function () {
    return gulp.src(['!console/environment.js','assets*/**/*','console*/**/*','weixin*/*','images*/*'])
    .pipe(gulp.dest(floder_alpha))
    });

    gulp.task('profile-dev',['html-dev','api-dev'], function(){
    return gulp.src('index.html')
    .pipe(gulp.dest(floder_dev));
    });

    gulp.task('profile-test',['html-test','api-test'], function(){
    return gulp.src('index.html')
    .pipe(gulp.dest(floder_test));
    });

    gulp.task('profile-alpha',['html-alpha','api-alpha'], function(){
    return gulp.src('index.html')
    .pipe(gulp.dest(floder_alpha));
    });

    gulp.task('dev',function(){
    gulp.watch(['console/**/*'], ['profile-test']);
    });

  • 相关阅读:
    day 66 ORM django 简介
    day 65 HTTP协议 Web框架的原理 服务器程序和应用程序
    jQuery的事件绑定和解绑 事件委托 轮播实现 jQuery的ajax jQuery补充
    background 超链接导航栏案例 定位
    继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素
    属性选择器 伪类选择器 伪元素选择器 浮动
    css的导入方式 基础选择器 高级选择器
    03-body标签中相关标签
    Java使用内存映射实现大文件的上传
    正则表达式
  • 原文地址:https://www.cnblogs.com/MianShan/p/6139244.html
Copyright © 2011-2022 走看看