转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:【张鸿洋的博客】

1、概述

最近需要用进度条,秉着不重复造轮子的原则,上github上搜索了一番,看了几个觉得比较好看的ProgressBar,比如:daimajia的等。简单看了下代码,基本都是继承自View,彻彻底底的自定义了一个进度条。盯着那绚丽滚动条,忽然觉得,为什么要通过View去写一个滚动条,系统已经提供了ProgressBar以及属于它的特性,我们没必要重新去构建一个,但是系统的又比较丑,不同版本变现还不一定一样。那么得出我们的目标:改变系统ProgressBar的样子。

  对没错,我们没有必要去从0打造一个ProgressBar,人家虽然长的不好看,但是特性以及稳定性还是刚刚的,我们只需要为其整下容就ok了。

说到整容,大家都知道我们的控件是通过onDraw()画出来的,那么我们只需要去覆盖它的onDraw()方法,自己写下就ok 。

对了,我创建了一个微信公众号,欢迎关注,左边栏目上扫一扫即可。

  接下来,我们贴下效果图:

2、效果图

1、横向的进度条

2、圆形的进度条

没错,这就是我们的进度条效果,横向的模仿了daimajia的进度条样子。不过我们继承子ProgressBar,简单的为其整个容,代码清晰易懂 。为什么说,易懂呢?

横向那个进度条,大家会drawLine()和drawText()吧,那么通过getWidth()拿到控件的宽度,再通过getProgress()拿到进度,按比例控制绘制线的长短,字的位置还不是分分钟的事。

github源码地址Android-ProgressBarWidthNumber欢迎大家star or fork 。

3、实现

横向的滚动条绘制肯定需要一些属性,比如已/未到达进度的颜色、宽度,文本的颜色、大小等。 
本来呢,我是想通过系统ProgressBar的progressDrawable,从里面提取一些属性完成绘制需要的参数的。但是,最终呢,反而让代码变得复杂。所以最终还是改用自定义属性。 说道自定义属性,大家应该已经不陌生了。

1、HorizontalProgressBarWithNumber

1、自定义属性

values/attr_progress_bar.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <declare-styleable name="HorizontalProgressBarWithNumber">
  4. <attr name="progress_unreached_color" format="color" />
  5. <attr name="progress_reached_color" format="color" />
  6. <attr name="progress_reached_bar_height" format="dimension" />
  7. <attr name="progress_unreached_bar_height" format="dimension" />
  8. <attr name="progress_text_size" format="dimension" />
  9. <attr name="progress_text_color" format="color" />
  10. <attr name="progress_text_offset" format="dimension" />
  11. <attr name="progress_text_visibility" format="enum">
  12. <enum name="visible" value="0" />
  13. <enum name="invisible" value="1" />
  14. </attr>
  15. </declare-styleable>
  16. <declare-styleable name="RoundProgressBarWidthNumber">
  17. <attr name="radius" format="dimension" />
  18. </declare-styleable>
  19. </resources>

