Vern Blog
0%

Gulp构建实例

Posted on Edited on In

结构说明assets项目资源目录，dev开发目录，dist编译输出目录，gulpfile.js自动化工具API

gulp的使用安装node环境(自行goole即可)全局安装gulp

1
2

$ npm install gulp -g

进入到需要gulp管理的项目路径, 如 /gulp 再安装一遍

1
2

$ npm install gulp --save-dev

安装gulp插件

1
2

$ npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del
1
2
3
4
5
6
7
8
9
10
11
12

sass的编译 (`gulp-ruby-sass`)
自动添加css前缀（`gulp-autoprefixer`）
压缩css（`gulp-minify-css`）
js代码校验（`gulp-jshint`）
合并js文件（`gulp-concat`）
压缩js代码（`gulp-uglify`）
压缩图片（`gulp-imagemin`）
自动刷新页面（`gulp-livereload`）
图片缓存，只有图片替换了才压缩（`gulp-cache`）
更改提醒（`gulp-notify`）
清除文件（`del`）

5.运行task任务

1
2

$ gulp

监听文档实现实时编译

1
2

$ gulp watch

gulp的API请查看gulpfile.js文件scss文件规范以及说明各个小模块以下划线开头全小写命名多单词以 - 符号分隔，总模块正常，以该模块文件夹命名，在其中导入需要的小模块(详细规则请查看font-awesome的scss源码，更多内容google脑补)
例：
_path.scss路径配置文件，_mixins.scss预编译文件，_variables.scss变量定义文件，font-awesome.scss模块导入文件

脚本使用说明基本组件error.js用途：低版本浏览器访问限制
用法：在head标签中最先引入下列代码

1
2
3
4

<!--[if lt IE ]>
  <script src="dist/js/error.min.js"></script>
<![endif]-->

mian.js用途：javascript入口文件负责渲染数据处理交互
用法：引入即可，涉及模块较多后续完善模块说明

date.js用途：解析处理日期数据，支持多种日期格式
用法：调用Date方法

1
2
3
4
5
6
7
8
9
10
11
12
13
Date.today(); // Returns today's date, with time set to 00:00 (start of day).

Date.today().next().friday(); // Returns the date of the next Friday.
Date.today().last().monday(); // Returns the date of the previous Monday.

new Date().next().march(); // Returns the date of the next March.
new Date().last().week(); // Returns the date one week ago.

Date.today().is().friday(); // Returns true|false if the day-of-week matches.
Date.today().is().fri(); // Abbreviated day names.

Date.today().is().november(); // Month names.
Date.today().is().nov(); // Abbreviated month names.

daterange-picker.js用途：基于bootstrapt的日期范围选择器

modernizr.custom.js用途：提供过渡动画支持

jQuery组件jquery.bootstrap.wizard.js用途：基于jQuery的Bootstrap向导式插件

jquery.dataTables.js用途：表格处理插件，包括排序分页，宽度自动处理
用法：引入后，以下结构绘制表格
例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table class="table table-bordered" id="dataTable1">
  <thead>
    <th class="check-header">
      <label
        ><input id="checkAll" name="checkAll" type="checkbox" /><span></span
      ></label>
    </th>
    <th>字段1</th>
    <th>字段2</th>
    <th>字段3</th>
    <th>字段4</th>
    <th>字段5</th>
    <th>字段6</th>
    <th></th>
  </thead>
  <tbody>
    ... ... ...
  </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*
    根据ID初始化表格，以下 .table 类用于实现单选和多选
*/
$("#dataTable1").dataTable({
  sPaginationType: "full_numbers",
  aoColumnDefs: [
    {
      bSortable: false,
      aTargets: [, -1],
    },
  ],
});
$(".table").each(function () {
  return $(".table #checkAll").click(function () {
    if ($(".table #checkAll").is(":checked")) {
      return $(".table input[type=checkbox]").each(function () {
        return $(this).prop("checked", true);
      });
    } else {
      return $(".table input[type=checkbox]").each(function () {
        return $(this).prop("checked", false);
      });
    }
  });
});