2、构造中获取

  1. public class HorizontalProgressBarWithNumber extends ProgressBar
  2. {
  3. private static final int DEFAULT_TEXT_SIZE = 10;
  4. private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1;
  5. private static final int DEFAULT_COLOR_UNREACHED_COLOR = 0xFFd3d6da;
  6. private static final int DEFAULT_HEIGHT_REACHED_PROGRESS_BAR = 2;
  7. private static final int DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR = 2;
  8. private static final int DEFAULT_SIZE_TEXT_OFFSET = 10;
  9. /**
  10. * painter of all drawing things
  11. */
  12. protected Paint mPaint = new Paint();
  13. /**
  14. * color of progress number
  15. */
  16. protected int mTextColor = DEFAULT_TEXT_COLOR;
  17. /**
  18. * size of text (sp)
  19. */
  20. protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
  21. /**
  22. * offset of draw progress
  23. */
  24. protected int mTextOffset = dp2px(DEFAULT_SIZE_TEXT_OFFSET);
  25. /**
  26. * height of reached progress bar
  27. */
  28. protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);
  29. /**
  30. * color of reached bar
  31. */
  32. protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
  33. /**
  34. * color of unreached bar
  35. */
  36. protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;
  37. /**
  38. * height of unreached progress bar
  39. */
  40. protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);
  41. /**
  42. * view width except padding
  43. */
  44. protected int mRealWidth;
  45. protected boolean mIfDrawText = true;
  46. protected static final int VISIBLE = 0;
  47. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs)
  48. {
  49. this(context, attrs, 0);
  50. }
  51. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,
  52. int defStyle)
  53. {
  54. super(context, attrs, defStyle);
  55. setHorizontalScrollBarEnabled(true);
  56. obtainStyledAttributes(attrs);
  57. mPaint.setTextSize(mTextSize);
  58. mPaint.setColor(mTextColor);
  59. }
  60. /**
  61. * get the styled attributes
  62. *
  63. * @param attrs
  64. */
  65. private void obtainStyledAttributes(AttributeSet attrs)
  66. {
  67. // init values from custom attributes
  68. final TypedArray attributes = getContext().obtainStyledAttributes(
  69. attrs, R.styleable.HorizontalProgressBarWithNumber);
  70. mTextColor = attributes
  71. .getColor(
  72. R.styleable.HorizontalProgressBarWithNumber_progress_text_color,
  73. DEFAULT_TEXT_COLOR);
  74. mTextSize = (int) attributes.getDimension(
  75. R.styleable.HorizontalProgressBarWithNumber_progress_text_size,
  76. mTextSize);
  77. mReachedBarColor = attributes
  78. .getColor(
  79. R.styleable.HorizontalProgressBarWithNumber_progress_reached_color,
  80. mTextColor);
  81. mUnReachedBarColor = attributes
  82. .getColor(
  83. R.styleable.HorizontalProgressBarWithNumber_progress_unreached_color,
  84. DEFAULT_COLOR_UNREACHED_COLOR);
  85. mReachedProgressBarHeight = (int) attributes
  86. .getDimension(
  87. R.styleable.HorizontalProgressBarWithNumber_progress_reached_bar_height,
  88. mReachedProgressBarHeight);
  89. mUnReachedProgressBarHeight = (int) attributes
  90. .getDimension(
  91. R.styleable.HorizontalProgressBarWithNumber_progress_unreached_bar_height,
  92. mUnReachedProgressBarHeight);
  93. mTextOffset = (int) attributes
  94. .getDimension(
  95. R.styleable.HorizontalProgressBarWithNumber_progress_text_offset,
  96. mTextOffset);
  97. int textVisible = attributes
  98. .getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility,
  99. VISIBLE);
  100. if (textVisible != VISIBLE)
  101. {
  102. mIfDrawText = false;
  103. }
  104. attributes.recycle();
  105. }

嗯,看起来代码挺长,其实都是在获取自定义属性,没什么技术含量。

3、onMeasure

刚才不是出onDraw里面写写就行了么,为什么要改onMeasure呢,主要是因为我们所有的属性比如进度条宽度让用户自定义了,所以我们的测量也得稍微变下。

  1. @Override
  2. protected synchronized void onMeasure(int widthMeasureSpec,
  3. int heightMeasureSpec)
  4. {
  5. int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  6. if (heightMode != MeasureSpec.EXACTLY)
  7. {
  8. float textHeight = (mPaint.descent() + mPaint.ascent());
  9. int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() + Math
  10. .max(Math.max(mReachedProgressBarHeight,
  11. mUnReachedProgressBarHeight), Math.abs(textHeight)));
  12. heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight,
  13. MeasureSpec.EXACTLY);
  14. }
  15. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  16. }

宽度我们不变,所以的自定义属性不涉及宽度,高度呢,只考虑不是EXACTLY的情况(用户明确指定了,我们就不管了),根据padding和进度条宽度算出自己想要的,如果非EXACTLY下,我们进行exceptHeight封装,传入给控件进行测量高度。

测量完,就到我们的onDraw了~~~

4、onDraw

  1. @Override
  2. protected synchronized void onDraw(Canvas canvas)
  3. {
  4. canvas.save();
  5. //画笔平移到指定paddingLeft, getHeight() / 2位置,注意以后坐标都为以此为0,0
  6. canvas.translate(getPaddingLeft(), getHeight() / 2);
  7. boolean noNeedBg = false;
  8. //当前进度和总值的比例
  9. float radio = getProgress() * 1.0f / getMax();
  10. //已到达的宽度
  11. float progressPosX = (int) (mRealWidth * radio);
  12. //绘制的文本
  13. String text = getProgress() + "%";
  14. //拿到字体的宽度和高度
  15. float textWidth = mPaint.measureText(text);
  16. float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;
  17. //如果到达最后,则未到达的进度条不需要绘制
  18. if (progressPosX + textWidth > mRealWidth)
  19. {
  20. progressPosX = mRealWidth - textWidth;
  21. noNeedBg = true;
  22. }
  23. // 绘制已到达的进度
  24. float endX = progressPosX - mTextOffset / 2;
  25. if (endX > 0)
  26. {
  27. mPaint.setColor(mReachedBarColor);
  28. mPaint.setStrokeWidth(mReachedProgressBarHeight);
  29. canvas.drawLine(0, 0, endX, 0, mPaint);
  30. }
  31. // 绘制文本
  32. if (mIfDrawText)
  33. {
  34. mPaint.setColor(mTextColor);
  35. canvas.drawText(text, progressPosX, -textHeight, mPaint);
  36. }
  37. // 绘制未到达的进度条
  38. if (!noNeedBg)
  39. {
  40. float start = progressPosX + mTextOffset / 2 + textWidth;
  41. mPaint.setColor(mUnReachedBarColor);
  42. mPaint.setStrokeWidth(mUnReachedProgressBarHeight);
  43. canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
  44. }
  45. canvas.restore();
  46. }
  47. @Override
  48. protected void onSizeChanged(int w, int h, int oldw, int oldh)
  49. {
  50. super.onSizeChanged(w, h, oldw, oldh);
  51. mRealWidth = w - getPaddingRight() - getPaddingLeft();
  52. }

其实核心方法就是onDraw了,但是呢,onDraw也很简单,绘制线、绘制文本、绘制线,结束。

还有两个简单的辅助方法:

  1. /**
  2. * dp 2 px
  3. *
  4. * @param dpVal
  5. */
  6. protected int dp2px(int dpVal)
  7. {
  8. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  9. dpVal, getResources().getDisplayMetrics());
  10. }
  11. /**
  12. * sp 2 px
  13. *
  14. * @param spVal
  15. * @return
  16. */
  17. protected int sp2px(int spVal)
  18. {
  19. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
  20. spVal, getResources().getDisplayMetrics());
  21. }

好了,到此我们的横向进度就结束了,是不是很简单~~如果你是自定义View,你还得考虑progress的更新,考虑状态的销毁与恢复等等复杂的东西。

接下来看我们的RoundProgressBarWidthNumber圆形的进度条。

2、RoundProgressBarWidthNumber

圆形的进度条和横向的进度条基本变量都是一致的,于是我就让RoundProgressBarWidthNumber extends HorizontalProgressBarWithNumber 了。

然后需要改变的就是测量和onDraw了:

完整代码:

  1. package com.zhy.view;
  2. import android.content.Context;
  3. import android.content.res.TypedArray;
  4. import android.graphics.Canvas;
  5. import android.graphics.Paint.Cap;
  6. import android.graphics.Paint.Style;
  7. import android.graphics.RectF;
  8. import android.util.AttributeSet;
  9. import com.zhy.library.view.R;
  10. public class RoundProgressBarWidthNumber extends
  11. HorizontalProgressBarWithNumber {
  12. /**
  13. * mRadius of view
  14. */
  15. private int mRadius = dp2px(30);
  16. public RoundProgressBarWidthNumber(Context context) {
  17. this(context, null);
  18. }
  19. public RoundProgressBarWidthNumber(Context context, AttributeSet attrs) {
  20. super(context, attrs);
  21. mReachedProgressBarHeight = (int) (mUnReachedProgressBarHeight * 2.5f);
  22. TypedArray ta = context.obtainStyledAttributes(attrs,
  23. R.styleable.RoundProgressBarWidthNumber);
  24. mRadius = (int) ta.getDimension(
  25. R.styleable.RoundProgressBarWidthNumber_radius, mRadius);
  26. ta.recycle();
  27. mTextSize = sp2px(14);
  28. mPaint.setStyle(Style.STROKE);
  29. mPaint.setAntiAlias(true);
  30. mPaint.setDither(true);
  31. mPaint.setStrokeCap(Cap.ROUND);
  32. }
  33. @Override
  34. protected synchronized void onMeasure(int widthMeasureSpec,
  35. int heightMeasureSpec) {
  36. int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  37. int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  38. int paintWidth = Math.max(mReachedProgressBarHeight,
  39. mUnReachedProgressBarHeight);
  40. if (heightMode != MeasureSpec.EXACTLY) {
  41. int exceptHeight = (int) (getPaddingTop() + getPaddingBottom()
  42. + mRadius * 2 + paintWidth);
  43. heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight,
  44. MeasureSpec.EXACTLY);
  45. }
  46. if (widthMode != MeasureSpec.EXACTLY) {
  47. int exceptWidth = (int) (getPaddingLeft() + getPaddingRight()
  48. + mRadius * 2 + paintWidth);
  49. widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth,
  50. MeasureSpec.EXACTLY);
  51. }
  52. super.onMeasure(heightMeasureSpec, heightMeasureSpec);
  53. }
  54. @Override
  55. protected synchronized void onDraw(Canvas canvas) {
  56. String text = getProgress() + "%";
  57. // mPaint.getTextBounds(text, 0, text.length(), mTextBound);
  58. float textWidth = mPaint.measureText(text);
  59. float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;
  60. canvas.save();
  61. canvas.translate(getPaddingLeft(), getPaddingTop());
  62. mPaint.setStyle(Style.STROKE);
  63. // draw unreaded bar
  64. mPaint.setColor(mUnReachedBarColor);
  65. mPaint.setStrokeWidth(mUnReachedProgressBarHeight);
  66. canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
  67. // draw reached bar
  68. mPaint.setColor(mReachedBarColor);
  69. mPaint.setStrokeWidth(mReachedProgressBarHeight);
  70. float sweepAngle = getProgress() * 1.0f / getMax() * 360;
  71. canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0,
  72. sweepAngle, false, mPaint);
  73. // draw text
  74. mPaint.setStyle(Style.FILL);
  75. canvas.drawText(text, mRadius - textWidth / 2, mRadius - textHeight,
  76. mPaint);
  77. canvas.restore();
  78. }
  79. }

首先获取它的专有属性mRadius,然后根据此属性去测量,测量完成绘制;

绘制的过程呢?

先绘制一个细一点的圆,然后绘制一个粗一点的弧度,二者叠在一起就行。文本呢,绘制在中间~~~总体,没什么代码量。

好了,两个进度条就到这了,是不是发现简单很多。总体设计上,存在些问题,如果抽取一个BaseProgressBar用于获取公共的属性;然后不同样子的进度条继承分别实现自己的测量和样子,这样结构可能会清晰些~~~

4、使用

布局文件

  1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. xmlns:zhy="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent" >
  6. <LinearLayout
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:orientation="vertical"
  10. android:padding="25dp" >
  11. <com.zhy.view.HorizontalProgressBarWithNumber
  12. android:id="@+id/id_progressbar01"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:layout_marginTop="50dip"
  16. android:padding="5dp" />
  17. <com.zhy.view.HorizontalProgressBarWithNumber
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_marginTop="50dip"
  21. android:padding="5dp"
  22. android:progress="50"
  23. zhy:progress_text_color="#ffF53B03"
  24. zhy:progress_unreached_color="#ffF7C6B7" />
  25. <com.zhy.view.RoundProgressBarWidthNumber
  26. android:id="@+id/id_progress02"
  27. android:layout_width="match_parent"
  28. android:layout_height="wrap_content"
  29. android:layout_marginTop="50dip"
  30. android:padding="5dp"
  31. android:progress="30" />
  32. <com.zhy.view.RoundProgressBarWidthNumber
  33. android:layout_width="match_parent"
  34. android:layout_height="wrap_content"
  35. android:layout_marginTop="50dip"
  36. android:padding="5dp"
  37. android:progress="50"
  38. zhy:progress_reached_bar_height="20dp"
  39. zhy:progress_text_color="#ffF53B03"
  40. zhy:radius="60dp" />
  41. </LinearLayout>
  42. </ScrollView>