jquery.easy-pie-chart.js用途：饼状图绘制工具
用法：引入文件后，按ID初始化DOM元素
传送门：rendro.github.io
例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- Donut Charts -->
<div class="col-lg-8">
  <div class="widget-container">
    <div class="heading">
      <i class="fa fa-bar-chart"></i> 优惠券使用率

      <div class="widget-content clearfix">
        <div class="col-sm-4">
          <div
            class="pie-chart1 pie-chart pie-number easyPieChart"
            data-percent="60"
            style="width: 200px; height: 200px; line-height: 200px;"
          >
            60%
            <canvas width="200" height="200"></canvas>
            <p class="h6">总使用率</p>

            <div class="col-sm-4">
              <div
                class="pie-chart2 pie-chart pie-number easyPieChart"
                data-percent="86"
                style="width: 200px; height: 200px; line-height: 200px;"
              >
                86%
                <canvas width="200" height="200"></canvas>
                <p class="h6">代金券使用率</p>

                <div class="col-sm-4">
                  <div
                    class="pie-chart3 pie-chart pie-number easyPieChart"
                    data-percent="34"
                    style="width: 200px; height: 200px; line-height: 200px;"
                  >
                    34%
                    <canvas width="200" height="200"></canvas>
                    <p class="h6">折扣券使用率</p>

                    <!-- end Donut Charts -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/*
# =============================================================================
#   Easy Pie Chart
# =============================================================================
*/
/*  >60%          #81e970   green
    >=30% & <=60% #fab43b   yellow
    <30%          #f46f50   red

    size        图型大小
    lineWidth   线宽
    lineCap     线类型
    barColor    线颜色
    animate     动画速度
    scaleColor  选择色
*/
$(".pie-chart1").easyPieChart({
  size: ,
  lineWidth: ,
  lineCap: "square",
  barColor: "#81e970",
  animate: ,
  scaleColor: false
});
$(".pie-chart2").easyPieChart({
  size: ,
  lineWidth: ,
  lineCap: "square",
  barColor: "#81e970",
  animate: ,
  scaleColor: false
});
$(".pie-chart3").easyPieChart({
  size: ,
  lineWidth: ,
  lineCap: "square",
  barColor: "#f46f50",
  animate: ,
  scaleColor: false
});

jquery.sparkline.js用途：canvas图表绘制工具
用法：引入后按ID初始化，ul部分为横轴坐标，可在style.scss文件中配置宽度
传送门：omnipotent.net
例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="widget-container">
  <div class="heading">
    <i class="fa fa-area-chart"></i> 日活跃用户

    <div class="widget-content padded">
      <div class="chart-graph line-chart">
        <div id="linechart-2-1">
          <canvas
            width="619"
            height="226"
            style="display: inline-block; width: 619px; height: 226px; vertical-align: top;"
          ></canvas>
          <ul class="chart-text-axis day">
            <li>1</li>
            <li>5</li>
            <li>10</li>
            <li>15</li>
            <li>20</li>
            <li>25</li>
          </ul>
          <!-- end Line Chart -->
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

(function() {
  var linechartResize;
  /*
    $(id).sparkline([number1, number2， ... ...],{
        options
    })


    type:                       线类型
    width:                      宽度
    height:                     高度
    lineColor:                  线颜色
    fillColor:                  填充色
    lineWidth:                  线宽
    spotColor:                  点色
    minSpotColor:               最小点色
    maxSpotColor:               最大点色
    highlightSpotColor:         高亮点色
    highlightLineColor:         高亮线色
    spotRadius:                 点半径
    chartRangeMin:              图最小范围
  */
  linechartResize = function() {
    $("#linechart-1").sparkline([, , , , , , , , , , , , , , , , , , , , ,, , , , , , , , , ], {
      type: "line",
      width: "100%",
      height: "226",
      lineColor: "#a5e1ff",
      fillColor: "rgba(241, 251, 255, 0.9)",
      lineWidth: ,
      spotColor: "#a5e1ff",
      minSpotColor: "#bee3f6",
      maxSpotColor: "#a5e1ff",
      highlightSpotColor: "#80cff4",
      highlightLineColor: "#cccccc",
      spotRadius: ,
      chartRangeMin:
    });
})

jquery.validate.js用途：表单验证插件
用法：添加DOM元素自定义属性(具体内容见官方API)
传送门：jqueryvalidation.org
例:

1
2
3
4
5
6
7
8
9
10
11
12
(1)required:true 必输字段 (2)remote:"check.php"
使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22
只验证格式，不验证有效性 (7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数 (9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同 (11)accept:
输入拥有合法后缀名的字符串（上传文件的后缀） (12)maxlength:5
输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10
输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于
5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10] 输入值必须介于 5 和 10
之间 (16)max:5 输入值不能大于5 (17)min:10 输入值不能小于10

Welcome to my other publishing channels