MainActivity

  1. package com.zhy.sample.progressbar;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.os.Handler;
  5. import com.zhy.annotation.Log;
  6. import com.zhy.view.HorizontalProgressBarWithNumber;
  7. public class MainActivity extends Activity {
  8. private HorizontalProgressBarWithNumber mProgressBar;
  9. private static final int MSG_PROGRESS_UPDATE = 0x110;
  10. private Handler mHandler = new Handler() {
  11. @Log
  12. public void handleMessage(android.os.Message msg) {
  13. int progress = mProgressBar.getProgress();
  14. mProgressBar.setProgress(++progress);
  15. if (progress >= 100) {
  16. mHandler.removeMessages(MSG_PROGRESS_UPDATE);
  17. }
  18. mHandler.sendEmptyMessageDelayed(MSG_PROGRESS_UPDATE, 100);
  19. };
  20. };
  21. @Log
  22. @Override
  23. protected void onCreate(Bundle savedInstanceState) {
  24. super.onCreate(savedInstanceState);
  25. setContentView(R.layout.activity_main);
  26. mProgressBar = (HorizontalProgressBarWithNumber) findViewById(R.id.id_progressbar01);
  27. mHandler.sendEmptyMessage(MSG_PROGRESS_UPDATE);
  28. }
  29. }

最后,本篇博客的目的呢?就是为了说下,类似ProgressBar这样的控件,如果你只是想去改变显示的样子,完全没必要从0去创建,复写onDraw即可,当然是个人观点,提出供大家参考。

源码点击下载

Android 打造形形色色的进度条 实现可以如此简单的更多相关文章

  1. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  2. Android 使用ProgressBar实现进度条

    ProgressBar简介ProgressBar是进度条组件,通常用于向用户展示某个耗时操作完成的进度,而不让用户感觉是程序失去了响应,从而更好地提升用户界面的友好型. 课程目标(1)制定Progre ...

  3. android 对话框中的进度条 (ProgressDialog)

    from:http://byandby.iteye.com/blog/817214 显然要定义对话框进度条就要用ProgressDialog,首先我们需要创建ProgressDialog对象,当然这里 ...

  4. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  5. android中SeekBar拖动进度条的使用及事件监听

    下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...

  6. Android开发 PorgressBar(进度条)的使用

    圆环进度条(默认)和水平进度条: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  7. Android学习笔记:进度条ProgressBar的使用以及与AsyncTask的配合使用

    ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.Pro ...

  8. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

  9. Android多种样式的进度条

    原创 2016年04月26日 16:46:35 标签: android / clip / 进度条 / 8473 编辑 删除 ---- The mark of the immature man is t ...

随机推荐

  1. Linux能力(capability)机制的继承

    1.Linux能力机制概述 在以往的UNIX系统上,为了做进程的权限检查,把进程分为两类:特权进程(有效用户ID是0)和非特权进程(有效用户ID是非0).特权进程可以通过内核所有的权限检查,而非特权进 ...

  2. 浏览器格式化JSON输出,thinkphp

    1 //编写类方法用$this->ajaxReturn()返回数据 2 public function index(){ 3 $user = M('User'); 5 $data = $user ...

  3. intent-filter data Uri 意图过滤器 详解

    组件的intent-filter属性         如果一个 Intent 请求在一片数据(Uri)上执行一个动作(Action), Android 如何知道哪个应用程序的哪个组件能用来响应这个请求 ...

  4. hdu 2031

    水题 AC代码: #include<iostream> using namespace std; int main() { int i,j,b[1000],k; while(cin> ...

  5. myFocus焦点图插件

    注意 1.焦点图初始化ID和图片最外层ID保持一致 2.图片列表外面必须包裹一个div,且id必须为pic http://demo.jb51.net/js/myfocus/tutorials.html ...

  6. 禁止chrome中CORS跨域资源共享错误

    在开发中,可以通过命令行命令chrome --allow-file-access-from-files来 禁止CORS错误. 只在紧急情况下使用这个方法,比如你的老板正站在你身后, 并且所有事情都无法 ...

  7. CentOS6.5 PHP基础环境搭建 [个人整理-亲测可用]

    ** * CentOS6.5 搭建基础PHP环境(yum安装) * http://www.aiplaypc.com/160.html **   #安装需要的包,有依赖关系,自动帮你解决 yum ins ...

  8. ORACLE主要的系统表和系统视图

    ORACLE主要的系统表和系统视图 1.系统表 ORACLE数据库的系统参数都存储在数据库中,可以通过SQLPLUS,以用户SYS进行查询.几个重要的表或者视图如下: v$controlfile:控制 ...

  9. js判断当前操作系统

    function validataOS(){ if(navigator.userAgent.indexOf(“Window”)>0){ return ”Windows”; }else if(na ...

  10. npm和gulp学习笔记

    原文链接:[gulpfile.js文件常见配置]